Using Ember Data

Currently, our app is using hard-coded data for rentals in the index route handler to set the model. As our application grows, we will want to be able to create new rentals, make updates to them, delete them, and save these changes to a backend server. Ember integrates with a data management library called Ember Data to help solve this problem.

Let's generate our first Ember Data model called rental:

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, we see:

import Model from 'ember-data/model';

export default Model.extend({

});

Let's add the same attributes for our rental that we used in our hard-coded array of JavaScript objects - title, owner, city, type, image, and bedrooms:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

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

Now we have a model in our Ember Data store.

Updating the Model Hook

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('rental');
  }
});