O bigode pode iterar uma matriz de nível superior?


109

Meu objeto se parece com este:

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

E eu quero usar um modelo de bigode para produzir algo assim:

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

Mas como? Eu realmente tenho que mergulhar em algo assim primeiro?

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

Respostas:


169

Você pode fazer assim ...

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

Também funciona para coisas como esta ...

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

2
na verdade, o modelo vem primeiro: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

Como faço para obter, por exemplo, o segundo elemento da matriz? Estou tentando fazer {{.1}} com o mustache.js e não está funcionando.
thouliha

NM, descobri: você pode simplesmente ignorar os pontos: então {{1}} ou se quiser fazer uma verificação lógica, então {{# 1}} qualquer coisa {{/ 1}}
thouliha

8
Esses recursos estão documentados em algum lugar? Não vejo {{.}}, {{1}}ou algo semelhante no bigode (5).
Daniel Lubarov

Observação: a matriz de nível superior não é compatível com Hogan: github.com/twitter/hogan.js/issues/74 . Use a solução com uma propriedade: stackoverflow.com/a/8360440/470117
mems

115

Tive o mesmo problema esta manhã e, após um pouco de experimentação, descobri que você pode usar o {{.}} Para se referir ao elemento atual de uma matriz:

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

1
De onde vem o nome da variável #yourList? você pode mostrar uma amostra em javascript da renderização real?
iwein de

3
você nem precisa usar "suaLista", você pode apenas usar "." aqui também: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

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

1
Observe, apenas faça isso se desejar modelos menos legíveis. A resposta aceita, embora não seja "obrigatória", é uma solução mais legível.
timoxley

7
Alguém sabe porque é que esta informação está ausente da documentação? mustache.github.io/mustache.5.html
Josh

5

Com base na resposta de @danjordan, isso fará o que você quiser:

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

retornando:

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

Funciona apenas para array, não para objetos, impossível para {a:'foo',b:'bar',c:'baz'}... Como fazer referências anônimas ao iterar sobre objetos?
Peter Krauss

1

A seguir estão os exemplos para renderizar uma matriz multidimensional em um modelo:

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

Exemplo 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 executar o teste, salve os exemplos acima no arquivo chamado 'test.js', execute o seguinte comando na linha de comando

nodejs test.js

-1

Não acho que bigode possa fazer isso! (surpreendentemente) Você pode iterar em uma lista de objetos e, em seguida, acessar os atributos de cada objeto, mas parece que você não consegue iterar em uma lista simples de valores!

Então, você deve transformar sua lista em:

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

e então seu modelo seria:

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

Para mim, isso parece um problema grave com o Mustache - qualquer sistema de modelo deve ser capaz de fazer um loop sobre uma lista de valores simples!


4
Você só precisa usar {{.}}. Veja minha resposta abaixo.
Andy Hull

2
Os votos negativos são enganosos. Esta resposta está correta porque {{.}} Não faz parte do padrão do bigode, embora seja suportado por algumas implementações. Não existe uma maneira portátil de fazer isso.
Yefu

este está certo e muito útil para renderização multidimensional. Encontre meu exemplo abaixo
Bhupender Keswani
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.