Tutorial Ember ( Version 1.13 ) – Part 2

By | August 26, 2015

In the previous articles of this tutorial, we have seen how to install et configure an Ember project with Ember-cli and the Material Design Lite Css Framework. We will now see how to build our blog project by starting with the model of the application. To simplify, we will use adapter that use local Storage instead of a call to REST server to save data. So we do not take care of the application backend for the moment.

What is an adapteur?

People that develop Ember has thought about a system that permit to access and manipulate data and can connect to any datasource system. Ember-Data was born. You can see Ember-Data as an ORM for Ember but more powerful. Concept is simple, For every datasource, an adapter can be implemented to access it. Ember-data has in charge the mapping between datasource and your application using your adapteur. We will see later how it works.  Nous verront plus tard comment cela fonctionne. Meanwhile, we can install the localStorage adapter:


bower install ember-localstorage-adapter --save

Then we add this line to Ember-cli-build.js to import the adapter in our application :

 

app.import('bower_components/ember-localstorage-adapter/localstorage_adapter.js'); 

Finally we create the adapter application that extends from DS.LSAdapteur. This allows Ember-data to know which adapter to use. If you do not create an adapter, the default (JSONAPIAdapter) will be used.


ember generate adapter application ember generate serializer application

You may notice that we also create a serializer. Each Adapters need his serializer to transform the entities in JSON and JSON entities. We still have to configure them correctly:


import DS from 'ember-data';

export default DS.LSAdapter.extend({
namespace : 'blog' // The namespace where data will be store.
});

 

import DS from 'ember-data'; 

export default DS.LSSerializer.extend({ 
}); 

At this time, this adapter is not fully compatible with Ember-data 2.0. So if you start your application, you will notice some deprecation warning.

The model :

Now your persistance is configured, we need to create the model that allow to access it. Ember uses entities to manipulate data.These entities inherit classes DS.Model. As part of our blog we will need the following entities: Post, Comment and User. Create them right away with the following command:

 
ember generate model Post 
ember generate model Comment 
ember generate model User 

If all goes well you have post.js, comment.js and user.js files that appeared in the app/model directory. Now edit these models to define their attributes and the relationships between them:


import DS from 'ember-data';

/*
* post.js
*/
export default DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    date: DS.attr('date'),
    user:DS.belongsTo('user'), 
    comments:DS.hasMany('comment')
});


import DS from 'ember-data';

/*
* user.js
*/
export default DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string'),
    posts:DS.hasMany('posts'), 
    comments:DS.hasMany('comment')
});


import DS from 'ember-data';

/*
* comment.js
*/
export default DS.Model.extend({
    content: DS.attr('string'),
    date: DS.attr('string'),
    posts:DS.belongsTo('post'),
    users:DS.belongsTo('user')
});

Note that all our models inherit the DS.Model class. Each field is defined as DS.attr () you can pass a type (string, number, boolean or date). Models are interconnected by DS.hasMany and  DS.belongsTo relations. The ManyToMany relationship is modeled using a DS.hasMany in the two related models.

That concludes the second part. In the next article we will discuss the management of routes with Ember.
See you soon.

00