Changes to needed to make TODOmvc real-time with Firebase <-> Backbone

backfire.diff

--- ../backbone/examples/todos/todos.js  2013-01-08 17:02:02.000000000 -0800
+++ todos.js	2013-01-10 17:33:56.000000000 -0800
@@ -1,7 +1,6 @@
 // An example Backbone application contributed by
 // [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a simple
-// [LocalStorage adapter](backbone-localstorage.html)
-// to persist Backbone models within your browser.
+// Firebase adapter to persist Backbone models.
 
 // Load the application once the DOM is ready, using `jQuery.ready`:
 $(function(){
@@ -16,7 +15,6 @@
     defaults: function() {
       return {
         title: "empty todo...",
-        order: Todos.nextOrder(),
         done: false
       };
     },
@@ -30,7 +28,7 @@
 
     // Toggle the `done` state of this todo item.
     toggle: function() {
-      this.save({done: !this.get("done")});
+      this.set({done: !this.get("done")});
     }
 
   });
@@ -38,15 +36,14 @@
   // Todo Collection
   // ---------------
 
-  // The collection of todos is backed by *localStorage* instead of a remote
-  // server.
-  var TodoList = Backbone.Collection.extend({
+  // The collection of todos is backed by *Firebase*.
+  var TodoList = Backbone.Firebase.Collection.extend({
 
     // Reference to this collection's model.
     model: Todo,
 
-    // Save all of the todo items under the `"todos-backbone"` namespace.
-    localStorage: new Backbone.LocalStorage("todos-backbone"),
+    // Save all of the todo items in a Firebase.
+    firebase: "https://backbone.firebaseio.com",
 
     // Filter down the list of all todo items that are finished.
     done: function() {
@@ -56,20 +53,7 @@
     // Filter down the list to only todo items that are still not finished.
     remaining: function() {
       return this.without.apply(this, this.done());
-    },
-
-    // We keep the Todos in sequential order, despite being saved by unordered
-    // GUID in the database. This generates the next order number for new items.
-    nextOrder: function() {
-      if (!this.length) return 1;
-      return this.last().get('order') + 1;
-    },
-
-    // Todos are sorted by their original insertion order.
-    comparator: function(todo) {
-      return todo.get('order');
     }
-
   });
 
   // Create our global collection of **Todos**.
@@ -101,7 +85,7 @@
     // app, we set a direct reference on the model for convenience.
     initialize: function() {
       this.listenTo(this.model, 'change', this.render);
-      this.listenTo(this.model, 'destroy', this.remove);
+      this.listenTo(this.model, 'remove', this.remove);
     },
 
     // Re-render the titles of the todo item.
@@ -139,9 +123,9 @@
       if (e.keyCode == 13) this.close();
     },
 
-    // Remove the item, destroy the model.
+    // Remove the item from the collection.
     clear: function() {
-      this.model.destroy();
+      Todos.remove(this.model);
     }
 
   });
@@ -168,20 +152,16 @@
 
     // At initialization we bind to the relevant events on the `Todos`
     // collection, when items are added or changed. Kick things off by
-    // loading any preexisting todos that might be saved in *localStorage*.
+    // loading any preexisting todos that might be saved in *Firebase*.
     initialize: function() {
-
       this.input = this.$("#new-todo");
       this.allCheckbox = this.$("#toggle-all")[0];
 
-      this.listenTo(Todos, 'add', this.addOne);
-      this.listenTo(Todos, 'reset', this.addAll);
+      this.listenTo(Todos, 'add', this.add);
       this.listenTo(Todos, 'all', this.render);
 
       this.footer = this.$('footer');
       this.main = $('#main');
-
-      Todos.fetch();
     },
 
     // Re-rendering the App just means refreshing the statistics -- the rest
@@ -204,29 +184,26 @@
 
     // Add a single todo item to the list by creating a view for it, and
     // appending its element to the `<ul>`.
-    addOne: function(todo) {
+    add: function(todo) {
       var view = new TodoView({model: todo});
       this.$("#todo-list").append(view.render().el);
     },
 
-    // Add all items in the **Todos** collection at once.
-    addAll: function() {
-      Todos.each(this.addOne);
-    },
-
     // If you hit return in the main input field, create new **Todo** model,
-    // persisting it to *localStorage*.
+    // persisting it to *Firebase*.
     createOnEnter: function(e) {
       if (e.keyCode != 13) return;
       if (!this.input.val()) return;
 
-      Todos.create({title: this.input.val()});
+      Todos.add({title: this.input.val()});
       this.input.val('');
     },
 
-    // Clear all done todo items, destroying their models.
+    // Clear all done todo items.
     clearCompleted: function() {
-      _.invoke(Todos.done(), 'destroy');
+      _.each(Todos.done(), function(model) {
+        Todos.remove(model);
+      });
       return false;
     },