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.nameEJS (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/
Last updated