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?
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 let's 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 that 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);
}
});