Czy wąsy mogą iterować tablicę najwyższego poziomu?

109

Mój obiekt wygląda tak:

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

I chcę użyć szablonu wąsów, aby stworzyć z niego coś takiego:

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

Ale jak? Czy naprawdę muszę najpierw wmieszać go w coś takiego?

{list:['foo','bar','baz']}
Greim
źródło

Odpowiedzi:

169

Możesz to zrobić w ten sposób ...

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

Działa również w przypadku takich rzeczy ...

var obj = [{name: 'foo'}, {name: 'bar'}];
var tmp = '<ul>{{#.}}<li>{{name}}</li>{{/.}}</ul>';
Mustache.render(tmp, obj);
Dan Jordan
źródło
2
właściwie szablon jest pierwszy: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver
Jak uzyskać na przykład drugi element tablicy? Próbuję zrobić {{.1}} z mustache.js i nie działa.
thouliha
NM, zorientowałem się: możesz po prostu zignorować kropki: więc {{1}} lub jeśli chcesz sprawdzić logikę, {{# 1}} cokolwiek {{/ 1}}
thouliha
8
Czy te funkcje są gdzieś udokumentowane? Nie widzę {{.}}, {{1}}ani niczego podobnego w wąsach (5).
Daniel Lubarov
Uwaga: tablica najwyższego poziomu nie jest obsługiwana przez Hogan: github.com/twitter/hogan.js/issues/74 . Użyj rozwiązania z właściwością: stackoverflow.com/a/8360440/470117
mems
115

Miałem ten sam problem dziś rano i po krótkich eksperymentach odkryłem, że możesz użyć {{.}}, Aby odnieść się do bieżącego elementu tablicy:

<ul>
  {{#yourList}}
  <li>{{.}}</li>
  {{/yourList}}
</ul>
Andy Hull
źródło
1
Skąd pochodzi nazwa zmiennej #yourList? czy możesz pokazać próbkę javascript rzeczywistego renderowania?
iwein
3
nie musisz nawet używać „yourList”, możesz po prostu użyć „”. tutaj też: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver
JavaScript będzie wyglądał następująco Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
Dan Jordan
1
Uwaga, rób to tylko wtedy, gdy chcesz mniej czytelne szablony. Przyjęta odpowiedź, choć nie „wymagana”, jest bardziej czytelnym rozwiązaniem.
timoxley
7
Czy ktoś wie, dlaczego w dokumentacji brakuje tych informacji? moustache.github.io/mustache.5.html
Josh,
5

Opierając się na odpowiedzi @ danjordan, zrobisz to, co chcesz:

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

powracający:

<ul><li>foo</li><li>bar</li><li>baz</li></ul>
Kai Carver
źródło
Działa tylko dla tablic, a nie dla obiektów, niemożliwe dla {a:'foo',b:'bar',c:'baz'}... Jak wykonywać anonimowe odwołania podczas iteracji po obiektach?
Peter Krauss,
1

Poniżej znajdują się przykłady renderowania wielowymiarowej tablicy w szablonie:

Przykład 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);

Przykład 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);

W przypadku uruchomienia testowego zapisz powyższe przykłady w pliku o nazwie „test.js”, uruchom następujące polecenie w wierszu poleceń

nodejs test.js
Bhupender Keswani
źródło
-1

Nie sądzę, że wąsy mogą to zrobić! (zaskakujące) Możesz iterować listę obiektów, a następnie uzyskać dostęp do atrybutów każdego obiektu, ale nie możesz iterować po prostej liście wartości!

Musisz więc przekształcić swoją listę w:

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

a wtedy twój szablon będzie wyglądał następująco:

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

Wydaje mi się, że to poważny problem z Mustache - każdy system szablonów powinien być w stanie zapętlić listę prostych wartości!

Nick Perkins
źródło
4
Wystarczy użyć {{.}}. Zobacz moją odpowiedź poniżej.
Andy Hull
2
Głosy w dół są mylące. Ta odpowiedź jest poprawna, ponieważ {{.}} Nie jest częścią standardu wąsów, chociaż jest obsługiwany przez niektóre implementacje. Nie ma przenośnego sposobu, aby to zrobić.
Yefu,
ten jest właściwy i bardzo przydatny do renderowania wielowymiarowego. Proszę znaleźć mój przykład jak poniżej
Bhupender Keswani