As of January 29th, 2013 Firebase has released official Backbone.js bindings. You may want to use those instead of this library.
http://blog.firebase.com/post/41803484857/backfire-firebase-bindings-for-backbone-js
https://github.com/firebase/backfire
Thanks to everyone who helped contribute to this library.
This script does two things:
- Overloads Backbone.sync to use Firebase instead of AJAX.
- Adds a BackboneFirebase object which keeps a collection in sync with Firebase
- Include backbone-firebase.js in your project.
- Set BackboneFirebase.DEFAULT_INSTANCE to your Firebase URL
- By default all models/collections will persist to Firebase based on the URL path of the model/collection.
Example:
BackboneFirebase.DEFAULT_INSTANCE = 'https://YOURDB.firebaseio.com';
var Post = Backbone.Model.extend({
idAttribute: '_firebase_name',
url: '/posts'
});
var collection = Backbone.Collection.extend({
model: Post,
url: "/posts",
initialize: function() {
this.backboneFirebase = new BackboneFirebase(this);
}
});
Overriding the model's default path ( model.url + '/' + model.id ) with something fancy:
var WackyPost = Backbone.Model.extend({
idAttribute: '_firebase_name',
url: function() {
return '/posts/'+(Math.random() * 100 + 1); // pick a random record because we like being wacky
}
});
Using multiple Firebase instances:
var collectionOne = Backbone.Collection.extend({
model: Post,
url: "/posts1",
initialize: function() {
this.backboneFirebase = new BackboneFirebase(this, {urlPrefix: 'http://DB_ONE.firebaseio.com'});
}
});
var collectionTwo = Backbone.Collection.extend({
model: Post,
url: "/posts2",
initialize: function() {
this.backboneFirebase = new BackboneFirebase(this, {urlPrefix: 'http://DB_TWO.firebaseio.com'});
}
});
Using the orginal Backbone.sync (AJAX) in tandem with Firebase:
// Declare the sync resource to override BackboneFirebase
var Post = Backbone.Model.extend({
sync: Backbone.sync_AJAX
});
Unbind Firebase callbacks (stop monitoring data and using resources) if a collection is no longer needed:
// inside Backbone.Collection
initialize: function() {
this.backboneFirebase = new new BackboneFirebase(this, {urlPrefix: 'http://DB_ONE.firebaseio.com'});
}
destroy: function() {
this.backboneFirebase.dispose();
}
Questions? Comments? Let me know!