A la découverte d?Ember (version 1.13) ? Partie 2

de | août 8, 2015

Bonjour et bienvenue dans la deuxième partie de ce tutoriel consacrée au Framework Ember.js. Dans l’article précédent nous avions vu comment installer et configurer Ember.js avec Ember-cli. Nous allons maintenant nous atteler à notre projet de Blog. Afin de ne pas tout mélanger, je ne vais dans un premier temps pas m’occuper de la partie backend de notre application. Pour cela, j’utiliserai un adaptateur permettant de stocker les données dans le navigateur via le localStorage. 

Qu’est-ce qu’un adaptateur?

Les personnes développant Ember ont réfléchi à un système permettant l’accès et la manipulation des données et pouvant se connecter sur n’importe quels systèmes de gestion de données. Ember-data était né. Vous pouvez voir Ember-data comme un ORM pour Ember mais en beaucoup plus puissant. Le concept est simple, Pour chaque source de donnée, un adaptateur peut être implémenté pour y accéder. Ember-data se charge de faire le mapping entre la source de donnée et votre application en utilisant votre adaptateur. Nous verrons plus tard comment cela fonctionne. En attendant, installons l’adaptateur permettant le localStorage:


bower install ember-localstorage-adapter --save

 

Puis on ajoute la ligne suivante dans le fichier ember-cli-build.js :

 

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

Enfin on créer l’adaptateur de l’application qui étend de DS.LSAdapteur. Cela permet à Ember-data de savoir quel adaptateur utiliser. Si vous ne créez pas d’adaptateur, celui par défaut( JSONAPIAdapter ) sera utilisé.


ember generate adapter application

ember generate serializer application

Vous pouvez remarquer que nous créons aussi un serializer. Chaque adaptateurs à besoin de son serializer pour transformer les entités en JSON et le JSON en entités. Il nous reste à les configurer correctement :


import DS from 'ember-data';

export default DS.LSAdapter.extend({
namespace : 'blog' // Le namespace où seront stockées vos données.
});


import DS from 'ember-data';
// On fait étendre notre sérializer de la classe DS.LSSerializer
export default DS.LSSerializer.extend({
});

Le modèle :

Maintenant que notre persistance est opérationnelle, il nous faut créer le modèle permettant d’y accéder. Ember utilise des entités pour manipuler les données. Ces entités sont des classes héritant de DS.Model. Dans le cadre de notre blog nous auront besoin des entités suivante : Post, Comment, User. Créons les tout de suite avec la commande suivante :


ember generate model Post

ember generate model Comment

ember generate model User

Si tout se passe bien vous avez les fichiers post.js, comment.js et user.js qui sont apparus dans le répertoire app/model. Éditons maintenant ces modèles afin de définir leurs attributs et les relations qui les unissent :


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'), // Un post appartient(belongsTo) à un utilisateur
    comments:DS.hasMany('comment')// Un post à plusieurs(hasMany) commentaires
});


import DS from 'ember-data';

/*
* user.js
*/
export default DS.Model.extend({
    name: DS.attr('string'),
    email: DS.attr('string'),
    posts:DS.hasMany('posts'), // Le pendant du "belongsTo" du model prétendent. Un Utilisateur à plusieurs post.
    comments:DS.hasMany('comment')// Un utilisateur à plusieurs(hasMany) commentaires
});


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')
});

On remarque que tous nos modèles héritent de la classe DS.Model. Chaque champs est défini en tant que DS.attr() auquel vous pouvez passer un type (string, number, boolean ou date). Les modèles sont reliés entre eux par les relations DS.hasMany, DS.belongsTo. La relation manyToMany est modélisée en utilisant un DS.hasMany dans les deux modèles liés.

Voila qui conclut cette deuxième partie. Dans le prochain article nous aborderont la gestion des routes avec Ember.
A bientôt

00