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}}

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

PreviousRoutingNextQuelques Liens

Last updated