Sails.js – Générer vos vues avec EJS !

sails

La vue (V de MVC) est le côté client de notre application. Elle permet d’afficher du contenu à l’utilisateur.

Par défaut, Sails.js utilise le moteur de template EJS. Ce moteur de template va donc nous permettre de structurer nos pages avec du HTML. Rien de plus classique !

Créez donc un nouveau fichier dans le dossier Views de votre application. Attention à l’extension : .ejs

Ensuite, ajoutez-y du HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Articles</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Les articles</h1>
</body>
</html>

Nous allons créer une nouvelle route qui mènera vers cette vue. Nous allons vouloir lister nos articles dans cette vue. Créez donc cette nouvelle route :

  '/blog' : {
    controller: 'ArticleController',
    action: 'getArticle',
  },

Puis, ajoutez la méthode getArticle() à votre contrôleur :

getArticle: function(req, res) {
    res.view( 'articles' );
}

Petite nouveauté ici : la méthode view(). Elle permet tout simplement de générer la vue passée dans le premier paramètre. Ici, nous lui indiquons « articles » pour que notre vue articles.ejs soit générée.

Après avoir sauvegardé vos fichiers et redémarré votre serveur, rendez-vous à l’adresse : http://localhost:1337/blog

Notre vue s’affiche correctement. Bon, jusqu’ici elle ne fait pas grand-chose, mais nous allons aller plus loin afin qu’elle affiche tout nos articles !

Retournons dans notre contrôleur. Nous allons modifier la méthode getArticle() :

getArticle: function(req, res) {
    	Article.find({}, function(err, found){
        			res.view( 'articles', {articles: found} );
    		});
}

Dans notre méthode, nous utilisation la Query Method find() sur notre modèle Article. Cette méthode permet de trouver et de retourner tous les enregistrements de notre modèle.

Ici, le premier paramètre de notre méthode est un tableau vide car nous ne filtrons rien. Nous souhaitons récupérer la totalité de nos articles. Le second paramètre est la fonction de callback qui prend deux paramètres : err, qui contient l’erreur s’il y en a une, et found, qui est un tableau qui contient l’ensemble des enregistrements retournés par la méthode find();

Enfin, le callback fait appel à la méthode view() afin de générer la vue. Nous gardons le premier paramètre mais nous ajoutons un second paramètre qui est un tableau de variables.

Ce tableau de variables peut en contenir autant qu’on souhaite. Ce seront les variables que nous pourront utiliser dans notre vue. Ici, la variable de la vue articles prend la valeur de la variable du contrôleur found.

Il ne vous reste plus que la vue à modifier :

<!DOCTYPE html>
<html>
<head>
    <title>Articles</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Les articles</h1>
    <ul>
        <% articles.forEach(function(art){ %>
            <li>
                <h2><%= art.titre %></h2>
                <p><%= art.content %></p>
            </li>
        <% }); %>
    </ul>
</body>
</html>

Voici la particularité du moteur de template EJS : Les balises pour écrire du Javascript.

  • <% : Permets d’écrire du Javascript.
  • <%= : Permets d’afficher le contenu d’une variable Javascript
  • <%- : Permets d’afficher le contenu d’une variable Javascript sans encodage. Utile pour interpréter du HTML dans le DOM.

Nous utilisons donc la méthode forEach() sur notre variable articles, qui est un tableau. Cette méthode permet de boucler sur chaque occurrence du tableau, comme en PHP !

Une fois vos fichiers sauvegardés et votre serveur redémarré, retournez à la page http://localhost:1337/blog. Vous devriez voir vos articles listaient !

Au début, l’utilisation d’EJS peut être quelque peu déroutante, mais avec un peu de pratique, on prend vite l’habitude d’utiliser les balises spécifiques d’EJS.

17 réflexions au sujet de « Sails.js – Générer vos vues avec EJS ! »

  1. Petersg83

    Je ne tombe que maintenant sur ce blog et je le trouve super ! Je n’ai trouvé aucun autre tuto qui expliquait aussi bien comment sails.js fonctionne ! En plus le site est très beau !
    Alors voilà ma question : pourquoi avez vous arrêté ?!!
    Allez-vous reprendre un jour ?

    Répondre
    1. Simon NowisSimon Nowis Auteur de l’article

      Bonjour Petersg83,
      Merci beaucoup pour tes compliments ! 🙂

      Nous n’avons pas arrêté, nous manquons juste de temps pour nous consacré pleinement à Boot Your Brain. Mais nous espérons nous y remettre au plus vite ! 🙂

      Répondre
  2. Asman

    Bonjour Ms SIMON;
    Voila j’ai fouiller dans tous le réseau pour trouver un tuto sur sailsjs et seulement votre article qui explique méthodiquement ce framework. je vous remercie infiniment sur ce travail, je vous souhaite un bon retour pour continuer les étapes suivantes.

    Répondre
    1. Simon NowisSimon Nowis Auteur de l’article

      Merci pour ton commentaire Asman ! 🙂
      Je compte me remettre sur Sails.js prochainement et refaire de nouveaux tutoriels à ce sujet. N’hésite pas à repasser prochainement 😉

      Répondre
  3. Youyou

    Bonjour, merci pur ce tuto! J’ai vu sails.js en stage mais je n’avais jamais commencer une appli depuis le début, du coup ça m’a été très utile.
    Bonne continuation 🙂

    Répondre
  4. jr_2k

    Je ne sais comment te remercier,

    Merci pour chaque minutes prises pour écrire ce beau tuto…

    ce tuto m’a permis de voir plus claire le fonctionnement de Sails, vous savez avec la theorie parfois tout semble trop imaginaire…

    Merci encore…

    Répondre
    1. Simon NowisSimon Nowis Auteur de l’article

      Hello jr_2k,

      Oui c’est vrai que parfois la théorie ne suffit pas du tout pour avancer. Ravis d’avoir pu t’aider 🙂

      Répondre
  5. jr_2k

    !!! Tu sais expliquer, avec de la rigolade…  » jolie erreur… » j’ai ri en codant.

    ça détend, c’est très bien…

    Merci encore. On compte sur toi pour d’autre tutos

    Répondre
  6. juliowilly

    Merci beaucoup pour ce tuto. Après plusieurs recherche sur le web c’est le seul que j’ai pu trouvé qui m’ait vraiment aidé. Vivement la suite. On l’attend toujours ;).

    Répondre

Laisser un commentaire

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