firebase/emberfire

View on GitHub
docs/guide/saving-and-retrieving-data.md

Summary

Maintainability
Test Coverage
# 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
```

```js
// 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

```handlebars
<!-- 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
```

```js
// 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](security-rules.md) 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:

```json
{
  "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:

```js
// 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:

```handlebars
<!-- 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](installation.md)
1. [User Authentication](authentication.md)
1. [Collect Analytics](analytics.md)
1. **Saving and Retrieving Data**
1. [Querying Data](querying-data.md)
1. [Relationships](relationships.md)
1. [Security Rules](security-rules.md)
1. [Deploying to Firebase Hosting](deploying-to-firebase-hosting.md)
1. [Fastboot support](fastboot-support.md)
1. [Deploying to Cloud Functions for Firebase](deploying-fastboot-to-cloud-functions.md)