I baffi possono iterare un array di primo livello?


109

Il mio oggetto ha questo aspetto:

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

E voglio usare un modello di baffi per produrre da esso qualcosa del genere:

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

Ma come? Devo davvero trasformarlo in qualcosa di simile prima?

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

Risposte:


169

Puoi farlo così ...

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

Funziona anche per cose come questa ...

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

2
in realtà il modello viene prima: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

Come ottengo, ad esempio, il 2 ° elemento dell'array? Sto provando a fare {{.1}} con moustache.js e non funziona.
thouliha

NM, capito: puoi semplicemente ignorare i punti: quindi {{1}} o se vuoi fare un controllo logico, allora {{# 1}} qualunque cosa {{/ 1}}
thouliha

8
Queste caratteristiche sono documentate da qualche parte? Non vedo {{.}}, {{1}}o qualcosa di simile nei baffi (5).
Daniel Lubarov

Nota: l'array di primo livello non è supportato da Hogan: github.com/twitter/hogan.js/issues/74 . Utilizzare la soluzione con una proprietà: stackoverflow.com/a/8360440/470117
MEMS

115

Ho avuto lo stesso problema questa mattina e dopo un po 'di sperimentazione ho scoperto che puoi usare {{.}} Per fare riferimento all'elemento corrente di un array:

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

1
Da dove viene il nome della variabile #yourList? puoi mostrare un esempio javascript del rendering effettivo?
iwein

3
non hai nemmeno bisogno di usare "yourList", puoi semplicemente usare "." anche qui: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

Il JavaScript sarebbe Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan,

1
Nota, fallo solo se vuoi modelli meno leggibili. La risposta accettata, sebbene non "richiesta", è una soluzione più leggibile.
timoxley

7
Qualcuno sa perché questa informazione è assente dalla documentazione? moustache.github.io/mustache.5.html
Josh,

5

Basandosi sulla risposta di @ danjordan, questo farà quello che vuoi:

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

ritorno:

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

Funziona solo per array non per oggetti, impossibile per {a:'foo',b:'bar',c:'baz'}... Come fare riferimenti anonimi quando iterazione su oggetti?
Peter Krauss

1

Di seguito sono riportati gli esempi per eseguire il rendering di array multidimensionali in un modello:

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

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

Per l'esecuzione di prova, salva gli esempi precedenti nel file chiamato "test.js", esegui il seguente comando nella riga di comando

nodejs test.js

-1

Non credo che i baffi possano farlo! (sorprendentemente) Puoi iterare su un elenco di oggetti e quindi accedere agli attributi di ogni oggetto, ma non riesci a iterare su un semplice elenco di valori!

Quindi, devi trasformare la tua lista in:

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

e quindi il tuo modello sarebbe:

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

Per me, questo sembra un grave problema con Moustache: qualsiasi sistema di modelli dovrebbe essere in grado di scorrere un elenco di valori semplici!


4
Devi solo usare {{.}}. Vedi la mia risposta di seguito.
Andy Hull

2
I voti negativi sono fuorvianti. Questa risposta è corretta in quanto {{.}} Non fa parte dello standard moustache, sebbene sia supportato da alcune implementazioni. Non esiste un modo portatile per farlo.
Yefu

questo è giusto e molto utile per il rendering multidimensionale. Si prega di trovare il mio esempio come di seguito
Bhupender Keswani
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.