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

Question

J'essaie d'apprendre de nouvelles utilisations de javascript en tant que langage serveur et langage fonctionnel. Il y a quelques jours, j'ai entendu parler de node.js et du framework express. Puis j'ai vu underscore.js comme un ensemble de fonctions utilitaires. J'ai vu cette question sur stackoverflow . Il est dit que nous pouvons utiliser underscore.js comme moteur de modèle. Quelqu'un connaît-il de bons tutoriels sur la façon d'utiliser underscore.js pour la création de modèles, en particulier pour les débutants qui ont moins d'expérience avec le javascript avancé. Merci

Answer 1

Tout ce que vous avez besoin de 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 un modèle
3. <%- %> - pour imprimer certaines valeurs avec un échappement HTML

C'est tout.

Un exemple simple :

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

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

Answer 2

<!-- 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 la première lettre (exemple complexe avec des images, des appels de fonction, des sous-modèles).
• JsFiddle Démonstration du hack XSS noté par @tarun_telang ci-dessous
• JsFiddle Une méthode non standard pour faire des sous-modèles

Answer 3

Dans sa forme la plus simple, vous l'utiliserez comme suit :

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

Si vous êtes amené à utiliser un modèle plusieurs fois, il est préférable de 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

Je préfère personnellement la syntaxe de style Mustache. Vous pouvez ajuster les marqueurs de jetons du modèle pour utiliser des accolades doubles :

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

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

Answer 4

La documentation pour le templating est partielle, j'ai regardé la source.

Le site _.template a 3 arguments :

1. Chaîne de caractères texte : la chaîne de caractères du modèle
2. Objet données les données d'évaluation
3. Objet paramètres : paramètres locaux, le Réglages du modèle est l'objet des paramètres globaux

Si non données (ou nulle) donnée, qu'une Rendu sera retournée. Elle a 1 argument :

1. Objet données : même que le données au-dessus de

Il y a 3 modèles regex et 1 paramètre statique dans les paramètres :

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

Le code dans un évaluer sera simplement évaluée. Vous pouvez ajouter des chaînes de cette section avec l'option __p+="mystring" au modèle évalué, mais ce n'est pas recommandé (cela ne fait pas partie de l'interface de modélisation), utilisez plutôt la section interpolate. Ce type de section sert à ajouter des blocs comme if ou for au modèle.

Le résultat du code dans le interpoler sera ajoutée au modèle évalué. Si null est donné en retour, alors une chaîne vide sera ajoutée.

Le site s'échapper La section escapes html avec _.escape sur la valeur de retour du code donné. C'est donc similaire à un _.escape(code) dans un interpoler mais il s'échappe avec \ les caractères d'espacement comme \n avant de transmettre le code à l _.escape . Je ne sais pas pourquoi c'est si important, c'est dans le code, mais cela fonctionne bien avec la fonction interpoler et _.escape - qui n'échappe pas les caractères d'espace blanc - aussi.

Par défaut, le données est transmis par un with(data){...} mais ce type d'évaluation est beaucoup plus lent que l'évaluation avec une variable nommée. Donc, nommer la données avec le variable le paramètre est quelque chose de bon...

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 trouverez ici d'autres exemples sur la façon d'utiliser le modèle et de remplacer les paramètres par défaut : http://underscorejs.org/#template

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

Une autre option pour construire l'arbre de dom avec laconique au lieu d'un modèle.

Answer 5

Je donne un exemple très simple

1) var data = {site : "mysite",name : "john",age:25} ;

var template = "Bienvenue, vous êtes sur le site <%=site %>. Celui-ci a été créé par <%=name %> dont l'âge est <%=age%>" ;

var parsedTemplate = _.template(template,data) ;

console.log(parsedTemplate) ;

Le résultat serait

Bienvenue, vous êtes sur le site mysite. Ce site a été créé par John, qui a 25 ans.

2) Il s'agit d'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 le html

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

Voici le code javascript qui contient l'objet json et met le modèle en 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}));
  });