八字胡可以迭代顶级数组吗？

我的目标是这样的:

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

我想用一个小胡子模板来制作这样的东西:

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

但要怎么做，我真的要先把它变成这样吗？

{list:['foo','bar','baz']}
77310 次浏览
小开

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

因此，你必须将你的列表转换为:

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

然后你的模板就是:

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

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

小开

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

<ul>
\{\{#yourList}}
<li>\{\{.}}</li>
\{\{/yourList}}
</ul>
小开
最佳答案

你可以这样做..。

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

Building on @danjordan's answer, this will do what you want:

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

返回:

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

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

例子一

'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
小开

对于名为 Strengths的数组，最简单的解决方案是:

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

对我来说有如下魅力:

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

提交答案