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/