小胡子可以迭代顶级数组吗?


109

我的对象看起来像这样:

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

我想使用小胡子模板从中产生以下内容:

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

但是如何?我真的必须首先将其磨成类似这样的东西吗?

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

Answers:


169

你可以这样

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

它也适用于这样的事情...

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

2
实际上模板是第一个: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
Kai Carver

例如,如何获取数组的第二个元素?我正在尝试对mustache.js进行{{.1}},但无法正常工作。
thouliha 2015年

NM,弄清楚了:您可以忽略这些点:因此{{1}}或如果您想进行逻辑检查,那么{{#1}}随便{{/ 1}}
thouliha 2015年

8
这些功能是否记录在某处?我没有在mustache(5)中看到{{.}}{{1}}或类似的东西。
丹尼尔·卢巴罗夫

注意:Hogan不支持顶级数组:github.com/twitter/hogan.js/issues/74。使用具有以下属性的解决方案:stackoverflow.com/a/8360440/470117
mems,

114

今天早上我遇到了同样的问题,经过一番实验后,我发现您可以使用{{。}}来引用数组的当前元素:

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

1
#yourList变量的名称从何而来?您可以显示实际渲染的JavaScript示例吗?
iwein

3
您甚至不需要使用“ yourList”,只需使用“。” 这里也是: Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
凯·卡佛

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

1
请注意,仅当您想要不太可读的模板时才这样做。尽管不是“必需”的,但可接受的答案是更具可读性的解决方案。
timoxley

7
有谁知道为什么文档中没有此信息?mustache.github.io/mustache.5.html
乔什(Josh)

5

以@danjordan的答案为基础,这将满足您的要求:

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

返回:

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

它仅适用于数组,不适用于objcts,不适用于{a:'foo',b:'bar',c:'baz'}...在对象上进行迭代时如何进行匿名引用?
彼得·克劳斯

1

以下是在模板中呈现多维数组的示例:

例子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);

例子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);

为了进行测试,将上面的示例保存在名为“ test.js”的文件中,在命令行中运行以下命令

nodejs test.js

-1

我认为小胡子不能做到这一点!(令人惊讶的是)您可以遍历对象列表,然后访问每个对象的属性,但是似乎无法遍历简单的值列表!

因此,您必须将列表转换为:

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

然后您的模板将是:

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

在我看来,这对于Mustache来说是一个严重的问题-任何模板系统都应该能够遍历一系列简单值!


4
您只需要使用{{。}}。请参阅下面的答案。
安迪·赫尔

2
否决票具有误导性。这个答案是正确的,因为{{。}}不是胡子标准的一部分,尽管某些实现支持它。没有便携式的方法可以做到这一点。
郑也夫

这是正确的,对于多维渲染非常有用。请在下面找到我的示例
Bhupender Keswani
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.