Vues et modèles de vue

Routes

Les Routes indiquent à l'application quel contenu ou quelle fonctionnalité existe pour une URL donnée. Avec Templates, qui spécifit la structure du contenu qui sera visible pour chaque route, ils forment la base du "V" (Vue) de MVC dans une application Ember. Immaginez les routes comme des 'pages' de votre application.

Ember va gèrer dynamiquement la génération du contenu requis durant la période de construction (build), et appliquer le JavaScript, CSS, etc. qui vont faire marcher ce contenu. Pour récapituler, une route est créee avec la commande suivante:

ember generate route my-route-name

Ajouter la date et l'heure courante

Nous allons commencer par ajouter une 'page' horloge à notre application, pour afficher la date et l'heure courante. Pour créer une nouvelle page, nous devons générer une route — lancez la commande suivante dans votre navigateur, en vérifiant bien que vous êtes dans le répertoire racine de votre projet:

ember generate route clock

Ceci va génerer:

1. app/routes/clock.js: Ce fichier contrôle la route.
2. app/templates/clock.hbs: Un modèle de vue Handlebars qui définit le contenu qui sera affiché pour une URL donnée.
3. tests/unit/routes/clock-test.js : Un fichier de test où vous pouvez définir des tests pour la fonctionnalité liée à votre route.

