Switching to Ember Data

Published on Mar 10, 2014

If you want your ember application to have a cleaner interface with the server, Ember Data can help.

In this episode, I show how to switch to using Ember Data.

Errata:

Ember.FixtureAdapter.extend() should be DS.FixtureAdapter.extend()
this.store.find('posts') should be this.store.find('post')


Links

Code

Transcript

Hello, and welcome to Ember Sparks episode 2! Today I'm going to demonstrate how to get started with Ember Data in a preexisting application.

Ember Data is persistence library that communicates with your server or database, doing all the hard work so that you'll never have to directly touch Ajax again. The version of the Ember Data that we'll be using is 1.0 Beta- it is much easier to use than the pre-beta versions and much less buggy as well, and there should be very few breaking changes between now and the 1.0 official release.

The application that we are going to use is the blogger client that Tom Dale showed us how to create in a screencast last year. It's pretty simple- it has a list of posts and then it has a post resource which you can edit. The current architecture of the app is an array of hashes that is stored on post and then it is called either finding entire array or by finding it by ID.

When you reload, none of your changes are saved. You'll eventually need it to switch to a server. You are going to talk to the server most likely with an Ajax call. However, when your app grows and gains more API end-points and data interactions, you are likely in depth with a big mess of random spaghetti Ajax.

This is how the Ember Data architecture will be when we are done today; then when your app grows, your data connection layer will be able to handle it much better. In order to migrate this or any app to Ember Data we need to accomplish 4 task. The first is to add the adapter. The second is create the models. The third is to create either the server, or in this case the fixtures. Finally we need to connect all of the code to the servers, or in this case the fixtures, and in this case we'll connect it using the router. And I almost forgot, we need to take in the Ember Data library, put it in our libs directory and then, in index.html, put it inside a script tag.

First let's add the adapter. ApplicationAdapter is Ember's name for the top level adapter. We are going to extend FixtureAdapter but in real life situations you'll probably want to connect to a server.

Next we'll create our models. In this application we are only going to need to make one model, that for post. We are going to subclass it from DS.Model and then we are going to find its attributes. We are going to define a title, and then an author, and then a date, and finally a body. DS.attr signifies that the attribute should be saved between sessions. Notice that we don't define ID; Ember Data does that for us.

Now we'll setup the fixtures. Luckily, we only have to repurpose the hash that is already there. We are going to store fixtures on the App.Post model- and that is all there is to setting up fixtures when you are using the FixtureAdapter.

Finally we'll connect the rest of our app to the Ember Data apparatus that we've setup. We'll do this by finding the store, and then asking the store to find posts. This is for the one that is asking for all of the posts. To find a specific post we ask the store to find one post and then to use the ID and it will automatically know that we are searching by ID. The store has all sorts of cool properties that we won't be addressing today, but the gist of it is that once you've setup the adapter, you will rarely have to think about how you connect to your server. Just ask the store for something and it will figure out how to get it.

Now we'll try to load our page and -uh-oh!- it looks like there is a problem. Let's see what it says. Apparently there is no Ember.Fixture adapter, that's because it's actually DS.Fixture adapter. Now our app works again and it is well prepared for the future.

Of course, if you have a more complicated application that you are trying to convert to Ember Data, it's going to take longer and there are more difficulties that can arise. We'll tackle those nuances and other topics in upcoming episodes. Happy coding!

Subscribe to our mailing list