cómo imprimir una matriz en la plantilla underscore.js?

Question

Estoy usando la biblioteca de plantillas underscore.js, y no estoy seguro de cómo usar una lógica dentro de una plantilla. por ejemplo, me gustaría imprimir una matriz de etiquetas en una plantilla. ¿Cuál es el mejor enfoque para esto?

Javascript:

bunny_data = { 
    name: "sprinkles", 
    age: 1, 
    tags: ['fuzzy','wuzzy'] 
}; 

bunny_view = $("#bunny-template").html(); 
$(body).append(_.template(bunny_view,bunny_data)); 

Plantilla:

<script type='text/template'> 
    <div> 
    <h5><% = name %></h5> 
    <ul class='tag-list'> 
     <!-- How do I print the tags here? --> 
    </ul> 
    </div> 
</script> 

Answer 1

No necesita encapsular bunny_data como sugiere @Ken, estaba en el camino correcto. Si usted desea o no llamar a las funciones _. o simplemente usar construcciones de JavaScript planas depende de usted, pero no hay construcciones de flujo integradas en las plantillas de Subrayado, para hacer eso solo debe incrustar el código (puede consultar eco o Mustache o algo si quieres eso).

Mi ejemplo es el siguiente (casi lo mismo que es el propietario):

<script type='text/template' id="bunny-template"> 
    <div> 
    <h5><%= name %></h5> 
    <ul> 
     <% for(var tag in tags) { %> 
      <li><%= tags[tag] %></li> 
     <% } %> 
    </ul> 
    </div> 
</script> 

con la siguiente Javascript:

bunny_data = { 
    name: "sprinkles", 
    age: 1, 
    tags: ['fuzzy','wuzzy'] 
}; 

bunny_view = $("#bunny-template").html(); 
$(body).append(_.template(bunny_view, bunny_data)); 

Puede comprobar que se ejecuta here.

(En una nota de preferencia personal, soy un usuario importante de todo el subrayado excepto las plantillas por este motivo, no me siento cómodo con la cantidad de código que debe poner en ellos si tiene un uso más complicado caso).

Answer 2

Parece que no está configurando bunny_data correctamente en su JavaScript.

En lugar de:

$(body).append(_.template(bunny_view,bunny_data)); 

Probar:

$(body).append(_.template(bunny_view, { bunny_data: bunny_data })); 

Imprimir los datos de la plantilla (aviso Quité el espacio después% en <%= name %>):

<script type='text/template'> 
    <div> 
    <h5><%= name %></h5> 
    <ul class='tag-list'> 
     <% _.each(bunny_data, function(bd) { %> 
     <li><%= bd.name %></li> 
     ... 
     <% }); %> 
    </ul> 
    </div> 
</script> 

Esperemos que ayuda

Answer 3

también join hará el truco, por lo que en html que tendrá

<ul> 
    <li><%= tags.join('</li><li>') %></li> 
</ul> 

contrólela jsFiddle.