Le Guide Node.js par Wishtack
  • Le Guide Node.js par Wishtack
  • ECMAScript 6+
  • TypeScript
  • Tools
  • Node.js
    • Pourquoi Node.js ?
    • Modules
    • Global objects
    • Events & Listeners
    • Streams
    • Error Management
  • Express
    • Getting Started
    • Express Generator
    • Middlewares
    • Routing
    • Templating
    • Quelques Liens
  • LoopBack
  • Testing
  • Databases
  • WebSocket
  • Sécurité
Powered by GitBook
On this page
  • Jade (moteur par défaut)
  • EJS (Embedded JavaScript)
  • JSHTML
  • Mustache / Hogan.js.
  • Handlebars.js
  1. Express

Templating

Express est compatible avec de nombreux moteurs de templating JavaScript.

Express est fourni avec les moteurs suivants : Jade, EJS et Mustache.

Jade (moteur par défaut)

Une affaire de goût.

extends layout

block content

    if data
        div.container
            h1= title
            ul
                each person in data
                li= person.name

EJS (Embedded JavaScript)

Syntaxe complexe.

<%- include head.ejs %>

    <% if(data) { %>
        <div class="container">
            <h1> <%= title %> </h1>
            <ul>
                <% data.forEach(function(person){ %>
                <li title="job: <%= person.job %> status: <%= person.status %>">
                <%= person.name %>
                </li>
                <% }); %>
            </ul>
        </div>
    <% } %>

<%- include foot.ejs %>

JSHTML

<html>
<head>
    <title>@locals.title</title>
</head>

<body>

<ul class="Task">
@for(var taskIndex = 0, taskCount = locals.taskList.length; taskIndex < taskCount; taskIndex ++){
    var task = locals.taskList[taskIndex];
    <li class="@(taskIndex % 2 ? "Odd" : "Even")">
    <a href="/task/@task.id">@task.name</a>
    </li>
}
</ul>

</body>
</html>

Mustache / Hogan.js.

Pas de précompilation des templates avec Mustache.

Hogan.js implémente les mêmes fonctionnalités que Mustache avec la précompilation en plus.

{{>head}}

{{#hasData}}
<div>
    <h1> {{title}} </h1>
    <ul>
        {{#data}}
        <li title="job: {{job}} status: {{status}}">
            {{name}}
        </li>
        {{/data}}
    </ul>
</div>
{{/hasData}}

{{>foot}}

Handlebars.js

Précompilation et fonctionnalités supplémentaires par rapport à Mustache.

{{#if data}}
<div>
    <h1> {{title}} </h1>
    <ul>
        {{#data}}
        <li title="job: {{job}} status: {{status}}">
            {{name}}
        </li>
        {{/data}}
    </ul>
</div>
{{/if}}
PreviousRoutingNextQuelques Liens

Last updated 6 years ago

https://www.bearfruit.org/2014/01/20/node-js-template-showdown-5-options-compared/
https://www.bearfruit.org/2014/01/20/node-js-template-showdown-5-options-compared/www.bearfruit.org