Close GH-165: Updated Knockback to 0.15.1 and Knockout to 2.1.0.

architecture-examples/knockback/index.html

@@ -30,10 +30,7 @@
 			</ul>
 		</section>
 		<footer id="footer" data-bind="block: todos.tasks_exist">
-			<span id="todo-count">
-				<strong data-bind="text: footer.remaining_count"></strong>
-				<span data-bind="text: footer.remaining_text"></span>
-			</span>
+			<span id="todo-count" data-bind="html: footer.remaining_text"></span>
 			<ul id="filters">
 				<li>
 					<a href="#/" data-bind="css: {selected: settings.list_filter_mode()==''}">All</a>
@@ -63,7 +60,7 @@
 	<!-- Knockback Dependencies -->
 	<script src="js/lib/underscore-min.js"></script>
 	<script src="js/lib/backbone-min.js"></script>
-	<script src="js/lib/knockout-2.0.0.js"></script>
+	<script src="js/lib/knockout-2.1.0.js"></script>
 	<script src="js/lib/knockback.min.js"></script>
 	<!-- More Demo Dependencies -->
 	<script src="js/lib/backbone.localStorage-min.js"></script>
@@ -76,7 +73,6 @@
 	<script src="js/viewmodels/footer.js"></script>
 	<script src="js/routers/app.js"></script>
 	<!-- The Demo -->
-	<script src="../../assets/base.js"></script>
 	<script src="js/app.js"></script>
 </body>
 </html>
\ No newline at end of file

architecture-examples/knockback/js/app.js

+// Generated by CoffeeScript 1.3.1
 (function() {
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
   $(function() {
     var todos;
     ko.bindingHandlers.dblclick = {
@@ -20,17 +21,18 @@
         });
       },
       update: function(element, value_accessor) {
+        var _this = this;
         ko.utils.unwrapObservable(value_accessor());
-        return _.defer(__bind(function() {
+        return _.defer(function() {
           return ko.bindingHandlers.hasfocus.update(element, value_accessor);
-        }, this));
+        });
       }
     };
     window.app = {
       viewmodels: {}
     };
     app.viewmodels.settings = new SettingsViewModel();
-    todos = new TodosCollection();
+    todos = new TodoCollection();
     app.viewmodels.header = new HeaderViewModel(todos);
     app.viewmodels.todos = new TodosViewModel(todos);
     app.viewmodels.footer = new FooterViewModel(todos);
@@ -39,4 +41,5 @@
     Backbone.history.start();
     return todos.fetch();
   });
+
 }).call(this);

architecture-examples/knockback/js/models/todo.js

+// Generated by CoffeeScript 1.3.1
 (function() {
-  var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
-    for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
-    function ctor() { this.constructor = child; }
-    ctor.prototype = parent.prototype;
-    child.prototype = new ctor;
-    child.__super__ = parent.prototype;
-    return child;
-  };
-  window.Todo = (function() {
-    __extends(Todo, Backbone.Model);
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+  window.Todo = (function(_super) {
+
+    __extends(Todo, _super);
+
+    Todo.name = 'Todo';
+
     function Todo() {
-      Todo.__super__.constructor.apply(this, arguments);
+      return Todo.__super__.constructor.apply(this, arguments);
     }
+
     Todo.prototype.completed = function(completed) {
       if (arguments.length === 0) {
         return !!this.get('completed');
@@ -20,6 +21,9 @@
         completed: completed ? new Date() : null
       });
     };
+
     return Todo;
-  })();
+
+  })(Backbone.Model);
+
 }).call(this);

architecture-examples/knockback/js/models/todo_collection.js

