You're viewing the legacy docs. They are deprecated as of May 18, 2016.
These docs are for version 2.4.2 and below of the Javascript SDK. Go to our current docs, or see our Web migration guide.

Backbone.js is a library that gives structure to web applications. This structure comes from components such as models, collections, and templated views. Firebase gives your Backbone app a realtime backend, by utilizing our official library, BackboneFire.

Create an account

The first thing you need to do to get started with BackboneFire is sign up for a free Firebase.com account. A brand new Firebase app will automatically be created for you with its own unique URL ending in firebaseio.com. We'll use this URL to authenticate our users and store and sync data with BackboneFire.

Include Dependencies

In order to use BackboneFire in your project, you need to include the following dependencies in your HTML:

<!-- jQuery + Underscore + Backbone -->
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>

<!-- BackboneFire -->
<script src="https://cdn.firebase.com/libs/backbonefire/0.5.1/backbonefire.min.js"></script>

Create a Firebase Component

To sync our data with our Firebase database, we need to create a special Firebase component. This component can either be a Backbone.Firebase.Collection or a Backbone.Firebase.Model. We'll use a collection in this case. Within the collection we'll include the url property. This property specifies the Firebase app we'll use to sync our data. We'll assign the url property the URL string that points to our remote Firebase database.

// A simple todo model
var Todo = Backbone.Model.extend({
  defaults: { title: "New Todo" }
});

// Create a Firebase.Collection and set the 'firebase' property
// to the URL of our database
var TodoCollection = Backbone.Firebase.Collection.extend({
  model: Todo,
  url: "https://<YOUR-FIREBASE-APP>.firebaseio.com"
});

Our app will also be comprised of two other components. A View for an individual todo, and a View for the entire application.

Listening to changes

The realtime nature of the database enables our todos to re-render when changes occur. To set up the re-rendering we'll use Backbone's listenTo function. This will allow us to observe when the model changes and call the render function again.

// A view for an individual todo item
var TodoView = Backbone.View.extend({
  tagName:  "li",
  template: _.template("<%= title %>"),
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },
});

Now that our todos are able to re-render when changed we can load the data in from our database.

Reading Data

Once a Backbone.Firebase.Collection has been created, the data is synced with our remote database. Inside of the View for our application we can set a property for the collection of todos.

// The view for the entire application
var AppView = Backbone.View.extend({
  el: $('#todoapp'),
  initialize: function() {
    this.list = this.$("#todo-list"); // the list to append to

    // by listening to when the collection changes we
    // can add new items in realtime
    this.listenTo(this.collection, 'add', this.addOne);
  },
  addOne: function(todo) {
    var view = new TodoView({model: todo});
    this.list.append(view.render().el);
  }
});

Using the following HTML, we'll have an application that can update a list of todos in realtime.

<div id="todoapp">
  <ul id="todo-list"></ul>
</div>

Writing Data

A todo list isn't complete until you can create a new task. We'll create a textbox and a button to input new a new todo.

<div id="todoapp">
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New Todo" />
  <button id="add-todo">Add</button>
</div>

We'll add these new elements to our application View. Once we have the elements, we can gather the input and create a new todo. Using the create function on a Firebase.Backbone.Collection a new todo will be created in our database.

// The view for the entire application
var AppView = Backbone.View.extend({
  el: $('#todoapp'),
  events: {
    "click #add-todo" : "createTodo",
  },
  initialize: function() {
    this.list = this.$("#todo-list"); // the list to append to
    this.input = this.$("#new-todo"); // the textbox for new todos

    // by listening to when the collection changes we
    // can add new items in realtime
    this.listenTo(this.collection, 'add', this.addOne);
  },
  addOne: function(todo) {
    var view = new TodoView({model: todo});
    this.list.append(view.render().el);
  },
  createTodo: function(e) {
    if (!this.input.val()) { return; }

    // create a new location in firebase and save the model data
    // this will trigger the listenTo method above and a new todo view
    // will be created as well
    this.collection.create({title: this.input.val()});

    this.input.val('');
  }
});

// Create a function to kick off our BackboneFire app
function init() {
  // The data we are syncing from our remote Firebase database
  var collection = new TodoCollection();
  var app = new AppView({ collection: collection });
}

// When the document is ready, call the init function
$(function() {
  init();
});

With those changes we have created a realtime todo application!

Next Steps

This was just a quick run through of the basics of BackboneFire. For a more in-depth explanation of how to use the library, checkout the GitHub repository.

For an easy way to deploy your Backbone app, check out Firebase Hosting.