是否有通过对象属性循环的胡子/把手的方式?
所以,
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
}
?
是否有通过对象属性循环的胡子/把手的方式?
所以,
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
}
?
当前回答
感谢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
其他回答
自Handlebars 1.0rc1以来的内置支持
Handlebars.js中已经添加了对该功能的支持,因此不再需要外部helper。
如何使用
数组:
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}
对象:
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}
注意,只有通过hasOwnProperty测试的属性才会被枚举。
这是@Ben的回答,更新后供Ember使用…注意你必须使用烬。get,因为context是作为String传入的。
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 }}
感谢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
我使用的是旧版本1.0.beta。6个把手,我想在1.1 - 1.3的某个时候添加了这个功能,所以更新到1.3.0解决了这个问题,下面是用法:
用法:
{{#each object}}
Key {{@key}} : Value {{this}}
{{/people}}
这是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
(顺序可能是随机的-这是一个地图) 如果你知道你想要的地图元素,这可能会很有用。只是要注意错误的值。