+// Generated by CoffeeScript 1.3.1
 (function() {
-  var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
-    for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
-    function ctor() { this.constructor = child; }
-    ctor.prototype = parent.prototype;
-    child.prototype = new ctor;
-    child.__super__ = parent.prototype;
-    return child;
-  };
-  window.TodosCollection = (function() {
-    __extends(TodosCollection, Backbone.Collection);
-    function TodosCollection() {
-      TodosCollection.__super__.constructor.apply(this, arguments);
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+  window.TodoCollection = (function(_super) {
+
+    __extends(TodoCollection, _super);
+
+    TodoCollection.name = 'TodoCollection';
+
+    function TodoCollection() {
+      return TodoCollection.__super__.constructor.apply(this, arguments);
     }
-    TodosCollection.prototype.localStorage = new Store('todos-knockback');
-    TodosCollection.prototype.model = Todo;
-    TodosCollection.prototype.completedCount = function() {
+
+    TodoCollection.prototype.localStorage = new Store('todos-knockback');
+
+    TodoCollection.prototype.model = Todo;
+
+    TodoCollection.prototype.completedCount = function() {
       return this.models.reduce((function(prev, cur) {
         return prev + (cur.completed() ? 1 : 0);
       }), 0);
     };
-    TodosCollection.prototype.remainingCount = function() {
+
+    TodoCollection.prototype.remainingCount = function() {
       return this.models.length - this.completedCount();
     };
-    TodosCollection.prototype.completeAll = function(completed) {
+
+    TodoCollection.prototype.completeAll = function(completed) {
       return this.each(function(todo) {
         return todo.completed(completed);
       });
     };
-    TodosCollection.prototype.destroyCompleted = function() {
+
+    TodoCollection.prototype.destroyCompleted = function() {
       var completed_tasks, model, _i, _len, _results;
       completed_tasks = this.filter(function(todo) {
         return todo.completed();
@@ -39,6 +45,9 @@
       }
       return _results;
     };
-    return TodosCollection;
-  })();
+
+    return TodoCollection;
+
+  })(Backbone.Collection);
+
 }).call(this);

architecture-examples/knockback/js/routers/app.js

+// Generated by CoffeeScript 1.3.1
 (function() {
-  var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
-    for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
-    function ctor() { this.constructor = child; }
-    ctor.prototype = parent.prototype;
-    child.prototype = new ctor;
-    child.__super__ = parent.prototype;
-    return child;
-  };
-  window.AppRouter = (function() {
-    __extends(AppRouter, Backbone.Router);
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+  window.AppRouter = (function(_super) {
+
+    __extends(AppRouter, _super);
+
+    AppRouter.name = 'AppRouter';
+
     function AppRouter() {
-      AppRouter.__super__.constructor.apply(this, arguments);
+      return AppRouter.__super__.constructor.apply(this, arguments);
     }
+
     AppRouter.prototype.routes = {
       "": "all",
       "active": "active",
       "completed": "completed"
     };
+
     AppRouter.prototype.all = function() {
       return app.viewmodels.settings.list_filter_mode('');
     };
+
     AppRouter.prototype.active = function() {
       return app.viewmodels.settings.list_filter_mode('active');
     };
+
     AppRouter.prototype.completed = function() {
       return app.viewmodels.settings.list_filter_mode('completed');
     };
+
     return AppRouter;
-  })();
+
+  })(Backbone.Router);
+
 }).call(this);

architecture-examples/knockback/js/viewmodels/footer.js

+// Generated by CoffeeScript 1.3.1
 (function() {
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
   window.FooterViewModel = function(todos) {
-    this.collection_observable = kb.collectionObservable(todos);
-    this.remaining_count = ko.computed(__bind(function() {
-      return this.collection_observable.collection().remainingCount();
-    }, this));
-    this.remaining_text = ko.computed(__bind(function() {
-      return "" + (this.collection_observable.collection().remainingCount() === 1 ? 'item' : 'items') + " left";
-    }, this));
-    this.clear_text = ko.computed(__bind(function() {
+    var _this = this;
+    this.todos = kb.collectionObservable(todos);
+    this.todos.collection().bind('change', function() {
+      return _this.todos.valueHasMutated();
+    });
+    this.remaining_text = ko.computed(function() {
+      return "<strong>" + (_this.todos.collection().remainingCount()) + "</strong> " + (_this.todos.collection().remainingCount() === 1 ? 'item' : 'items') + " left";
+    });
+    this.clear_text = ko.computed(function() {
       var count;
-      count = this.collection_observable.collection().completedCount();
+      count = _this.todos.collection().completedCount();
       if (count) {
         return "Clear completed (" + count + ")";
       } else {
         return '';
       }
-    }, this));
-    this.onDestroyCompleted = __bind(function() {
+    });
+    this.onDestroyCompleted = function() {
       return todos.destroyCompleted();
-    }, this);
+    };
     return this;
   };
+
 }).call(this);

architecture-examples/knockback/js/viewmodels/header.js

+// Generated by CoffeeScript 1.3.1
 (function() {
   var ENTER_KEY;
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
   ENTER_KEY = 13;
+
   window.HeaderViewModel = function(todos) {
+    var _this = this;
     this.title = ko.observable('');
-    this.onAddTodo = __bind(function(view_model, event) {
-      if (!$.trim(this.title()) || (event.keyCode !== ENTER_KEY)) {
+    this.onAddTodo = function(view_model, event) {
+      if (!$.trim(_this.title()) || (event.keyCode !== ENTER_KEY)) {
         return true;
       }
       todos.create({
-        title: $.trim(this.title())
+        title: $.trim(_this.title())
       });
-      return this.title('');
-    }, this);
+      return _this.title('');
+    };
     return this;
   };
+
 }).call(this);

architecture-examples/knockback/js/viewmodels/settings.js

+// Generated by CoffeeScript 1.3.1
 (function() {
+
   window.SettingsViewModel = function() {
     this.list_filter_mode = ko.observable('');
     return this;
   };
+
 }).call(this);

architecture-examples/knockback/js/viewmodels/todos.js

+// Generated by CoffeeScript 1.3.1
 (function() {
   var TodoViewModel;
-  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
   TodoViewModel = function(model) {
+    var _this = this;
     this.editing = ko.observable(false);
     this.completed = kb.observable(model, {
       key: 'completed',
+      read: (function() {
+        return model.completed();
+      }),
       write: (function(completed) {
-        return model.save({
-          completed: completed
-        });
+        return model.completed(completed);
       })
     }, this);
-    this.visible = ko.computed(__bind(function() {
+    this.visible = ko.computed(function() {
       switch (app.viewmodels.settings.list_filter_mode()) {
         case 'active':
-          return !this.completed();
+          return !_this.completed();
         case 'completed':
-          return this.completed();
+          return _this.completed();
         default:
           return true;
       }
-    }, this));
+    });
     this.title = kb.observable(model, {
       key: 'title',
-      write: (__bind(function(title) {
+      write: (function(title) {
         if ($.trim(title)) {
           model.save({
             title: $.trim(title)
@@ -33,42 +36,47 @@
             return model.destroy();
           });
         }
-        return this.editing(false);
-      }, this))
+        return _this.editing(false);
+      })
     }, this);
-    this.onDestroyTodo = __bind(function() {
+    this.onDestroyTodo = function() {
       return model.destroy();
-    }, this);
-    this.onCheckEditBegin = __bind(function() {
-      if (!this.editing() && !this.completed()) {
-        this.editing(true);
+    };
+    this.onCheckEditBegin = function() {
+      if (!_this.editing() && !_this.completed()) {
+        _this.editing(true);
         return $('.todo-input').focus();
       }
-    }, this);
-    this.onCheckEditEnd = __bind(function(view_model, event) {
+    };
+    this.onCheckEditEnd = function(view_model, event) {
       if ((event.keyCode === 13) || (event.type === 'blur')) {
         $('.todo-input').blur();
-        return this.editing(false);
+        return _this.editing(false);
       }
-    }, this);
+    };
     return this;
   };
+
   window.TodosViewModel = function(todos) {
-    this.todos = ko.observableArray([]);
-    this.collection_observable = kb.collectionObservable(todos, this.todos, {
+    var _this = this;
+    this.todos = kb.collectionObservable(todos, {
       view_model: TodoViewModel
     });
-    this.tasks_exist = ko.computed(__bind(function() {
-      return this.collection_observable().length;
-    }, this));
+    this.todos.collection().bind('change', function() {
+      return _this.todos.valueHasMutated();
+    });
+    this.tasks_exist = ko.computed(function() {
+      return _this.todos().length;
+    });
     this.all_completed = ko.computed({
-      read: __bind(function() {
-        return !this.collection_observable.collection().remainingCount();
-      }, this),
-      write: __bind(function(completed) {
-        return this.collection_observable.collection().completeAll(completed);
-      }, this)
+      read: function() {
+        return !_this.todos.collection().remainingCount();
+      },
+      write: function(completed) {
+        return _this.todos.collection().completeAll(completed);
+      }
     });
     return this;
   };
+
 }).call(this);

architecture-examples/knockback/src/app.coffee

@@ -15,7 +15,7 @@ $ ->
 	# Create and bind the app viewmodels
 	window.app = {viewmodels: {}}
 	app.viewmodels.settings = new SettingsViewModel()
-	todos = new TodosCollection()
+	todos = new TodoCollection()
 	app.viewmodels.header = new HeaderViewModel(todos)
 	app.viewmodels.todos = new TodosViewModel(todos)
 	app.viewmodels.footer = new FooterViewModel(todos)

architecture-examples/knockback/src/models/todo_collection.coffee

-class window.TodosCollection extends Backbone.Collection
+class window.TodoCollection extends Backbone.Collection
 	localStorage: new Store('todos-knockback') # Save all of the todos under the `"todos-knockback"` namespace.
 	model: Todo
 

architecture-examples/knockback/src/viewmodels/footer.coffee

 window.FooterViewModel = (todos) ->
-	@collection_observable = kb.collectionObservable(todos)
+	@todos = kb.collectionObservable(todos)
+	@todos.collection().bind('change', => @todos.valueHasMutated())   # get notified of changes to any models
 
-	@remaining_count = ko.computed(=> return @collection_observable.collection().remainingCount())
-	@remaining_text = ko.computed(=> return "#{if @collection_observable.collection().remainingCount() == 1 then 'item' else 'items'} left")
+	@remaining_text = ko.computed(=> return "<strong>#{@todos.collection().remainingCount()}</strong> #{if @todos.collection().remainingCount() == 1 then 'item' else 'items'} left")
 
 	@clear_text = ko.computed(=>
-		count = @collection_observable.collection().completedCount()
+		count = @todos.collection().completedCount()
 		return if count then "Clear completed (#{count})" else ''
 	)
 

architecture-examples/knockback/src/viewmodels/todos.coffee

 TodoViewModel = (model) ->
 	# Task UI state
 	@editing = ko.observable(false)
-	@completed = kb.observable(model, {key: 'completed', write: ((completed) -> model.save(completed: completed)) }, @)
+	@completed = kb.observable(model, {key: 'completed', read: (-> return model.completed()), write: ((completed) -> model.completed(completed)) }, @)
 	@visible = ko.computed(=>
 		switch app.viewmodels.settings.list_filter_mode()
 			when 'active' then return not @completed()
@@ -24,13 +24,13 @@ TodoViewModel = (model) ->
 	@
 
 window.TodosViewModel = (todos) ->
-	@todos = ko.observableArray([])
-	@collection_observable = kb.collectionObservable(todos, @todos, view_model: TodoViewModel)
+	@todos = kb.collectionObservable(todos, {view_model: TodoViewModel})
+	@todos.collection().bind('change', => @todos.valueHasMutated())   # get notified of changes to any models
 
-	@tasks_exist = ko.computed(=> @collection_observable().length)
+	@tasks_exist = ko.computed(=> @todos().length)
 
 	@all_completed = ko.computed(
-		read: => return not @collection_observable.collection().remainingCount()
-		write: (completed) => @collection_observable.collection().completeAll(completed)
+		read: => return not @todos.collection().remainingCount()
+		write: (completed) => @todos.collection().completeAll(completed)
 	)
 	@
\ No newline at end of file