Saving and retrieving data

As an example resource, we will use "posts" for a blog. Let's create a model and describe what data a "post" will include. Each post will have a title, body, and a timestamp. We can use this CLI shorthand to quickly generate that file.

$ ember generate model post title:string body:string timestamp:number

// app/models/post.js
export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  timestamp: DS.attr('number')
});

To add blog posts to our app, we'll need a route and a template with a form for submitting blog posts:

$ ember generate route posts

This will generate a route and template for posts

<!-- app/templates/posts.hbs -->
<h2>New Post</h2>
<ul class="post-publish">
  <li>
    {{input value=title placeholder="Title"}}
  </li>
  <li>
    {{textarea value=body placeholder="Body"}}
  </li>
  <li>
    <button {{action "publishPost"}}>Publish</button>
  </li>
</ul>

We haven't written the publishPost action yet, so let's do that now in our controller:

$ ember generate controller posts

// app/controllers/posts.js
export default Ember.Controller.extend({
  sortProperties: ['timestamp'],
  sortAscending: false, // sorts post by timestamp
  actions: {
    publishPost: function() {
      var newPost = this.store.createRecord('post', {
        title: this.get('title'),
        body: this.get('body'),
        timestamp: new Date().getTime()
      });
      newPost.save();
    }
  }
});

In our publishPost action, we create a new post in the data store with the title and body entered in our Handlebars template. Simply calling newPost.save() will save our post to the data store and automatically create a record in the database.

Note: By default Firebase requires users be authenticated before they can read and write to the database. If you have not authenticated your users, you will receive errors . If you want to allow reading/writing to the database from unauthenticated users, check out the security rules section.

EmberFire uses Firebase's push() function under the hood, which creates a unique timestamp-based ID for each record that is added to the database. (If you require a custom unique ID on your record, include an id attribute in your createRecord request.) Our data now looks like this:

{
  "posts": {
    "-JS4hh97qukW9_JWoPRu": {
      "body": "You can store and sync data in realtime without a backend.",
      "title": "EmberFire is flaming hot!",
      "timestamp": 1425940107418
    }
  }
}

Notice that our data is stored under a posts path. EmberFire will automatically try to determine the correct Firebase reference based on the model name. Since we have a Post model, all of our posts are automatically stored under a posts path in the database.

To retrieve the post data from the database, we just need to add a model hook to our posts route:

// app/routes/posts.js
export default Ember.Route.extend({
  model: function() {
    return this.store.findAll('post');
  }
});

Now we have access to all of our posts, and can display them in our template:

<!-- app/templates/posts.hbs from above -->

<section>
{{#each model as |post|}}
  <div>{{post.title}}</div>
  <div>{{post.body}}</div>
{{/each}}
</section>

Continue reading

1. Installation
2. User Authentication
3. Collect Analytics
4. Saving and Retrieving Data
5. Querying Data
6. Relationships
7. Security Rules
8. Deploying to Firebase Hosting
9. Fastboot support
10. Deploying to Cloud Functions for Firebase