Merge pull request #44 from boushley/emberjs

Did some fixes to the ember.js app.

todo-example/emberjs/css/todos.css

@@ -171,10 +171,6 @@ body {
 	padding: 20px 0 30px 0;
 	line-height: 1;
 }
-
-#stats-area{
-	display:none;
-}
 #create-todo {
 	position: relative;
 }

todo-example/emberjs/index.html

@@ -32,7 +32,7 @@
   
   <div class="content">
   
-  <script type="text/html">
+  <script type="text/x-handlebars">
 
 {{#view id="create-todo"}}
   {{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
@@ -52,10 +52,8 @@
   
     <!-- Insert this after the CreateTodoView and before the collection. -->
   {{#view Todos.StatsView id="todo-stats"}}
-    {{#view Ember.Button classBinding="isActive"
-      target="Todos.todosController"
-      action="clearCompletedTodos"}}
-      Clear Completed 
+    {{#view Ember.Button target="Todos.todosController" action="clearCompletedTodos" content=this}}
+      Clear {{content.completedString}} 
     {{/view}}
     {{remainingString}} left
   {{/view}}

todo-example/emberjs/js/app.js

 Todos = Ember.Application.create();
 
 Todos.Todo = Ember.Object.extend({
+  id: null,
   title: null,
-  isDone: false
+  isDone: false,
+  todoChanged: function () {
+    Todos.TodoStore.update(this);
+  }.observes('title', 'isDone')
 });
 
 Todos.todosController = Ember.ArrayProxy.create({
@@ -12,9 +16,20 @@ Todos.todosController = Ember.ArrayProxy.create({
     var todo = Todos.Todo.create({ title: title }),
     stats = document.getElementById('stats-area');
     this.pushObject(todo);
+    Todos.TodoStore.create(todo);
 
     (stats.style.display=='block')? stats.style.display = 'inline' : stats.style.display = 'block';
+  },
+
+  pushObject: function (item, ignoreStorage) {
+    if (!ignoreStorage)
+      Todos.TodoStore.create(item);
+    return this._super(item);
+  },
 
+  removeObject: function (item) {
+    Todos.TodoStore.remove(item);
+    return this._super(item);
   },
 
   clearCompletedTodos: function() {
@@ -25,6 +40,10 @@ Todos.todosController = Ember.ArrayProxy.create({
     return this.filterProperty('isDone', false).get('length');
   }.property('@each.isDone'),
 
+  completed: function() {
+    return this.filterProperty('isDone', true).get('length');
+  }.property('@each.isDone'),
+
   allAreDone: function(key, value) {
     if (value !== undefined) {
       this.setEach('isDone', value);
@@ -38,11 +57,16 @@ Todos.todosController = Ember.ArrayProxy.create({
 
 Todos.StatsView = Ember.View.extend({
   remainingBinding: 'Todos.todosController.remaining',
-
   remainingString: function() {
     var remaining = this.get('remaining');
     return remaining + (remaining === 1 ? " item" : " items");
-  }.property('remaining')
+  }.property('remaining'),
+
+  completedBinding: 'Todos.todosController.completed',
+  completedString: function() {
+    var completed = this.get('completed');
+    return completed + " completed" + (completed === 1 ? " item" : " items");
+  }.property('completed')
 });
 
 Todos.CreateTodoView = Ember.TextField.extend({
@@ -56,3 +80,82 @@ Todos.CreateTodoView = Ember.TextField.extend({
   }
 });
 
+Todos.TodoStore = (function () {
+  // Generate four random hex digits.
+  var S4 = function () {
+     return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+  };
+
+  // Generate a pseudo-GUID by concatenating random hexadecimal.
+  var guid = function () {
+     return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+  };
+
+  // Our Store is represented by a single JS object in *localStorage*. Create it
+  // with a meaningful name, like the name you'd give a table.
+  var Store = function(name) {
+    this.name = name;
+    var store = localStorage.getItem(this.name);
+    this.data = (store && JSON.parse(store)) || {};
+
+    // Save the current state of the **Store** to *localStorage*.
+    this.save = function() {
+      localStorage.setItem(this.name, JSON.stringify(this.data));
+    };
+
+    // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
+    // have an id of it's own.
+    this.create = function (model) {
+      if (!model.get('id')) model.set('id', guid());
+      return this.update(model);
+    };
+
+    // Update a model by replacing its copy in `this.data`.
+    this.update = function(model) {
+      this.data[model.get('id')] = model.getProperties('id', 'title', 'isDone');
+      this.save();
+      return model;
+    };
+
+    // Retrieve a model from `this.data` by id.
+    this.find = function(model) {
+      return Todos.Todo.create(this.data[model.get('id')]);
+    };
+
+    // Return the array of all models currently in storage.
+    this.findAll = function() {
+      var result = [];
+      for (var key in this.data)
+      {
+        var todo = Todos.Todo.create(this.data[key]);
+        result.push(todo);
+      }
+
+      return result;
+    };
+
+    // Delete a model from `this.data`, returning it.
+    this.remove = function(model) {
+      delete this.data[model.get('id')];
+      this.save();
+      return model;
+    };
+  };
+
+  return new Store('todos-emberjs');
+})();
+
+(function () {
+  var items = Todos.TodoStore.findAll();
+
+  if (items.length < 1)
+  {
+    var todo = Todos.Todo.create({'title': 'First Task'});
+    Todos.TodoStore.create(todo);
+    items = [todo];
+  }
+
+  Todos.todosController.arrayContentWillChange(0, 0, items.length);
+  Todos.todosController.set('[]', items);
+  Todos.todosController.arrayContentDidChange(0, 0, items.length);
+})();