Models & Ember Data

If you are thinking of consuming data in your Ember application, you can store them in fixtures. But what if you want to fetch data from a server?

Let’s look at the following code snippet where we use a Fixture to store data.


App.PRODUCTS = [...];

App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.PRODUCTS;
} });

App.ProductRouter = Ember.Route.extend({
  model: function(params) {
    return App.PRODUCTS.findBy('title', params.title);
  }
 });

Ember Models

Ember model is a class that defines the properties and behavior of the data that you present to the user. Every Route can have a Model.

A Model appears under a Route because, it’s the Route that tells the Controller, what Model to use.

Creating an Ember Model

We’re working with products, so lets define a product class. And Modles are typically nouns.

app.js

	App.Product = DS.Model.extend({});

Next, our Ember Model needs to know what attributes it contains.

Ember Model Attributes

We need to know what data types our Model should expect. It could be any of string, number, boolean, or a date.

We’ll define all the different properties in our model class.

	
{
  title: 'Flint',
  price: 99,
  description: 'Flint is...',
  isOnSale: true,
  image: 'flint.png'
}

app.js

	App.Product = DS.Model.extend({
		title: DS.attr('string'),
		price: DS.attr('number'),
		description: DS.attr('string'),
		isOnSale: DS.attr('boolean'),
		image: DS.attr('string')
	});

Ember Data

Ember Data makes it easy to use a Model to retrieve records from a server, cache them for performance, save updates back to the server, and create new records on the client.

Ember Data Adapters

To communicate with an HTTP server using JSON, you have to use the RESTAdapter which is the default adapter.

	App.ApplicationAdapter = DS.RESTAdapter.extend();

To load records from memory, you have to use the FixtureAdapter, which allows you to hardcode dat in fixtures for getting started.

	App.ApplicationAdapter = DS.FixtureAdapter.extend();

Migrating Fixtures

To convert following data to use Ember Data FixtueAdapter ..

	
App.PRODUCTS = [
  {
    title: 'Flint',
    price: 99,
    description: 'Flint is...',
    isOnSale: true,
    image: 'flint.png'
  },
  {
    title: 'Kindling',
    price: 249,
    description: 'Easily...',
    isOnSale: false,
    image: 'kindling.png'
} ];

We need to use the FIXTURE constant within the model. Also we have to give each product a unique ID.

	pp. =[ {
    title: 'Flint',
    price: 99,
    description: 'Flint is...',
    isOnSale: true,
    image: 'flint.png'
  },
  { id: 2,
    title: 'Kindling',
    price: 249,
    description: 'Easily...',
    isOnSale: false,
    image: 'kindling.png'
} ];

Ember Data Store

Like many other JavaScript frameworks, Ember Dat ahs this concept of a Store. It’s a central repository for records in your application, available in routes and controllers. Think of it as a cache storage of all your records. We will use the store to retrieve records and create new ones.

Ember Data (by default) must use a unique identifier. We’ll use :product_id. So let’s change :title to :product_id

	
this.resource('products', function() {
  this.resource('product', { path: '/:title' });
});

Switch to using product_id as the dynamic segment

	
this.resource('products', function() {
  this.resource('product', { path: '/:product_id' });
});

Next, we need update our Routes, in order to get our fixture data out of the store.

	
App.ProductsRoute = Ember.Route.extend({
  model: function() {
    return App.PRODUCTS;
  }
});

The following will find all products from the fixture adapter.

	
App.ProductsRoute = Ember.Route.extend({
  model: function() {
return this.store.findAll('product'); }
});

To find the product with the matching ID:

	
App.ProductRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('product', params.product_id);
  }
});

Be first to comment

Leave a Reply