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

de | décembre 21, 2015

Nous voici rendu à la 4ème partie de ce tutoriel consacré à la création d’un blog avec Ember.  Nous allons voir la création des templates, des composants et comment relier le tout aux modèles via les routes définies au chapitre précédent. Un sacré programme. Allez c’est partie !

Revenons-en à nos fameuses Routes. Dans le chapitre précédent nous avions définies les routes de notre application. Nous allons maintenant devoir les implémenter. Pour cela un fichier au nom de la route peut être créer pour lier un template à son modèle. Rassurez-vous, nous ne créerons que les routes dont nous avons besoin de modifier le comportement. Pour le reste Ember est assez grand pour se débrouiller tout seul.

Commençons par le module qui nous intéresse le plus dans un blog, les posts. Pour rappel, la définition des routes concernant les posts est la suivante :

this.route('post', {path: 'post'} , function() {
 this.route('index');
 this.route('add');
 this.route('edit, {path: 'edit/:post_id'}');
 this.route('view', {path: 'edit/:post_id'});
});

Procédons dans l’ordre en commençant par l’index. Celui-ci doit nous permettre de visualiser l’ensemble des posts déjà rédigés. Notre fichier index.js doit se trouver dans le dossier admin/post.


import Ember from 'ember';

export default Ember.Route.extend({
    model : function() {
        return this.store.findAll('post');
    },
    actions : {
        add : function() {
            // Effectue la tranchions vers la route d'ajout d'un formulaire.
            this.transitionTo('admin.post.add');
        },
        deleteAll : function(posts_id) { 
            /*this.store.query('post', {'ids' : posts_id}).then(function(posts) {
                posts.forEach(function(post){
                    post.destroyRecord(); // Supprime tout les posts.
                });  

             });*/
             var that = this;
             posts_id.forEach(function(post_id){
                 that.store.findRecord('post', post_id).then(function(post) {
                    post.destroyRecord();
                 });
            });
         }
    }
});

La méthode model permet de charger l’ensemble des posts depuis la source de données. La méthode actions est un peu plus complexe. Cette méthode permet de définir la réponse à toutes les actions qui seront effectuées sur le template. Cette méthode est identique à celle présente dans le Contrôleur. Pourquoi alors définir les actions dans les routes et non pas dans les contrôleurs me direz-vous? Les contrôleur sont des reliquats des premières versions d’Ember, Ceux-ci sont toujours présent pour des raisons de compatibilité et pour effectuer certaines actions bien spécifiques. Avec Ember (1.13 – 2.x) les contrôleurs sont petit à petit remplacés par les Composants et les Routes. Afin de ne pas avoir de problèmes avec les futures version d’Ember je conseille donc de définir vos actions dans vos routes.

La première action que nous définissons est celle permettant d’accéder au formulaire d’ajout d’un post. Cette action sera déclenchée par le clique sur un bouton dans le template. L’action add se contente juste d’effectuer une transition vers la route admin.post.add grâce à la méthode transitionTo. L’action deleteAll permet quand à elle de supprimer l’ensemble des posts sélectionnés. Elle prend en paramètre l’ensemble des identifiants des posts à supprimer, posts_id.

J’ai mis deux méthodes de suppression dans notre action deleteAll. La première est plus performante car elle n’envoie qu’une seule requête contenant l’ensemble des identifiants  pour récupérer les posts à supprimer depuis le serveur. Seulement le backend doit pourvoir le supporter ce qui n’est pas le cas de notre backend localStorage. Nous nous contenteront donc de supprimer les posts un par un. Cela ne devrait pas avoir d’impact sur les performances dans notre cas, toute les opérations s’effectuant en local. Dans les deux cas, la méthode utilise le système de promesse ( Promise) d’ember pour effectuer une action asynchrone sur la source de donnée.

Maintenant que notre route est définie, intéressons nous à nos templates. Le seul template actuellement défini est le template racine de notre application. Celui-ci s’appelle templates/application.hbs


<div class="container-fluid">
    {{outlet}}
</div>

Deux chose à remarquer ici. La première est que nous ajoutons une div nécessaire à l’application des styles de bootstrap. La seconde est la balise {{outlet}} qui permet de dire à Ember l’emplacement des templates fils à inclure. Ainsi les template admin.hbs et public.hbs seront inclus à la place de la balise {{outlet}}. Le template admin.hbs est le template racine de tous les templates de notre partie d’administration. Celui-ci est défini comme ceci :


<nav class="navbar navbar-light bg-faded">
    <a class="navbar-brand" href="#">Blog</a>
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">{{#link-to 'admin.post.index'}}Post{{/link-to}}<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">{{#link-to 'admin.user.index'}}User{{/link-to}}</a>
        </li>
   </ul>
</nav>
{{outlet}}

Celui-ci comprend la barre de navigation de la partie administration et toujours notre balise {{outlet}} où viendront s’afficher les templates fils. Nous voyons aussi la balise {{link-to}} qui est utilisé pour créer un lien vers une route. Elle prend en paramètre le nom de la route vers laquelle s’effectuera la redirection. Il nous reste enfin le template correspondant à la route admin.post.index à afficher.


<div class="row">
    {{#bootstrap-table deleteAction="deleteAll" addAction="add"}}
        <table class="table table-striped table-bordered table-hover" id="posts">
            <thead>
                <tr>
                    <th>Selection</th>
                    <th>Title</th>
                    <th>User Name</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
            {{#each model as |post|}}
                <tr>
                    <td>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="{{post.id}}" value="{{post.id}}">
                            </label>
                        </div>
                    </td>
                    <td>{{#link-to 'admin.post.edit' post}}{{post.title}}{{/link-to}}</td>
                    <td>{{post.user.name}}</td>
                    <td>{{post.date}}</td>
               </tr>
            {{/each}}
            </tbody>
        </table>
    {{/bootstrap-table}}
</div>

Nous avons beaucoup de choses nouvelles dans ce template. La première est la présence de la balise {{bootstrap-table}} qui permet comme son nom l’indique de créer une table façon twitter bootstrap et surtout de prendre en charge les actions sur cette table tel que la suppression d’un post, ou la sélection d’un élément de la table. En réalité cette balise est ce qu’on appelle un Composant ( Component en anglais ). Pour ceux ayant déjà pratiqué Ember, les composants remplacent les vues et on une par prédominante dans Ember 2.x. Les composants disposent de leurs propres Scope de variable et sont pour ainsi dire des bouts de code autonomes. Leurs grandes forces est d’être facilement réutilisables n’importe où dans votre application. Leurs faiblesses est une certaine complexité à être créé. Dans tout les cas dès qu’une action doit se faire en javascript sur un élément de votre page un composant sera nécessaire. Nous verrons en détail dans le prochain tutoriel comment créer un composant et comment fonctionne le composant bootstrap-table.

La deuxième balise présente {{link-to}} permet de créer un lien vers une action. Elle prend en paramètre le nom d’une action et éventuellement des paramètres complémentaires à passer dans l’URL. Ici nous passons le post ou l’utilisateur en paramètre. Ember ira prendre l’identifiant de l’object pour le concaténer  au reste de l’URL. Pour le post nous auront donc une url de la form hostname:4200/admin/post/edit/:post_id.

Dans le prochain chapitre nous verrons en détails la création d’un composant avec comme exemple le composant bootstrap-table. Nous mettrons également en place le reste de l’administration concernant les posts.

A bientôt.

00

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.