javascript - ejemplos - ¿Puede el bigote iterar una matriz de nivel superior?

array en javascript ejemplos

Question

Mi objeto se ve así:

[''foo'',''bar'',''baz'']

Y quiero usar una plantilla de bigote para producir algo como esto:

"<ul><li>foo</li><li>bar</li><li>baz</li></ul>"

¿Pero cómo? ¿Realmente tengo que convertirlo en algo así primero?

{list:[''foo'',''bar'',''baz'']}

Answer 1

¡No creo que bigote pueda hacer esto! (sorprendentemente) Puede iterar sobre una lista de objetos, y luego acceder a los atributos de cada objeto, ¡pero parece que no puede iterar sobre una simple lista de valores!

Entonces, debes transformar tu lista en:

[ {"value":"foo"},{"value":"bar"},{"value":"baz"} ]

y luego tu plantilla sería:

<ul>
{{#the_list}}
<li>{{value}}</li>
{{/the_list}}
</ul>

Para mí, esto parece ser un problema grave con Moustache: ¡cualquier sistema de plantillas debería poder recorrer una lista de valores simples!

Answer 2

Basándose en la respuesta de @danjordan, esto hará lo que quieras:

Mustache.render(''<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>'',[''foo'',''bar'',''baz'']);

regresando

<ul><li>foo</li><li>bar</li><li>baz</li></ul>

Answer 3

Los siguientes son los ejemplos para renderizar una matriz multidimensional en una plantilla:

Ejemplo 1

''use strict'';
var Mustache = require(''mustache'');
var view = {test: ''div content'', multiple : [''foo'', ''bar''], multiple_2 : [''hello'', ''world'']};
var template = ''<div>{{test}}</div><ul>{{#multiple}}<li>{{.}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{.}}</li>{{/multiple_2}}</ul>'';
var output = Mustache.render(template, view);
console.log(output);

Ejemplo 2

''use strict'';
var Mustache = require(''mustache'');
var view = {test: ''div content'', multiple : [{name: ''foo'', gender: ''male''}, {name: ''bar'', gender: ''female''}], multiple_2 : [{text: ''Hello'', append: ''**'', prepend: ''**''}, {text: ''World'', append: ''**'', prepend: ''**''}]};
var template = ''<div>{{test}}</div><ul>{{#multiple}}<li>Hello my name is {{name}}. And I am {{gender}}</li>{{/multiple}}</ul><ul>{{#multiple_2}}<li>{{prepend}}_{{text}}_{{append}}</li>{{/multiple_2}}</ul>'';
var output = Mustache.render(template, view);
console.log(output);

Para ejecutar la prueba, guarde los ejemplos anteriores en el archivo llamado ''test.js'', ejecute el siguiente comando en la línea de comando

nodejs test.js

Answer 4

Puedes hacerlo así ...

Mustache.render(''<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>'', [''foo'',''bar'',''baz'']);

También funciona para cosas como esta ...

var obj = [{name: ''foo''}, {name: ''bar''}];
var tmp = ''<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>'';
Mustache.render(tmp, obj);

Answer 5

Tuve el mismo problema esta mañana y después de un poco de experimentación descubrí que puedes usar el {{.}} Para referirte al elemento actual de una matriz:

<ul>
{{#yourList}}
<li>{{.}}</li>
{{/yourList}}
</ul>