Comment utiliser underscore.js comme modèle de moteur?

Tout ce que vous devez savoir sur le modèle de soulignement est ici . Seulement 3 choses à garder à l'esprit:

1. <% %> - pour exécuter du code
2. <%= %> - pour imprimer une valeur dans le modèle
3. <%- %> - pour imprimer quelques valeurs HTML échappé

C'est tout.

exemple Simple:

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

puis tpl({foo: "blahblah"}) serait rendu à la chaîne de caractères <h1>Some text: blahblah</h1>

<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>

• JsFiddle Merci @PHearst!
• JsFiddle (dernier)
• jsfiddle liste groupée par première lettre (exemple complexe w/ images, appels de fonction, sous-templates) fourche it! avoir un souffle...
• JsFiddle Démonstration de XSS hack noté par @tarun_telang ci-dessous
• JsFiddle Une méthode non-standard pour les sous-modèles

dans sa forme la plus simple vous l'utiliseriez comme:

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'   

si vous allez utiliser un modèle plusieurs fois, vous voudrez le compiler pour qu'il soit plus rapide:

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

personnellement, je préfère la syntaxe du style moustache. Vous pouvez ajuster les marqueurs de token de template pour utiliser des bagues à double boucle:

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

var template = _.template('<li>{{ name }}</li>');

la documentation pour les Templiers est partielle, j'ai regardé la source.

Le _.modèle fonction a 3 arguments:

1. Chaîne texte : la chaîne de modèle de
2. objet données : les données d'évaluation
3. Objet paramètres : paramètres locaux, le _.templateSettings est les paramètres globaux de l'objet

Si non données (ou null), étant donné, qu'un rendu fonction sera retourné. Il a 1 argument:

1. objet données : identique à la données au-dessus

il y a 3 motifs regex et 1 paramètre statique dans les paramètres:

1. RegExp évaluer : "<%code%>" dans la chaîne de modèle de
2. RegExp interpoler : "<%=code%>" dans la chaîne de modèle de
3. RegExp escape :" <%- code%>
4. chaîne de caractères variable : facultatif, Le nom du paramètre données paramètre dans la chaîne de caractères

le code dans un évaluer La section sera simplement évaluée. Vous pouvez ajouter de la chaîne de caractères de cette section avec la commande __ _ p+="mystring" au modèle Évalué, mais cela n'est pas recommandé (ne fait pas partie de l'interface de templating), utilisez la section interpolate à la place de cela. Ce type de section est pour ajouter des blocs comme si ou pour au modèle.

le résultat du code dans la section interpolate sera ajouté au modèle Évalué. Si null est rendu, alors la chaîne vide sera ajoutée.

la escape section échappe html avec _.escape sur la valeur de retour du code donné. Donc c'est similaire à un _.escape (code) dans une section interpolate , mais il s'échappe avec \ les caractères blancs comme \n avant de passer le code au _.échapper . Je ne sais pas pourquoi c'est si important, c'est dans le code, mais ça marche bien avec le interpolate et _.escape -qui n'échappe pas non plus aux personnages de l'espace blanc.

Par défaut données paramètre est passé par un (data){...} déclaration, mais ce genre d'évaluation est beaucoup plus lent que l'évaluation avec la variable nommée. Ainsi, nommer les données avec le paramètre variable est quelque chose de bien...

par exemple:

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

résultats

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

Vous pouvez trouver ici plus d'exemples comment utiliser le modèle et remplacer les paramètres par défaut: http://underscorejs.org/#template

par template loading vous avez beaucoup d'options, mais à la fin vous devez toujours convertir le modèle en chaîne. Vous pouvez le donner comme une chaîne normale comme l'exemple ci-dessus, ou vous pouvez le charger à partir d'une étiquette de script, et utiliser le .html () fonction de jquery, ou vous pouvez le charger à partir d'un fichier séparé avec le TPL plugin de require.js .

une autre option pour construire le dom tree avec laconique au lieu de Templier.

je donne un exemple très simple

1)

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

le résultat serait

Welcome you are at mysite.This has been created by john whose age is 25.

2) Ceci est un modèle

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

C'est html

<div>
  <ul id="list_2"></ul>
</div>

c'est le code javascript qui contient l'objet json et de mettre le modèle dans html

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

avec express c'est si facile. tout ce que vous avez besoin est d'utiliser le consolider "module 151970920" sur le noeud de sorte que vous devez l'installer:

npm install consolidate --save

app.set('view engine', 'html');

app.engine('html', require('consolidate').underscore);

res.render('index', { title : 'my first page'});

npm install underscore --save