mustache 可以迭代顶级数组吗？答案

【问题标题】：Can mustache iterate a top-level array?mustache 可以迭代顶级数组吗？
【发布时间】：2011-06-29 05:53:55
【问题描述】：

我的对象如下所示：

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

我想使用一个小胡子模板从中生成如下内容：

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

但是怎么做呢？我真的必须先把它变成这样的东西吗？

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

【问题讨论】：

标签： javascript mustache

【解决方案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);

【讨论】：

其实模板是第一位的：Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
如何获取例如数组的第二个元素？我正在尝试用 mustache.js 做 {{.1}}，但它不起作用。
NM，想通了：你可以忽略这些点：所以 {{1}} 或者如果你想进行逻辑检查，那么 {{#1}} 随便{{/1} }
这些功能是否记录在某处？我在 mustache(5) 中没有看到 {{.}}、{{1}} 或类似的东西。
注意：Hogan 不支持顶级数组：github.com/twitter/hogan.js/issues/74。使用带有属性的解决方案：stackoverflow.com/a/8360440/470117

【解决方案2】：

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

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

【讨论】：

#yourList 变量的名称从何而来？你能展示一个实际渲染的 javascript 示例吗？
你甚至不需要使用“yourList”，只需使用“.”即可。也在这里：Mustache.render('<ul>{{#.}}<li>{{.}}</li>{{/.}}</ul>',['foo','bar','baz']);
JavaScript 将是 Mustache.render('<ul>{{#.}}{{.}}{{/.}}</ul>', {yourList: ['foo','bar','baz']});
注意，只有在你想要可读性较差的模板时才这样做。接受的答案，尽管不是“必需的”，是一个更具可读性的解决方案。
有谁知道为什么文档中没有这些信息？ mustache.github.io/mustache.5.html

【解决方案3】：

以@danjordan 的回答为基础，这将满足您的需求：

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

返回：

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

【讨论】：

它仅适用于数组，不适用于对象，不适用于{a:'foo',b:'bar',c:'baz'}...迭代对象时如何进行匿名引用？

【解决方案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

【讨论】：

【解决方案5】：

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

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

像魅力一样为我工作如下：

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

【讨论】：

【解决方案6】：

我不认为小胡子可以做到这一点！（出奇）您可以遍历对象列表，然后访问每个对象的属性，但您似乎无法遍历简单的值列表！

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

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

然后您的模板将是：

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

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

【讨论】：

您只需要使用 {{.}}。请参阅下面的答案。
反对票具有误导性。这个答案是正确的，因为 {{.}} 不是 mustache 标准的一部分，尽管某些实现支持它。没有便携的方法可以做到这一点。
这个是对的，对于多维渲染非常有用。请在下面找到我的示例