正如问题的标题所说，是否有一种循环对象属性的胡须/把手方式？
所以与
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
}
然后我可以在模板引擎中做一些相当于
for(var prop in o)
{
// with say, prop a variable in the template and value the property value
}
?
Handlebars/Mustache - 是否有内置的方法来循环遍历对象的属性？
IT技术
javascript
handlebars.js
mustache
2021-02-07 13:51:37
6个回答
自 Handlebars 1.0rc1 以来的内置支持
Handlebars.js 中已添加对此功能的支持，因此不再需要外部帮助程序。
如何使用它
对于数组：
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}
对于对象：
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}
请注意，只有通过hasOwnProperty测试的属性才会被枚举。
作为助手实际上很容易实现：
Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
for(var prop in context)
{
ret = ret + options.fn({property:prop,value:context[prop]});
}
return ret;
});
然后像这样使用它：
{{#eachProperty object}}
{{property}}: {{value}}<br/>
{{/eachProperty }}
编辑：Handlebars 现在有一个内置的方法来完成这个；请参阅上面选择的答案。使用普通 Mustache 时，以下内容仍然适用。
Mustache 可以遍历数组中的项目。所以我建议创建一个单独的数据对象，其格式设置为 Mustache 可以使用的方式：
var o = {
bob : 'For sure',
roger: 'Unknown',
donkey: 'What an ass'
},
mustacheFormattedData = { 'people' : [] };
for (var prop in o){
if (o.hasOwnProperty(prop)){
mustacheFormattedData['people'].push({
'key' : prop,
'value' : o[prop]
});
}
}
现在，您的 Mustache 模板将类似于：
{{#people}}
{{key}} : {{value}}
{{/people}}
在此处查看“非空列表”部分：https : //github.com/janl/mustache.js
这是@Ben 的答案，已更新以与 Ember 一起使用...请注意，您必须使用它，Ember.get因为上下文是作为字符串传入的。
Ember.Handlebars.registerHelper('eachProperty', function(context, options) {
var ret = "";
var newContext = Ember.get(this, context);
for(var prop in newContext)
{
if (newContext.hasOwnProperty(prop)) {
ret = ret + options.fn({property:prop,value:newContext[prop]});
}
}
return ret;
});
模板：
{{#eachProperty object}}
{{key}}: {{value}}<br/>
{{/eachProperty }}
@Amit 的回答很好，因为它适用于 Mustache 和 Handlebars。
至于 Handlebars-only 解决方案，我已经看到了一些，我最喜欢https://gist.github.com/1371586 上的each_with_key块助手。
- 它允许您迭代对象字面量而无需先重构它们，并且
- 它使您可以控制所谓的关键变量。对于许多其他解决方案，您必须小心使用名为
'key'、 或'property'等的对象键。