Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Backbone extension to use Firebase as a backend

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.markdown
Octocat-spinner-32 backbone-firebase.js
README.markdown

Note:

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.

Backbone <-> Firebase 0.0.4

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

Getting started:

  1. Include backbone-firebase.js in your project.
  2. Set BackboneFirebase.DEFAULT_INSTANCE to your Firebase URL
  3. 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);
      }
    });

Advanced Examples

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!

Something went wrong with that request. Please try again.