Old Guides - You are viewing the guides for Ember v2.11.0.

Using Ember Data

Currently, our app is using hard-coded data for our rental listings, defined in the rentals route handler. As our application grows, we will want to persist our rental data on a server, and make it easier to do advanced operations on the data, such as querying.

Ember comes with a data management library called Ember Data to help deal with persistent application data.

Ember Data requires you to define the structure of the data you wish to provide to your application by extending DS.Model.

You can generate a Ember Data Model using Ember CLI. We'll call our model rental and generate it as follows:

ember g model rental

This results in the creation of a model file and a test file:

installing model
  create app/models/rental.js
installing model-test
  create tests/unit/models/rental-test.js

When we open the model file reveals a blank class extending DS.Model:

app/models/rental.js

import DS from 'ember-data';

export default DS.Model.extend({

});

Let's define the structure of a rental object using the same attributes for our rental that we previously used in our hard-coded array of JavaScript objects - title, owner, city, type, image, bedrooms and description. Define attributes by giving them the result of the function DS.attr(). For more information on Ember Data Attributes, read the section called Defining Attributes in the guides.

app/models/rental.js

import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr(),
  owner: DS.attr(),
  city: DS.attr(),
  type: DS.attr(),
  image: DS.attr(),
  bedrooms: DS.attr(),
  description: DS.attr()
});

Now we have a model object that we can use for our Ember Data store.

Updating the Model Hook

To use our new Ember Data Model object, we need to update the model function we previously defined in our route handler. Delete the hard-coded JavaScript Array, and replace it with the following call to the Ember Data Store service. The store service is injected into all routes and components in Ember. It is the main interface you use to interact with Ember Data. In this case, call the findAll function on the store and provide it with the name of your newly created rental model class.

app/routes/rentals.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('rental');
    return [{
      id: 'grand-old-mansion',
      title: 'Grand Old Mansion',
      owner: 'Veruca Salt',
      city: 'San Francisco',
      type: 'Estate',
      bedrooms: 15,
      image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
      description: "This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests."
    }, {
      id: 'urban-living',
      title: 'Urban Living',
      owner: 'Mike TV',
      city: 'Seattle',
      type: 'Condo',
      bedrooms: 1,
      image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
      description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
    }, {
      id: 'downtown-charm',
      title: 'Downtown Charm',
      owner: 'Violet Beauregarde',
      city: 'Portland',
      type: 'Apartment',
      bedrooms: 3,
      image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
      description: "Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet."
    }];
  }
});

When we call findAll, Ember Data will attempt to make a GET request to /rentals.

You can read more about Ember Data in the Models section.

Since we're using Mirage in our development environment, Mirage will return the data we've provided. When we deploy our app to a production server, we will need to provide a backend for Ember Data to communicate with.

Updating the Model Hook