使用Mustache遍历JSON数组

Question

我对Mustache还不熟悉，请容忍我 :)

我的JSON中有一个数组

"prop":{"brands":["nike","adidas","puma"]}

如果我有这样的模板

{{#prop}}
 <b>{{brands}}</b>
{{prop}}

我希望您能提供类似以下的内容：

<b>nike</b>
<b>adidas</b>
<b>puma</b>

我知道数组中的元素不是哈希键值对，但我想知道在 mustache 中是否有任何方法可以遍历这些元素。谢谢！

- Liang

Answer 1

这里有一个有效的示例：http://jsfiddle.net/Qa4UX/

基本上，您需要遍历品牌数组。 由于您的数组是原始的且没有对象内部，因此必须像这样引用每个字符串：

{{#props}}
  <ul>
  {{#brands}}
    <li>
    {{#.}}
        <b>{{.}}</b>
    {{/.}}
    </li>
  {{/brands}}
  </ul>
{{/props}}

你还可以在这里找到更多的示例：https://github.com/janl/mustache.js#mustachejs---logic-less-mustache-templates-with-javascript

- peshkira

---

谢谢你的回答，Paul。我理解你的观点并认为这是一个解决方案，但是当我点击“运行”时，似乎无法让fiddle示例产生HTML结果。不过这是一个非常好的解决方案，谢谢！ - Liang

嗨。只是出于好奇：你在jsfiddle中的HTML框架中看到列表了吗？ - peshkira

不，我只看到<div id="testmustache"></div>，而且“运行”链接对它没有任何作用... - Liang

我已经更新了代码片段。问题在于Chrome中未加载mustache，但在Safari中可以正常工作。我更改了mustache源代码，现在应该可以正常工作了。 - peshkira

谢谢您提供的JS-Fiddle。{{#.}}和{{/.}}这部分是必须的/最佳实践吗？我找不到相关文档。 - brclz

@brclz 这是因为它没有被记录在文档中。 - ADJenks

Answer 2

这有效

{{#json.props.brands}}
<h1>{{.}}</h1>
{{/json.props.brands}}

{{.}} 当遍历字符串数组时，可以使用.来引用列表中的当前项。

- Ariel

Answer 3

Mustache是一种无逻辑的模板语言，因此在其中编写自己的迭代或循环是不可能的。但是将JSON转换为Mustache模板非常容易。例如：

var json = '{"prop":{"brands":["nike","adidas","puma"]}}';
var obj = JSON.parse(json);
var data = {brands: obj.prop['brands'].map(function(x){ return {name: x}; })};

为您提供一个与模板兼容的data变量：

{{#brands}}
  <b>{{name}}</b>
{{/brands}}

- Paul

---

谢谢，预先解析JSON似乎是最好的解决方案。 - Liang