Mustache可以迭代顶层数组吗？

Question

我的对象长这样：

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

我希望使用mustache模板将其转换为如下内容：

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

但是如何实现呢？我真的必须先将其混合成类似这样的形式吗？

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

- greim

Answer 1

你可以像这样做...

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

- Dan Jordan

---

实际上，模板应该放在第一位：Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']); - Kai Carver

我该如何获取数组的第二个元素？我正在尝试使用mustache.js做{{.1}}，但它不起作用。 - dessalines

NM，我搞明白了：你可以忽略这些点号: 所以{{1}}或者如果你想要进行逻辑检查，那么{{#1}}任何内容{{/1}}。 - dessalines

这些特性有没有文件记录？我在mustache（5）中没看到{{.}}、{{1}}或类似的东西。 - Daniel Lubarov

注意：Hogan不支持顶级数组：https://github.com/twitter/hogan.js/issues/74。请使用带有属性的解决方案：https://dev59.com/Dmw15IYBdhLWcg3wmM19#8360440。 - mems

Java实现Mustache的解决方案：https://stackoverflow.com/questions/58235839 - J. Doe

Answer 2

今天早上我也遇到了同样的问题，经过一番尝试，我发现可以使用{{.}}来引用数组的当前元素：

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

- Andy Hull

---

#yourList变量的名称来自哪里？您能展示一下实际渲染的JavaScript示例吗？ - iwein

你甚至不需要使用"yourList"，这里也可以直接使用"."： Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']); - Kai Carver

请注意，只有在您想要不易读的模板时才进行此操作。虽然不是“必需”的，但被接受的答案是更易读的解决方案。 - timoxley

有人知道为什么这些信息在文档中没有被提及吗？http://mustache.github.io/mustache.5.html - Josh

我希望这个在文档中有提到！ - Andy

Answer 3

在@danjordan的答案基础上，以下代码可以实现您的需求:

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

返回：

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

- Kai Carver

---

它只适用于数组，而不适用于对象，对于 {a:'foo',b:'bar',c:'baz'} 是不可能的...在迭代对象时如何进行匿名引用？ - Peter Krauss

Answer 4

以下是在模板中呈现多维数组的示例： 示例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

- Bhupender Keswani

Answer 5

一个名为Strengths的数组的最简单解决方案：

{
   "ViewModel": 
    {
       "StrengthsItems": 
        {
           "Strengths": ["Dedicated", "Resourceful", "Professional", "Positive"]
        }
    }
}

对我而言完美运行的代码如下：

{{#ViewModel.StrengthsItems}}
    <p class="p4">{{Strengths}}</p>
{{/ViewModel.StrengthsItems}}

- Shoaib Khalil

Answer 6

我不认为Mustache能做到这一点！（令人惊讶）你可以遍历对象列表，然后访问每个对象的属性，但似乎无法遍历简单值列表！

因此，您必须将列表转换为：

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

然后你的模板将是：

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

在我看来，这似乎是Mustache的一个严重问题 -- 任何模板系统都应该能够循环遍历一个简单值列表！

- Nick Perkins

---

你只需要使用{{.}}。请看我下面的回答。 - Andy Hull

踩票是误导性的。这个答案是正确的，因为{{.}}不是mustache标准的一部分，尽管它被一些实现支持。没有可移植的方法来做到这一点。 - Yefu

这个是正确的，对于多维渲染非常有用。请看我下面的例子。 - Bhupender Keswani