Le modèle de vue de votre horloge est disponible sur votre serveur de test à l'adresse https://localhost:4200/clock (relancer la commande ember serve si elle n'est pas déjà en cours). Cependant, si vous naviguez à cette URL, vous allez remarquer qu'elle affiche le même message de bienvenu que sur notre page d'accueil (https://localhost:4200). Afin de plutôt afficher l'horaire que ce message, nous allons mettre à jour notre modèle de vue.

Modèle de vue

De nombreux système de modèles HTML existent pour les applications web. Cette tendance fourni de meilleures fonctionnalités que le HTML pur, comme la possibilité d'inclure des variables qui sont mises à jour dynamiquement quand l'état de l'application ou les données changent. Comme expliqué plus tôt dans cette série, Ember utilise Handlebars pour ses modèles de vue.

Mettre à jour le modèle de vue clock

Notre modèle de vue a déja été généré dans app/templates/clock.hbs. Ouvrez-le avec un éditeur de texte et vous allez voir que, par défaut, il contient:

{{outlet}}

Handlebars utilise les accolades pour différencier l'HTML pur de la logique de modèle. Les élements à l'intérieur des accolades — de manière basique — sont des variables pouvant représenter n'importe quelle donnée souhaitée. Actuellement le template n'inclut qu'un message de bienvenue; changeons cela pour inclure une variable qui affiche notre information de date et d'heure.

Remplacez {{outlet}} par la suite:

<h2>Heure courante: <strong>{{localTime}}</strong></h2>

En encapsulant localTime dans ces accolades, notre modèle de vue va savoir qu'il faut remplacer le mot localTime par la valeur que nous allons spécifier.

En retournant sur https://localhost:4200/clock dans le navigateur, you allez remarquer que la page affiche toujours "Bienvenue sur Ember.js", avec en dessous "Heure courante: ". C'est parce que notre message de bienvenue provient de app/templates/application.hbs. Si vous regardez dans ce fichier, vous allez y trouver les deux lignes suivantes:

<h2 id="title">Bienvenue sur Ember.js</h2>

{{outlet}}

Quand n'importe quelle page est affichée par l'utilisateur, on affichera application.hbs, mais en insérant aussi le modèle de notre vue. Nous verrons cela plus en détails dans la partie suivante, ainsi que la façon de se débarrasser de ce message d'accueil par défaut.

Le modèle de vue principal

application.hbs est un modèle de vue particulier ajouté à la création de l'application, qui représente la vue principale de l'application. Ceci est inclut automatiquement afin d'avoir toujours quelque chose d'affiché à la racine de l'application (par exemple. votre-serveur.com/). Quelque soit la "page" que vous visualisez dans votre application, c'est le modèle de vue application.hbs qui est affiché, mais le contenu du modèle de vue de la route correspondante est affiché dans {{outlet}}. Dans le cas de notre route clock, le contenu affiché will sera ce qui existe dans clock.hbs.

Jusqu'à maintenant nous avons vu notre application depuis la route clock, soit https://localhost:4200/clock. Mais vu qu'elle va devenir la seule page/page principale de notre application, il serait bien de la voir apparaitre quand nous allons à la racine de notre domaine.

Donc vous avez déjà un fichier application.hbs, mais ce n'est pas ça — vous allez remarquer qu'il n'y a pas de route application créer pour vous par défaut. Souvent vous allez trouvez qu'un template est tout ce qui est nécessaire pour faire afficher le contenu souhaité. Cependant, si vous souhaitez faire quoi-que-ça soit de plus complexe avec un modèle de vue, vous aurez besoin de mettre cette logique dans une route correspondante.

Generating an application route

Générons une route principale pour notre application en entrant, à la racine de notre projet, la commande ci-dessous:

ember generate route application

import Ember from 'ember';

export default Ember.Route.extend({
    redirect: function() {
        this.transitionTo('clock');
    }
});

Ici nous étendons la fonction par défaut de  Route Ember avec la méthode redirect() qui va transferer toute les requêtes de la racine de notre application vers la route clock en utilisant transitionTo(). Nous serons désormais redirigé sur notre horloge à localhost:4200/clock chaque fois que nous irons sur https://localhost:4200/.

Ajouter des liens vers d'autres affichages

En plus d'afficher l'horloge sur notre page principale (ce que nous allons corriger dans l'article suivant!), nous allons ajouter des liens de navigation qui vont permettre à l'utilisateur de passer de notre vue principale clock à une vue permettant de choisir un nouveau fuseau horaire à ajouter à la vue principale. Ajoutons deux liens dans notre modèle de vue. Une qui va correspondre à notre route existante clock, et une autre reliée à une route timezones que nous allons créer rapidement.

Mettez à jour le contenu du fichier app/templates/application.hbs comme ceci:

<h1 id='title'>Il est 5h00 quelque-part</h1>

<ul>
    <li>{{#link-to 'clock'}}Horloge{{/link-to}}</li>
    <li>{{#link-to 'timezones'}}Gestion des fuseaux horaires{{/link-to}}</li>
</ul>

{{outlet}}

Vous remarquerez la convention Handlebars sur l'utilisation des accolades, similaire à celle pour notre modèle de vue clock. Dans cet example, {{#link-to}} est un outil interne à Handlebars pour créer des liens — il prend un paramètre, la route que vous voulez relier.

Comme nous l'avons évoqué précédemment, {{outlet}} est le moyen qu'utilise Ember pour reserver un espace sur la page destiné au contenu demandé par l'utilisateur. Donc dès que l'on va cliquer sur le lien de la route horloge ou fuseau-horaire, la zone de sortie outlet va automatiquement afficher le contenu du modèle de vue associé à la route.

Si vous retournez voir votre application maintenant, vous remarquerez que la page est blanche. Nous avons perdu notre en-tête "Heure courante:". Nous devons avoir une erreur quelque part dans notre code, donc partons mener une enquête.

Debugging Practice

 Si vous ouvrez l'onglet console des outils de développement, vous devriez voir une erreur en provenance d'Ember:

C'est parce que nous tentons de nous relier à une route fuseau-horaire (timezones) qui n'existe pas encore. Nous nous occuperons de cela dans un prochain article, pour l'instant, afin que nous puissions poursuivre, mettez à jour la ligne en remplaçant simplement

<li>{{#link-to 'timezones'}}Gestion des fuseaux horaires{{/link-to}}</li>

par

<li>Gestion des fuseaux horaires</li>

Vous devriez voir cela:

Suite

Afin d'afficher l'heure actuelle, nous avons besoin de créer un contrôleur horloge afin de définir la valeur de la variable localTime que nous avons dans notre modèle de vue clock.hbs. Ce sera la sujet de notre prochain article.