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

de | janvier 30, 2016

Dans la précédent partie de ce tutoriel consacré à la création d’un blog avec Ember, nous avons commencer à mettre en place l’administration de notre blog. Aujourd’hui nous allons voir comment créer un composant (Component)et leurs intérêts.

Les composants :

Ember est récemment passé d’un modèle Template-Vue-Contrôleur-Action à un modèle Template-Composant-Action. Un composant dans Ember peut être vu comme une mini-application autonome avec son propre scope, son propre template et bientôt son propre système de routing grâce au « Routable Component ». Ember-cli fourni un moyen très simple de générer un composant ainsi que les classes de test reliées. La commande est la suivante :


ember generate component <component-name>

Le nom du composant doit obligatoirement être « dasherized », c’est à dire être composé de de deux mot reliés par un tiret. Par exemple bootstrap-table est valide mais bootstrapTable ne l’est pas. Cette règle est importante car elle permet de ne pas entrer en conflit avec les futurs composants HTML. Pour générer notre composant bootstrap-table voici la commande à exécuter :


ember generate component bootstrap-table

Cette commande va générer les fichiers suivants :

  • app/components/bootstrap-table.js – Contient la mécanique de votre composant
  • app/templates/components/bootstrap-table.js  – Le template de votre composant
  • test/integration/components/bootstrap-table.js – Contient les tests de votre composant

Voici le code du fichier bootstrap-table.js


import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'div',
    classNames: ['col-xs-12'],
    actions : {
        deleteAll() {
            var posts_id = [];
            this.$("input[type='checkbox']:checked").each(function() {
                var checkbox = Ember.$(this);
                checkbox.parent().parent().parent().parent().remove();
                posts_id.push(checkbox.attr('id'));
            });
            this.sendAction("deleteAction", posts_id);
        },
        add() {
            this.sendAction("addAction");
        }
    },

    __init : function() {
        console.log("Init bootstrap-table");
    }.on('didInsertElement')
});

La première chose à noter c’est que notre composant hérite de Ember.Component. Un composant peut se paramétrer de plusieurs manières.

  • tagName – Permet de définir la balise html qui sera la racine de notre composant. Cette balise contiendra tout ce qui sera placé dans le template du composant
  • classNames – Permet de rajouter des classes à notre composant. En sachant qu’Ember accepte aussi les classes définies au moment de l’appel du composant dans le template de l’application.
  • classNameBinding – Permet d’ajouter des classes CSS à notre composant de manière dynamique en fonction d’un attribut de notre composant.
  • attributeBindings – Permet à notre composant de prendre en charge des attributs passés en paramètre lors de l’invocation dans le template. Je vous laisse voir la documentation pour de plus amples renseignements.

Viens ensuite la méthode actions qui regroupe toute la logique de votre composant. C’est au travers des actions que votre composant peut réagir à un événement et communiquer avec une route ou un contrôleur. Deux actions sont ici définies. deleteAll et add. Le composant va réagir à ces deux actions lorsqu’elle seront invoquées par un des éléments du template du composant. Voici ce template pour mieux comprendre :


{{yield}}



<div class="row">


<div class="col-xs-12">
        <button id="add" type="button" class="btn btn-primary" {{action "add"}}>Add</button>
        <button id="deleteAll" type="button" class="btn btn-danger" {{action "deleteAll"}}>Delete All</button>
    </div>


</div>



Comme on peut le voir, les boutons du template déclarent les action add et deleteAll définies dans le composant. Cette déclaration se fait de la forme {{action « nom-de-l’action »}}. L’action est déclenchée lorsque que l’événement primaire de l’élément sur lequel est déclaré l’action est invoqué. Ici ce sont des boutons et l’événement primaire est le clique. Lors du clique sur le bouton Add l’action « add » est appelée et attrapée par le composant qui la traite. Il en va de même pour le bouton DeleteAll.

Une fois que le composant à effectué les traitements qu’il avait à faire en réponse à l’action déclenchée, il peut communiquer avec les routes ou les contrôleurs de l’application grâce à la méthode sendAction(). Celle-ci prend en paramètre le nom de l’action à invoquer et éventuellement un ou plusieurs paramètres à envoyés avec l’action. Le nom de l’action à invoquer est définies dans le template de l’application au moment de l’appel du composant. Vous vous souvenez du fichier index.hbs de l’article précédent? on y déclarait le composant bootstrap-table comme ceci :


{{#bootstrap-table deleteAction="deleteAll" addAction="add"}}

Lorsque le composant exécute l’instruction this.sendAction(« addAction »);, Ember va rechercher le nom de l’action passée en paramètre au composant. Ici l’action s’appelle « add ».

Si je récapitule, lors du clique sur le bouton Add, celui-ci envoi un événement action nommé ici « add », attrapé par le composant. Le composant traite l’action et appelle la méthode this.sendAction(« addAction »). Ember récupère le paramètre passé au composant bootstrap-table correspondant au nom addAction, ici « add », et lance un événement en direction des routes et contrôleur qui pourront à leur tour attraper l’action « add ».Dans notre cas ces actions sont attrapées par la route admin.post.index que nous avons vu dans la partie 4 de ce tutoriel.

Cela peut paraitre un peu compliqué au premier abord mais cela permet a vos composants d’être réutilisable par n’importe qui puisqu’il n’ont pas besoin de connaître à l’avance le nom de l’action à envoyer aux routes ou contrôleurs à l’avance. Par example si je réutilise ce composant mais que la route attrape une action nommée « theBestAction », il me suffit de changer l’invocation du composant comme ceci pour que tout fonctionne à nouveau :


{{#bootstrap-table deleteAction="deleteAll" addAction="theBestAction"}}

Une dernière chose, vous avez sans doute remarqué la balise {{yield}} dans le template du composant. Cette balise permet de définir ou sera placé le code compris entre les balises du composant. Dans le cas de notre composant bootstrap-table, il s’agit du code html de la table.

Le composant bootstrap-table est très simple dans sa version actuelle. Il peut être facilement amélioré en créant la table de toute pièce dans le template du composant au lieu de devoir la définir entre les balises {{#bootstrap-table}} et {{/bootstrap-table}}. On pourrait aussi rajouter des fonctionnalités de glisser-déposer pour réorganiser la table ou des filtres sur le contenu.

Les composants dans Embers est un sujet extrêmement riche qui mériterait un tutoriel entier pour être traité. J’en ferais sans doute un plus tard. Je vous laisse digérer ce chapitre assez dense et je vous retrouve pour la 6ème partie qui devrait clore la partie administration des 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.