Using With Ember Data

The current beta Ember Data is included with Ember CLI.

Ember Data has recently undergone a major reboot, drastically simplifying it and making it easier to use with the Ember resolver. Here’s some tips for using it within Ember CLI.

To use ember-cli without Ember Data remove the dependency from package.json (the same applies for ic-ajax)

npm rm ember-data --save-dev

Models

Models are critical in any dynamic web application. Ember Data makes making models extremely easy.

For example, we can create a todo model like so:

 1 // models/todo.js
 2 import DS from "ember-data";
 3 
 4 export default DS.Model.extend({
 5   title: DS.attr('string'),
 6   isCompleted: DS.attr('boolean'),
 7   quickNotes: DS.hasMany('quick-note')
 8 });
 9 
10 // models/quick-note.js
11 import DS from "ember-data";
12 
13 export default DS.Model.extend({
14   name: DS.attr('string'),
15   todo: DS.belongsTo('todo')
16 });

Note, that filenames should be all lowercase and dasherized - this is used by the Resolver automatically.

Adapters & Serializers

Ember Data makes heavy use of per-type adapters and serializers. These objects can be resolved like any other.

Adapters can be placed at /app/adapters/type.js:

1 // adapters/post.js
2 import DS from "ember-data";
3 
4 export default DS.RESTAdapter.extend({});

And its serializer can be placed in /app/serializers/type.js:

1 // serializers/post.js
2 import DS from "ember-data";
3 
4 export default DS.RESTSerializer.extend({});

Application-level (default) adapters and serializers should be named adapters/application.js and serializers/application.js, respectively.

Mocks and fixtures

If you’re used to using fixtures to get test data into your app during development, you won’t be able to create fixture data like you’re used to doing (i.e. as specified in the guides). This is because the models in your Ember CLI app (like all other objects) aren’t attached to the global namespace.

Ember CLI comes with an http-mock generator which is preferred to fixtures for development and testing. Mocks have several advantages over fixtures, a primary one being that they interact with your application’s adapters. Since you’ll eventually be hooking your app up to a live API, it’s wise to be testing your adapters from the onset.

To create a mock for a posts API endpoint, use

ember g http-mock posts

A basic ExpressJS server will be scaffolded for your endpoint under /your-app/server/mocks/posts.js. Once you add the appropriate JSON response, you’re ready to go. The next time you run ember serve, your new mock server will be listening for any API requests from your Ember app.

Note: Mocks are just for development and testing. The entire /server directory will be ignored during ember build.

If you decide to use fixtures instead of mocks, you’ll need to use reopenClass within your model class definitions. First, create a fixture adapter, either for a single model or your entire application:

1 // adapters/application.js
2 import DS from "ember-data";
3 
4 export default DS.FixtureAdapter.extend({});

Then add fixture data to your model class:

 1 // models/author.js
 2 import DS from "ember-data";
 3 
 4 var Author = DS.Model.extend({
 5   firstName: DS.attr('string'),
 6   lastName: DS.attr('string')
 7 });
 8 
 9 Author.reopenClass({
10   FIXTURES: [
11     {id: 1, firstName: 'Bugs', lastName: 'Bunny'},
12     {id: 2, firstName: 'Wile E.', lastName: 'Coyote'}
13   ]
14 });
15 
16 export default Author;

Your Ember app’s API requests will now use your fixture data.