Skip to content

Instantly share code, notes, and snippets.

@anantn anantn/backfire.diff
Created Jan 11, 2013

Embed
What would you like to do?
Changes to needed to make TODOmvc real-time with Firebase <-> Backbone
--- ../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;
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.