Upgrade Backbone app to Backbone 0.9.9

- Update Backbone.localStorage
- Use `listenTo`
- Remove unused underscore file

architecture-examples/backbone/index.html

@@ -55,8 +55,8 @@
 	<script src="../../assets/base.js"></script>
 	<script src="../../assets/jquery.min.js"></script>
 	<script src="../../assets/lodash.min.js"></script>
-	<script src="js/lib/backbone-min.js"></script>
-	<script src="js/lib/backbone-localstorage.js"></script>
+	<script src="js/lib/backbone.js"></script>
+	<script src="js/lib/backbone.localStorage.js"></script>
 	<script src="js/models/todo.js"></script>
 	<script src="js/collections/todos.js"></script>
 	<script src="js/views/todos.js"></script>

architecture-examples/backbone/js/lib/backbone-localstorage.js → architecture-examples/backbone/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);

architecture-examples/backbone/js/views/app.js

@@ -32,11 +32,11 @@ $(function( $ ) {
 			this.$footer = this.$('#footer');
 			this.$main = this.$('#main');
 
-			app.Todos.on( 'add', this.addOne, this );
-			app.Todos.on( 'reset', this.addAll, this );
-			app.Todos.on( 'change:completed', this.filterOne, this );
-			app.Todos.on( 'filter', this.filterAll, this );
-			app.Todos.on( 'all', this.render, this );
+			this.listenTo(app.Todos, 'add', this.addOne);
+			this.listenTo(app.Todos, 'reset', this.addAll);
+			this.listenTo(app.Todos, 'change:completed', this.filterOne);
+			this.listenTo(app.Todos, 'filter', this.filterAll);
+			this.listenTo(app.Todos, 'all', this.render);
 
 			app.Todos.fetch();
 		},

architecture-examples/backbone/js/views/todos.js

@@ -28,9 +28,9 @@ $(function() {
 		// a one-to-one correspondence between a **Todo** and a **TodoView** in this
 		// app, we set a direct reference on the model for convenience.
 		initialize: function() {
-			this.model.on( 'change', this.render, this );
-			this.model.on( 'destroy', this.remove, this );
-			this.model.on( 'visible', this.toggleVisible, this );
+			this.listenTo(this.model, 'change', this.render);
+			this.listenTo(this.model, 'destroy', this.remove);
+			this.listenTo(this.model, 'visible', this.toggleVisible);
 		},
 
 		// Re-render the titles of the todo item.