[EXAMPLE] Added a simple Ember.js application, "Tasks", without any p…

…ersistence The application is based on the canonical Ember.js “Todos” application, as required by law: <http://emberjs.com/examples/todos/> See also: <https://github.com/emberjs/examples>
devinus · Aug 14, 2012 · d7c155f · d7c155f
1 parent b693675
commit d7c155f
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 0 deletions.
diff --git a/example/app.css b/example/app.css
@@ -0,0 +1,104 @@
+body {
+  color: #222;
+  background-color: #f5f5f5;
+  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  padding: 2em 4em;
+}
+
+h1 {
+  color: #d33850;
+  font-size: 3em;
+  font-weight: 300;
+  margin: 0 0 0.5em 0;
+  padding: 0;
+}
+
+h1 div.ember-view {
+  display: inline;
+}
+
+h1 small {
+  font-size: 0.75em;
+  font-weight: 100;
+}
+
+#create_task {
+  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 2em;
+  font-weight: 300;
+  padding: 0.5em;
+  width: 20em;
+  outline: none;
+  border: 1px solid #eaeaea;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 0 1px;
+}
+
+ul#tasks {
+  margin: 1.5em 0 0 0;
+  padding: 0;
+}
+
+li.task {
+  color: #444;
+  font-size: 1.5em;
+  font-weight: 300;
+  list-style-type: none;
+  margin: 0.5em 0 0 0;
+  padding: 0 0 0.5em 0;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+ul li.task:last-of-type {
+  border: none;
+}
+
+li.task input[type=checkbox] {
+  margin-right: 0.5em;
+  top: -0.3em;
+  position: relative;
+}
+
+li.task .remove-task {
+  top: 0.4em;
+  display: inline-block;
+  position: relative;
+  visibility: hidden;
+  opacity: 0.45;
+}
+
+li.task:hover .remove-task {
+  visibility: visible;
+}
+
+li.task .remove-task:hover {
+  opacity: 0.75;
+  cursor: pointer;
+}
+
+li.task.completed {
+  color: #999;
+  text-decoration: line-through;
+}
+
+/* Lifted from Twitter bootstrap */
+[class^="icon-"], [class*=" icon-"] {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  vertical-align: text-top;
+  background-image: url("https://raw.github.com/twitter/bootstrap/master/img/glyphicons-halflings.png");
+  background-position: 14px 14px;
+  background-repeat: no-repeat;
+  *margin-right: .3em;
+}
+[class^="icon-"]:last-child, [class*=" icon-"]:last-child {
+  *margin-left: 0;
+}
+
+.icon-ok {
+  background-position: -288px 0;
+}
+.icon-remove {
+  background-position: -312px 0;
+}
diff --git a/example/app.js b/example/app.js
@@ -0,0 +1,43 @@
+var App = Em.Application.create({
+  name: "Tasks",
+
+  Models:      Ember.Object.extend(),
+  Views:       Ember.Object.extend(),
+  Controllers: Ember.Object.extend()
+});
+
+App.Models.Task = Ember.Object.extend({
+  title:     null,
+  completed: false
+});
+
+App.Controllers.tasks = Ember.ArrayController.create({
+  content: [],
+
+  createTask: function(value) {
+    var task = App.Models.Task.create({ title: value });
+    this.pushObject(task);
+  },
+
+  removeTask: function(event) {
+    if ( confirm("Delete this task?") ) {
+      var task = event.context;
+      this.removeObject(task);
+    }
+  },
+
+  remaining: function() {
+    return this.filterProperty('completed', false);
+  }.property('@each.completed').cacheable()
+});
+
+App.Views.CreateTask = Ember.TextField.extend({
+  insertNewline: function(event) {
+    var value = this.get('value');
+
+    if (value) {
+      App.Controllers.tasks.createTask(value);
+      this.set('value', '');
+    }
+  }
+});
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+  <title>Tasks</title>
+  <link rel="stylesheet" href="app.css">
+</head>
+<body>
+  <h1>
+    Tasks
+    <script type="text/x-handlebars">
+      <small>|
+        {{App.Controllers.tasks.remaining.length}} remaining
+      </small>
+    </script>
+  </h1>
+
+  <script type="text/x-handlebars">
+    {{view App.Views.CreateTask id="create_task" placeholder="Add a new task..."}}
+  </script>
+
+  <script type="text/x-handlebars">
+  <ul id="tasks">
+    {{#each App.Controllers.tasks}}
+
+      <li {{bindAttr class=":task completed"}}>
+        {{view Ember.Checkbox checkedBinding="completed"}}
+        <label>{{title}}</label>
+        <a class="remove-task" title="[delete]" {{action removeTask this target="App.Controllers.tasks"}}>
+          <span class="icon-remove">&nbsp;</span>
+        </a>
+      </li>
+
+    {{/each}}
+  </ul>
+  </script>
+
+
+  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+  <script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
+  <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
+
+  <script src="app.js"></script>
+</body>
+</html>