EmberFire is an experimental, officially supported EmberJS binding for Firebase. EmberFire lets you bind Firebase data as models in EmberJS, and will automatically synchronize changes to and from Firebase.

EmberFire also supports Ember Data and provides an adapter for use with Firebase.

Check out the live chat example built with EmberFire, and read the source code to learn more about how to use the library.

Check out the port of TODOMVC which showcases how EmberFire works with Ember Data.

EmberFire introduces the EmberFire namespace, that provides two objects. Include the library first, along with Firebase and Ember:

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://firebase.github.io/emberFire/emberfire-latest.js"></script>

Note that the emberfire-latest.js library served from Github is subject to breaking changes, so please use it with caution.

A collection of objects, best suited to maintain lists of items. EmberFire.Array is intended to be used directly as a model, for example:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase("https://<my-firebase>.firebaseio.com/list")
    });
  }
});

All data stored at the provided Firebase URL will automatically appear in the model. You can iterate over the stored objects as you normally would. For example:

<script type="text/x-handlebars" data-template-name="index">
  {{#each}}
    <div>{{contents}}</div>
  {{/each}}
</script>

will iterate over each object in the array and print out the contents property.

You can manipulate the model using the regular MutableArray methods to save changes to Firebase. For example, to add a new object to the list:

<script type="text/x-handlebars" data-template-name="index">
  <form {{action "addItem" on="submit"}}>
    {{input value=item}}
    <button type=submit>Add</button>
  </form>
</script>
<script>
  App.IndexController = Ember.ArrayController.extend({
    actions: {
      addItem: function() {
        this.pushObject(this.get("item"));
      }
    }
  });
</script>

This works because we previously associated an EmberFire.Array instance as the model for the IndexController.

EmberFire.Object works similarly to EmberFire.Array and is more suited to store primitive values or key-value pairs. Nested arrays and objects are supported. EmberFire.Object is also intended to be used directly as a model:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Object.create({
      ref: new Firebase("https://<my-firebase>.firebaseio.com/foo")
    });
  }
});

You can manipulate any child of the object directly and changes will automatically be synchronized with Firebase, both to and from the server. For example, the following template:

<script type="text/x-handlebars" data-template-name="index">
  {{bar}}
  {{input type="text" value=bar}}
</script>

will synchronize the text value at https://<my-firebase>.firbaseio.com/foo/bar to the text field and vice-versa.

The EmberFire library also provides an adapter for use with Ember Data. If you're usng Ember Data in your framework, simply create an instance of the Firebase adapter in your app, like so:

MyApp.ApplicationAdapter = DS.FirebaseAdapter.extend({
  firebase: new Firebase("https://<my-firebase>.firebaseio.com/")
});

You can now interact with the data store as you normally would. For example, calling find() with a specific ID will retrieve that record from Firebase. Additionally, from that point on, every time that record is updated in Firebase, it will automatically be updated in the local data store.

See the Ember documentation for a full list of methods, including ways to create, find, delete and query records.

Use grunt to build and lint the code:

# Install Grunt and development dependencies
npm install

# Default task - validates with jshint and minifies source
grunt

# Watch for changes and run unit test after each change
grunt watch

# Minify source
grunt build

MIT.