Answers:
添加了对此功能的支持到Handlebars.js,因此不再需要外部帮助器。
对于数组:
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}
对于对象:
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}
请注意,hasOwnProperty
将仅枚举通过测试的属性。
{{#each this}}
。您对术语的选择也很混乱(是什么使一个对象成为“顶级”,而又使另一个不是?什么是“预定义”键?等),因此您可能想重新审视这些概念。
实际上,将其作为助手非常容易实现:
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 }}
编辑:把手现在具有完成此操作的内置方法;请参阅上面选择的答案。使用普通的小胡子时,以下内容仍然适用。
小胡子可以遍历数组中的项目。因此,我建议创建一个单独的数据对象,其格式必须与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的解决方案,我已经看到了一些,并且我最喜欢https://gist.github.com/1371586上的each_with_key
块帮助器。
'key'
或的对象键'property'
,等等。感谢Ben的解决方案,我的用例仅按顺序显示特定字段
与对象
码:
handlebars.registerHelper('eachToDisplayProperty', function(context, toDisplays, options) {
var ret = "";
var toDisplayKeyList = toDisplays.split(",");
for(var i = 0; i < toDisplayKeyList.length; i++) {
toDisplayKey = toDisplayKeyList[i];
if(context[toDisplayKey]) {
ret = ret + options.fn({
property : toDisplayKey,
value : context[toDisplayKey]
});
}
}
return ret;
});
源对象:
{ locationDesc:"abc", name:"ghi", description:"def", four:"you wont see this"}
模板:
{{#eachToDisplayProperty this "locationDesc,description,name"}}
<div>
{{property}} --- {{value}}
</div>
{{/eachToDisplayProperty}}
输出:
locationDesc --- abc
description --- def
name --- ghi
这是mustacheJS的辅助函数,无需预先格式化数据,而是在渲染过程中获取数据。
var data = {
valueFromMap: function() {
return function(text, render) {
// "this" will be an object with map key property
// text will be color that we have between the mustache-tags
// in the template
// render is the function that mustache gives us
// still need to loop since we have no idea what the key is
// but there will only be one
for ( var key in this) {
if (this.hasOwnProperty(key)) {
return render(this[key][text]);
}
}
};
},
list: {
blueHorse: {
color: 'blue'
},
redHorse: {
color: 'red'
}
}
};
模板:
{{#list}}
{{#.}}<span>color: {{#valueFromMap}}color{{/valueFromMap}}</span> <br/>{{/.}}
{{/list}}
输出:
color: blue
color: red
(顺序可能是随机的-这是一张地图)如果您知道所需的地图元素,这可能会很有用。只是提防虚假的价值观。