Update Thorax Todo app to latest version of Thorax

labs/architecture-examples/thorax/README.md

@@ -4,12 +4,11 @@ This is a modified version of the Backbone TodoMVC app that uses [Thorax](http:/
 
 The Backbone implementation has code to manage the list items which are present on the page. Thorax provides collection bindings with the `collection` helper, which eleminate the need for most of this code:
 
-		{{#collection todosCollection filter="filterTodoItem"
-		  item-view="todo-item" tag="ul" id="todo-list"}}
+		{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
 
-`todosCollection` was specified in js/views/app.js:initialize, all instance variables of the view are automatically made available to the associated template. The `item-view` attribute is optional for collections, but specified here since we want to initialize an `todo-item` view for each item. This class is defined in js/views/todo-item.js and is referenced here by it's `name` attribute which is defined in that file.
+`collection` was specified in `js/app.js`, all instance variables of the view are automatically made available to the associated template. The `item-view` attribute is optional for collections, but specified here since we want to initialize an `todo-item` view for each item. This class is defined in `js/views/todo-item.js` and is referenced here by it's `name` attribute which is defined in that file.
 
-The `filter` attribute specifies a function to be called for each model in the collection and hide or show that item depending on wether the function returns true or false. It is called when the collection is first rendered, then as models are added or a model fires a change event. If a `filter` event is triggered on the collection (which it is in routers/router.js:setFilter) it will force the collection to re-filter each model in the colleciton.
+Because the view containing the collection helper has an `itemFilter` method (in `views/app.js`) the collection will automatically be filtered on initial render, then as models are added, removed or changed. To force the collection to re-filter a `filter` event is triggered on the collection in `routers/router.js`.
 
 In this implementation the `stats` view has it's own view class and is re-rendered instead of the `app` view being re-rendered. Thorax provides the ability to embed views by name or reference with the `view` helper:
 

labs/architecture-examples/thorax/index.html

@@ -16,13 +16,13 @@
 	  		<h1>todos</h1>
 	  		<input id="new-todo" placeholder="What needs to be done?" autofocus>
 	  	</header>
-	  	{{^empty todosCollection}}
+	  	{{^empty collection}}
 	  	  <section id="main">
 	  	  	<input id="toggle-all" type="checkbox">
 	  	  	<label for="toggle-all">Mark all as complete</label>
-	  	  	{{#collection todosCollection filter="filterTodoItem" item-view="todo-item" tag="ul" id="todo-list"}}
+	  	  	{{#collection item-view="todo-item" tag="ul" id="todo-list"}}
 			  		<div class="view">
-			  			<input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}>
+			  			<input class="toggle" type="checkbox" {{#if completed}}checked="checked"{{/if}}>
 			  			<label>{{title}}</label>
 			  			<button class="destroy"></button>
 			  		</div>
@@ -30,11 +30,11 @@
 	  	  	{{/collection}}
 	  	  </section>
 	  	  {{view "stats" tag="footer" id="footer"}}
-	  	 {{/empty}}
+	  	{{/empty}}
 	  </section>
 	  <div id="info">
 	  	<p>Double-click to edit a todo</p>
-	  	<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/beastridge">Ryan Eastridge</a></p>
+	  	<p>Written by <a href="https://github.com/addyosmani">Addy Osmani</a> &amp; <a href="https://github.com/eastridge">Ryan Eastridge</a></p>
 	  	<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	  </div>
 	</script>
@@ -55,13 +55,8 @@
 			<button id="clear-completed">Clear completed ({{completed}})</button>
 		{{/if}}
 	</script>
-	<script src="../../../assets/base.js"></script>
-	<script src="../../../assets/jquery.min.js"></script>
-	<script src="../../../assets/lodash.min.js"></script>
-	<script src="../../../assets/handlebars.min.js"></script>
-	<script src="js/lib/backbone.js"></script>
-	<script src="js/lib/backbone-localstorage.js"></script>
 	<script src="js/lib/thorax.js"></script>
+	<script src="js/lib/backbone-localstorage.js"></script>
 	<script>
 		// Grab the text from the templates we created above
 		Thorax.templates = {

labs/architecture-examples/thorax/js/app.js

@@ -2,7 +2,9 @@ var ENTER_KEY = 13;
 
 $(function() {
 	// Kick things off by creating the **App**.
-	var view = new Thorax.Views['app']();
-  $('body').append(view.el);
+	var view = new Thorax.Views['app']({
+    collection: window.app.Todos
+  });
+  view.appendTo('body');
   Backbone.history.start();
 });

labs/architecture-examples/thorax/js/collections/todos.js

@@ -6,7 +6,7 @@
 
 	// The collection of todos is backed by *localStorage* instead of a remote
 	// server.
-	var TodoList = Backbone.Collection.extend({
+	var TodoList = Thorax.Collection.extend({
 
 		// Reference to this collection's model.
 		model: window.app.Todo,
@@ -44,4 +44,7 @@
 	// Create our global collection of **Todos**.
 	window.app.Todos = new TodoList();
 
+  // Ensure that we always have data available
+  window.app.Todos.fetch();
+
 }());

labs/architecture-examples/thorax/js/lib/backbone-localstorage.js

+/**
+ * Backbone localStorage Adapter
+ * https://github.com/jeromegn/Backbone.localStorage
+ */
+
+(function(_, Backbone) {
 // A simple module to replace `Backbone.sync` with *localStorage*-based
 // persistence. Models are given GUIDS, and saved into a JSON object. Simple
 // as that.
 
+// Hold reference to Underscore.js and Backbone.js in the closure in order
+// to make things work even if they are removed from the global namespace
+
 // Generate four random hex digits.
 function S4() {
    return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
@@ -14,71 +23,108 @@ function guid() {
 
 // 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) {
+// window.Store is deprectated, use Backbone.LocalStorage instead
+Backbone.LocalStorage = window.Store = function(name) {
   this.name = name;
-  var store = localStorage.getItem(this.name);
-  this.data = (store && JSON.parse(store)) || {};
+  var store = this.localStorage().getItem(this.name);
+  this.records = (store && store.split(",")) || [];
 };
 
-_.extend(Store.prototype, {
+_.extend(Backbone.LocalStorage.prototype, {
 
   // Save the current state of the **Store** to *localStorage*.
   save: function() {
-    localStorage.setItem(this.name, JSON.stringify(this.data));
+    this.localStorage().setItem(this.name, this.records.join(","));
   },
 
   // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
   // have an id of it's own.
   create: function(model) {
-    if (!model.id) model.id = model.attributes.id = guid();
-    this.data[model.id] = model;
+    if (!model.id) {
+        model.id = guid();
+        model.set(model.idAttribute, model.id);
+    }
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    this.records.push(model.id.toString());
     this.save();
-    return model;
+    return model.toJSON();
   },
 
   // Update a model by replacing its copy in `this.data`.
   update: function(model) {
-    this.data[model.id] = model;
-    this.save();
-    return model;
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    if (!_.include(this.records, model.id.toString())) this.records.push(model.id.toString()); this.save();
+    return model.toJSON();
   },
 
   // Retrieve a model from `this.data` by id.
   find: function(model) {
-    return this.data[model.id];
+    return JSON.parse(this.localStorage().getItem(this.name+"-"+model.id));
   },
 
   // Return the array of all models currently in storage.
   findAll: function() {
-    return _.values(this.data);
+    return _(this.records).chain()
+        .map(function(id){return JSON.parse(this.localStorage().getItem(this.name+"-"+id));}, this)
+        .compact()
+        .value();
   },
 
   // Delete a model from `this.data`, returning it.
   destroy: function(model) {
-    delete this.data[model.id];
+    this.localStorage().removeItem(this.name+"-"+model.id);
+    this.records = _.reject(this.records, function(record_id){return record_id == model.id.toString();});
     this.save();
     return model;
+  },
+
+  localStorage: function() {
+      return localStorage;
   }
 
 });
 
-// Override `Backbone.sync` to use delegate to the model or collection's
+// localSync delegate to the model or collection's
 // *localStorage* property, which should be an instance of `Store`.
-Backbone.sync = function(method, model, options) {
-
-  var resp;
+// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
+Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options) {
   var store = model.localStorage || model.collection.localStorage;
 
+  var resp, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it. 
+
   switch (method) {
-    case "read":    resp = model.id ? store.find(model) : store.findAll(); break;
+    case "read":    resp = model.id != undefined ? store.find(model) : store.findAll(); break;
     case "create":  resp = store.create(model);                            break;
     case "update":  resp = store.update(model);                            break;
     case "delete":  resp = store.destroy(model);                           break;
   }
 
   if (resp) {
-    options.success(resp);
+    if (options && options.success) options.success(resp);
+    if (syncDfd) syncDfd.resolve();
   } else {
-    options.error("Record not found");
+    if (options && options.error) options.error("Record not found");
+    if (syncDfd) syncDfd.reject();
   }
+
+  return syncDfd && syncDfd.promise();
+};
+
+Backbone.ajaxSync = Backbone.sync;
+
+Backbone.getSyncMethod = function(model) {
+  if(model.localStorage || (model.collection && model.collection.localStorage))
+  {
+    return Backbone.localSync;
+  }
+
+  return Backbone.ajaxSync;
 };
+
+// Override 'Backbone.sync' to default to localSync,
+// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
+Backbone.sync = function(method, model, options) {
+  return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
+};
+
+})(_, Backbone);
\ No newline at end of file

labs/architecture-examples/thorax/js/models/todo.js

@@ -5,7 +5,7 @@
 	// ----------
 
 	// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
-	window.app.Todo = Backbone.Model.extend({
+	window.app.Todo = Thorax.Model.extend({
 
 		// Default attributes for the todo
 		// and ensure that each todo created has `title` and `completed` keys.

labs/architecture-examples/thorax/js/routers/router.js

@@ -4,7 +4,7 @@
 	// Todo Router
 	// ----------
 
-	window.app.TodoRouter = new (Thorax.Router.extend({
+	window.app.TodoRouter = new (Backbone.Router.extend({
 		routes: {
 			'': 'setFilter',
 			':filter': 'setFilter'

labs/architecture-examples/thorax/js/views/app.js

@@ -4,43 +4,32 @@ $(function( $ ) {
 	// The Application
 	// ---------------
 
-	// Our overall **AppView** is the top-level piece of UI.
+	// This view is the top-level piece of UI.
 	Thorax.View.extend({
-		// This will assign the template Thorax.templates['app'] to the view and
-		// create a view class at Thorax.Views['app']
+		// Setting a name will assign the template Thorax.templates['app']
+		// to the view and create a view class at Thorax.Views['app']
 		name: 'app',
 
 		// Delegated events for creating new items, and clearing completed ones.
 		events: {
 			'keypress #new-todo': 'createOnEnter',
 			'click #toggle-all': 'toggleAllComplete',
-			// The collection helper in the template will bind the collection
-			// to the view. Any events in this hash will be bound to the
-			// collection.
+			// Any events specified in the collection hash will be bound to the
+			// collection with `listenTo`. The collection was set in js/app.js
 			collection: {
-				all: 'toggleToggleAllButton'
+				'change:completed': 'toggleToggleAllButton',
+				filter: 'toggleToggleAllButton'
 			},
 			rendered: 'toggleToggleAllButton'
 		},
 
-		// Unless the "context" method is overriden any attributes on the view
-		// will be availble to the context / scope of the template, make the
-		// global Todos collection available to the template.
-		// Load any preexisting todos that might be saved in *localStorage*.
-		initialize: function() {
-			this.todosCollection = window.app.Todos;
-			this.todosCollection.fetch();
-			this.render();
-		},
-
 		toggleToggleAllButton: function() {
-			this.$('#toggle-all').attr('checked', !this.todosCollection.remaining().length);
+			this.$('#toggle-all')[0].checked = !this.collection.remaining().length;
 		},
 
-		// This function is specified in the collection helper as the filter
-		// and will be called each time a model changes, or for each item
-		// when the collection is rendered
-		filterTodoItem: function(model) {
+		// When this function is specified, items will only be shown
+		// when this function returns true
+		itemFilter: function(model) {
 			return model.isVisible();
 		},
 
@@ -48,7 +37,7 @@ $(function( $ ) {
 		newAttributes: function() {
 			return {
 				title: this.$('#new-todo').val().trim(),
-				order: window.app.Todos.nextOrder(),
+				order: this.collection.nextOrder(),
 				completed: false
 			};
 		},
@@ -60,16 +49,15 @@ $(function( $ ) {
 				return;
 			}
 
-			window.app.Todos.create( this.newAttributes() );
+			this.collection.create( this.newAttributes() );
 			this.$('#new-todo').val('');
 		},
 
 		toggleAllComplete: function() {
 			var completed = this.$('#toggle-all')[0].checked;
-
-			window.app.Todos.each(function( todo ) {
+			this.collection.each(function( todo ) {
 				todo.save({
-					'completed': completed
+					completed: completed
 				});
 			});
 		}

labs/architecture-examples/thorax/js/views/stats.js

@@ -13,9 +13,9 @@ Thorax.View.extend({
     // Whenever the Todos collection changes re-render the stats
     // render() needs to be called with no arguments, otherwise calling
     // it with arguments will insert the arguments as content
-    window.app.Todos.on('all', _.debounce(function() {
+    this.listenTo(window.app.Todos, 'all', _.debounce(function() {
       this.render();
-    }), this);
+    }));
   },
 
   // Clear all completed todo items, destroying their models.