UNPKG

emberfire

Version:

The officially supported Ember binding for Firebase

120 lines (97 loc) 3.64 kB
# 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. 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. **Saving and Retrieving Data** 1. [Querying Data](querying-data.md) 1. [Relationships](relationships.md) 1. [Security Rules](security-rules.md) 1. [Using EmberFire without Ember CLI](without-ember-cli.md) 1. [Deploying to Firebase Hosting](deploying-to-firebase-hosting.md)