Controleurs

Controllers

Les contrôleurs nous donnent le moyen de mettre à jour et de manipuler les données et les vues de l'application; ils fournissent la logique applicative qui définit ce qui doit se produire quand le modèle change (par ex: état, ou les données). Les contrôleurs sont le "C" dans MVC.

Ember fournit un moyen simple de générer des contrôleurs qui seront automatiquement associés avec le bon modèle et les bonnes routes. Il suffit simplement d'utiliser la syntaxe suivante:

ember generate controller nom-de-ma-route

Génerer un contrôleur pour notre affichage de l'heure

Afin d'afficher l'heure dans notre modèle de vue horloge (clock), nous avons besoin d'un contrôleur horloge (clock) qui va spécifier et mettre à jour la variable localTime. En utilisant votre terminal, éxecutez, à la racine du projet, la commande suivante:

ember generate controller clock

Ceci va créer deux nouveaux fichiers:

1. app/controllers/clock.js : un fichier représentant notre controleur qui contient la logique nécessaire à la gestion de notre modèle de vue clock.
2. tests/unit/controllers/clock-test.js : Un fichier de test où l'on peut définir les tests des fonctionnalités du contrôleur.

Ouvrez app/controllers/clock.js. Pour définir la valeur de localTime, nous allons l'ajouter en tant que propriété de Ember.Controller.extend(). Modifiez votre code comme ceci:

import Ember from 'ember';

export default Ember.Controller.extend({
  localTime: new Date().toLocaleTimeString()
});

Toute propriété de notre contrôleur est accessible dans le modèle de vue de ce contrôleur (dans notre cas app/templates/clock.hbs). Nous avons défini la propriété localTime avec  une Date  JavaScript au format chaine de caractère et elle est portée dans le contexte de notre modèle de vue. Ember utilise la correspondance entre le nom de fichier de notre controleur et notre modèle de vue pour transmettre l'information au modèle de vue approprié.

Désormais, en visualisant la page https://localhost:4200/clock, vous devriez voir l'heure locale apparaître, affichée à la place de la propriété {{localTime}}.

Faire que l'horloge se mette à jour chaque seconde

Jusqu'à présent, notre horloge affiche l'heure de l'instant où le controleur à été initialisé — et ne change pas. Ce n'est pas très utile; Nous préfèrerions qu'elle se mette à jour chaque seconde.

Retournons dans notre fichier app/controllers/clock.js et ajoutons quelques méthodes pour gèrer cela. Modifiez votre code comme ceci:

import Ember from 'ember';

export default Ember.Controller.extend({
    init: function() {
        // Mise à jour de l'heure.
        this.updateTime();
    },
 
    updateTime: function() {
        var _this = this;
 
        // Mettre à jour l'heure chaque seconde.
        Ember.run.later(function() {
            _this.set('localTime', new Date().toLocaleTimeString());
            _this.updateTime();
        }, 1000);
    },
 
    localTime: new Date().toLocaleTimeString()
});

Les deux méthodes ajoutées sont:

1. init() est une méthode spéciale dans Ember qui se lance automatiquement à la première initialisation du contrôleur. On peut mettre ici tout le code dont on a besoin; dans notre cas nous executons juste la méthode updateTime().
2. updateTime() utilise Ember.run.later() pour lancer le code contenu dans la fonction apres 1000ms. La fonction définit une nouvelle valeur pour la propriété localTime  (utilisant la méthode set() d'Ember), puis execute la fonction updateTime() une seconde fois, ainsi le temps est mis à jour à chaque nouvelle seconde qui s'écoule.

Maintenant vous devriez voir votre horloge se mettre à jour chaque seconde. Cette démonstration montre comment travailler avec le système de liaison des données entre les contrôleurs et les modèles de vue d'Ember (data-binding) . Si vous modifiez une valeur dans le contrôleur, le modèle, ou une vue qui est reliée à un modèle de vue, le modèle de vue sera automatiquement mis à jour.

Suite

Dans le prochain article, nous allons passer à la vitesse supérieure, en travaillant avec les modèles et le traitement des données dans Ember, pour ajouter le reste des fonctionnalités de l'application. Cette section va aussi permettre de faire évoluer l'application en incluant certaines bibliothèques externes, en vous donnant une idée de comment ajouter de nouvelles dépendances à votre application Ember.