Wie verwende ich underscore.js als Template-Engine?

Alles, was Sie über das Unterstrich-Template wissen müssen, ist hier . Nur 3 Dinge zu beachten:

1. <% %> - um Code auszuführen
2. <%= %> - um einen Wert in der Vorlage zu drucken
3. <%- %> - um einige Werte auszudrucken, wurde HTML-Code entfernt

Das ist alles.

Einfaches Beispiel:

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

dann würde tpl({foo: "blahblah"}) in den String <h1>Some text: blahblah</h1> gerendert

<!-- 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 Danke @PHearst!
• JsFiddle (aktuell)
• JsFiddle Liste nach Anfangsbuchstaben gruppiert (komplexes Beispiel mit Bildern, Funktionsaufrufen, Untervorlagen). Spaß haben ...
• JsFiddle Demo des XSS-Hack von @tarun_telang unten
• JsFiddle Eine nicht standardmäßige Methode zum Erstellen von Untervorlagen

In der einfachsten Form würden Sie es wie folgt verwenden:

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

Wenn Sie ein paar Mal eine Vorlage verwenden, möchten Sie diese kompilieren, damit sie schneller ist:

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

Ich persönlich bevorzuge die Mustache-Syntax. Sie können die Token-Marker der Vorlagen so anpassen, dass sie doppelte geschweifte Klammern verwenden:

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

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

Die Dokumentation zum Templating ist unvollständig, ich habe die Quelle angeschaut.

Die Funktion _. Template hat drei Argumente:

1. Zeichenfolge Text : die Vorlagenzeichenfolge
2. Objektdaten : die Bewertungsdaten
3. Objekt Einstellungen : Lokale Einstellungen, die _. TemplateSettings sind die globalen Einstellungen Objekt

Wenn keine Daten (oder null) angegeben sind, wird eine Renderfunktion ausgeführt zurück. Es hat 1 Argument:

1. Objektdaten : Entspricht den obigen Daten

Es gibt 3 Regex-Muster und 1 statischen Parameter in den Einstellungen:

1. RegExp auswerten : "<% code%>" in Vorlagenzeichenfolge
2. RegExp interpolieren : "<% = code%>" in Vorlagenzeichenfolge
3. RegExp escape : "<% - code%>"
4. Zeichenfolge Variable : Optional, der Name des Datenparameters in der Vorlage Zeichenfolge

Der Code in einem Evaluierungsabschnitt wird einfach evaluiert. Sie können Zeichenfolgen aus diesem Abschnitt mit dem Befehl __ p + = "mystring" zur ausgewerteten Vorlage hinzufügen. Dies wird jedoch nicht empfohlen (nicht Teil der Vorlagenschnittstelle) ), verwenden Sie stattdessen den Abschnitt interpolieren. Diese Art von Abschnitt dient zum Hinzufügen von Blöcken wie if oder for zur Vorlage.

Das Ergebnis des Codes im Abschnitt interpolieren wird zur ausgewerteten Vorlage hinzugefügt. Wenn null zurückgegeben wird, wird eine leere Zeichenfolge hinzugefügt.

Der Abschnitt escape escape html mit _. Escape auf den Rückgabewert von der angegebene Code. Also ist es ähnlich wie ein _. Escape (code) in einem interpolieren Abschnitt, aber es entgeht mit \ die Leerzeichen wie \n vor es übergibt den Code an das _. escape . Ich weiß nicht warum das so wichtig ist, es ist im Code, aber es funktioniert gut mit der Interpolation und _.escape - das auch die Leerzeichen nicht überdeckt.

Standardmäßig wird der Parameter data von einem with (data) {...} Anweisung, aber diese Art der Auswertung ist viel langsamer als die Auswertung mit der benannten Variablen. Das Benennen der Daten mit dem variablen Parameter ist also etwas Gutes ...

Zum Beispiel:

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);

ergebnisse

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"

Weitere Beispiele zur Verwendung der Vorlage und zum Überschreiben der Standardeinstellungen finden Sie hier: http://underscorejs.org/#template

Durch das Laden von Vorlagen haben Sie viele Möglichkeiten, aber am Ende müssen Sie die Vorlage immer in einen String konvertieren. Sie können es als normale Zeichenfolge wie im obigen Beispiel angeben, oder Sie können es aus einem Skript-Tag laden und die Funktion .html () von jquery verwenden, oder Sie können es aus einer separaten Datei mit laden das tpl plugin von require.js .

Eine weitere Möglichkeit, den Dom-Baum mit lakonisch zu erstellen, anstatt ein Template zu erstellen.

Ich gebe ein sehr einfaches Beispiel

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); 

Das Ergebnis wäre

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

2) Dies ist eine Vorlage

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

Das ist HTML

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

Dies ist der Javascript-Code, der das json-Objekt und die Vorlage in HTML enthält

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

mit Express ist es so einfach. Alles, was Sie brauchen, ist, das Consolidate Modul auf dem Knoten zu verwenden, damit Sie es installieren müssen:

npm install consolidate --save

dann sollten Sie die Standard-Engine folgendermaßen in eine HTML-Vorlage ändern:

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

registrieren Sie die Unterstreichungsvorlagen-Engine für die HTML-Erweiterung:

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

es ist fertig !

Laden Sie nun zum Beispiel eine Vorlage namens 'index.html':

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

möglicherweise müssen Sie das Unterstreichungsmodul installieren.

npm install underscore --save

Ich hoffe das hat dir geholfen!

Ich wollte eine weitere wichtige Erkenntnis mitteilen.

die Verwendung von <% = variable => würde zu einer Sicherheitsanfälligkeit bei der siteübergreifenden Skripterstellung führen. Daher ist es sicherer, stattdessen <% - variable -> zu verwenden.

Wir mussten <% = durch <% ersetzen, um Cross-Site-Scripting-Angriffe zu verhindern. Nicht sicher, ob dies Auswirkungen auf die Leistung hat

Lodash ist auch das gleiche Schreiben Sie zuerst ein Skript wie folgt:

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

Schreiben Sie nun einige einfache JS wie folgt:

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

Wobei popoup ein div ist, in dem Sie die Tabelle generieren möchten