Using Ember CLI and working with Ember Data fixtures

Ember CLI is pretty much the defacto way to work with Ember these days. It makes creating new elements of an application extremely easy. Lately I have been working on using Ember Data so I wanted to do a little write-up on how to use Ember Data fixtures. Fixtures are a great way to start working on your application before you have an API to work with. It is also a great way to determine what your API’s data should look like.

Set up

Lets assume you have a basic Ember application set up. And you are running Ember CLI. If you are not 100% sure how to do so check out my post Working with Ember Data, Node, Express and Mongodb to get an idea, the first portion will get you started.

The Model

The first thing we need to so is create our model using Ember Data. Using the Ember CLI we can generate a new model by typing:

ember generate model note

Inside our note model, now located at app/models/note.js, lets define some attributes. In this case we are just going to have three properties, a title, an author and the content. Using DS.attr() we can define the type the attributes will be.

import DS from 'ember-data';

export default DS.Model.extend({
    title: DS.attr('string'),
    author: DS.attr('string'),
    content: DS.attr('string')
});

Notice that once we use Ember CLI to create a model it will default to setting our file to be export default DS.Model.... In order for us to create a FIXTURE we need to change that to be something like this.

import DS from 'ember-data';

var Note = DS.Model.extend({
    title: DS.attr('string'),
    author: DS.attr('string'),
    content: DS.attr('string')
});

export default Note;

Now when can use the Note variable to create our fixture data. In order to add fixture data to our model we need to use the reopenClass() method.

import DS from 'ember-data';

var Note = DS.Model.extend({
    title: DS.attr('string'),
    author: DS.attr('string'),
    content: DS.attr('string')
});


Note.reopenClass({
    FIXTURES: [
        
    ]
});

export default Note;

Inside the FIXTURES array we can now add our objects that will represent our fixture data.

Note.reopenClass({
    FIXTURES: [
        {
            id: 1,
            title: "Using Ember CLI to create a Fixture Adapter.",
            author: "Ryan Christiani",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur quam qui commodi beatae placeat ducimus aliquam veritatis ullam sed! Sit assumenda aspernatur sunt harum accusamus, repellat labore! Repellendus, corporis!"
        },
        {
            id: 2,
            title: "Ember is lots of fun",
            author: "Ryan Christiani",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur quam qui commodi beatae placeat ducimus aliquam veritatis ullam sed! Sit assumenda aspernatur sunt harum accusamus, repellat labore! Repellendus, corporis!"
        },
        {
            id: 3,
            title: "Ember, Node, Express and You!",
            author: "Ryan Christiani",
            content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium aspernatur quam qui commodi beatae placeat ducimus aliquam veritatis ullam sed! Sit assumenda aspernatur sunt harum accusamus, repellat labore! Repellendus, corporis!"
        }
    ]
});

export default Note;

The Fixture Adapter

Now we have to create our adapter. To do so lets create a new application adapter.

ember generate adapter application

This will create a new DS.RESTAdapter.extend in the folder app/adapters/application.js. To set up a fixture, it is as simple as changing DS.RESTAdapter.extend to DS.FixtureAdapter.extend.

Testing that it works.

In order to test that it works we need to create and application router.

ember generate router application

import Ember from 'ember';

export default Ember.Route.extend({
    model: function() {
        return this.store.find('note');
    }
});

Now in our template we can use our model and output the data!

{{#each model as |item|}}
    {{item.content}}
{{/each}}

And that is it! Now you can start working on your application and work with data, even if you don’t an api to connect with! I hope that helps some people!