javascript - remove - ¿Cómo usar underscore.js como motor de plantillas?

underscore merge

Question

Estoy tratando de aprender sobre los nuevos usos de javascript como lenguaje de servidor y como lenguaje funcional. Hace unos días escuché sobre node.js y el framework express. Entonces vi sobre underscore.js como un conjunto de funciones de utilidad. Vi esta pregunta en stackoverflow . Dice que podemos usar underscore.js como motor de plantillas. cualquiera sabe buenos tutoriales sobre cómo usar underscore.js para las plantillas, especialmente para los principiantes que tienen menos experiencia con javascript avanzado Gracias

Answer 1

En su forma más simple lo usarías como:

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

Si va a utilizar una plantilla varias veces, querrá compilarla para que sea más rápida:

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

Personalmente prefiero la sintaxis estilo bigote. Puede ajustar los marcadores de token de la plantilla para usar llaves dobles:

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

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

Answer 2

Estoy dando un ejemplo muy 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); 

El resultado sería

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

2) Esta es una plantilla

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

Esto es html

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

Este es el código javascript que contiene el objeto json y pone la plantilla 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}));
  });

Answer 3

La documentación para las plantillas es parcial, he visto la fuente.

La función _.template tiene 3 argumentos:

1. Texto de cadena: la cadena de plantilla
2. Datos de objeto: los datos de evaluación.
3. Configuración de objeto: configuración local, el _.templateSettings es el objeto de configuración global

Si no se proporcionan datos (o nulos), se devolverá una función de representación. Tiene 1 argumento:

1. Datos del objeto: igual que los datos anteriores

Hay 3 patrones de expresiones regulares y 1 parámetro estático en la configuración:

1. RegExp evalúa : "<% code%>" en la cadena de la plantilla
2. Interpolar RegExp: "<% = código%>" en la cadena de la plantilla
3. RegExp escape : "<% - code%>"
4. Variable de cadena: opcional, el nombre del parámetro de datos en la cadena de plantilla

El código en una sección de evaluación será simplemente evaluado. Puede agregar una cadena de esta sección con el comando __p + = "mystring" a la plantilla evaluada, pero esto no se recomienda (no es parte de la interfaz de plantillas), use la sección de interpolar en lugar de eso. Este tipo de sección es para agregar bloques como if o for a la plantilla.

El resultado del código en la sección de interpolar se agregará a la plantilla evaluada. Si se devuelve un valor nulo, se agregará una cadena vacía.

La sección de escape escapa de html con _.escape en el valor de retorno del código dado. Así que es similar a un _.escape (código) en una sección de interpolación , pero se escapa con / los espacios en blanco como / n antes de pasar el código al _.escape . No sé por qué es tan importante, está en el código, pero funciona bien con interpolar y _.escape , que no escapa a los caracteres de espacio en blanco, también.

Por defecto, el parámetro de datos se pasa por una instrucción with (data) {...} , pero este tipo de evaluación es mucho más lento que la evaluación con la variable nombrada. Así que nombrar los datos con el parámetro variable es algo bueno ...

Por ejemplo:

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

resultados

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"

Puede encontrar aquí más ejemplos de cómo usar la plantilla y anular la configuración predeterminada: here

Al cargar la plantilla, tiene muchas opciones, pero al final siempre tiene que convertir la plantilla en una cadena. Puede asignarlo como una cadena normal, como en el ejemplo anterior, o puede cargarlo desde una etiqueta de script y usar la función .html() de jquery, o puede cargarlo desde un archivo separado con el complemento tpl de require.js .

Otra opción para construir el árbol de dom con laconic lugar de plantillas.

Answer 4

Lodash también es el mismo Primero escribe un guión como sigue:

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

Ahora escribe algunos JS simples como sigue:

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

Donde popoup es un div donde quieres generar la tabla

Answer 5

Quería compartir un hallazgo más importante.

el uso de <% = variable => resultaría en una vulnerabilidad de secuencias de comandos entre sitios. Así que es más seguro usar <% - variable -> en su lugar.

Tuvimos que reemplazar <% = con <% - para evitar ataques de scripts entre sitios. No estoy seguro, si esto tendrá algún impacto en el rendimiento

Answer 6

Todo lo que necesitas saber sobre la plantilla de subrayado está here . Solo 3 cosas a tener en cuenta:

1. <% %> - para ejecutar algún código
2. <%= %> - para imprimir algún valor en la plantilla
3. <%- %> - para imprimir algunos valores HTML escapados

Eso es todo sobre eso.

Ejemplo simple:

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

entonces tpl({foo: "blahblah"}) se representará en la cadena <h1>Some text: blahblah</h1>

Answer 7

con express es muy facil todo lo que necesita es usar el módulo de consolidación en el nodo, por lo que necesita instalarlo:

npm install consolidate --save

entonces deberías cambiar el motor predeterminado a la plantilla html de esta forma:

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

Registre el motor de plantillas de subrayado para la extensión html:

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

está hecho !

Ahora para cargar, por ejemplo, una plantilla llamada ''index.html'':

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

quizás necesite instalar el módulo de subrayado.

npm install underscore --save

¡Espero que esto te ayude!

Answer 8

<!-- 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 Gracias @PHearst!
• JsFiddle (más reciente)
• Lista de JsFiddle agrupada por la primera letra (ejemplo complejo con imágenes, llamadas a funciones, sub-plantillas) ¡bifurca! tener una explosión...
• JsFiddle demostración de JsFiddle del hack XSS notada por @tarun_telang a continuación
• JsFiddle Un método no estándar para hacer sub-plantillas