把手/小胡子 – 是否有内置的方式来循环对象的属性？

正如问题的标题所说，是否有胡须/车把方式循环通过一个对象的属性？

所以

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 } 

？

Answer 1

内置的支持，因为Handlebars 1.0rc1

Handlebars.js 增加了对这个function的支持，所以不再需要外部帮助。

如何使用它

对于数组：

 {{#each myArray}} Index: {{@index}} Value = {{this}} {{/each}} 

对于对象：

 {{#each myObject}} Key: {{@key}} Value = {{this}} {{/each}} 

请注意，只有通过hasOwnPropertytesting的属性才会被枚举。

Answer 2

实际上作为帮手实际上是很容易的：

 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 }} 

Answer 3

编辑：把手现在有一个内置的方式来完成这一点; 看到上面select的答案 。 在使用简单的胡须时，下面仍然适用。

小胡子可以遍历数组中的项目。 所以我build议创build一个独立的数据对象格式化的方式胡须可以使用：

 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] }); } } 

现在，你的小胡子模板将会是这样的：

 {{#people}} {{key}} : {{value}} {{/people}} 

查看这里的“非空列表”部分： https ： //github.com/janl/mustache.js

Answer 4

这是@ Ben的答案更新用于Ember …请注意，您必须使用Ember.get因为上下文作为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 }} 

Answer 5

@阿米特的答案是好的，因为它可以同时在胡子和把手上工作。

就Handlebars唯一的解决scheme，我见过几个，我喜欢在https://gist.github.com/1371586 each_with_key块帮手最好的。

• 它允许你迭代对象文字，而不必先重构它们
• 它可以让你控制你所说的关键variables。 使用许多其他解决scheme时，您必须小心使用名为'key'或'property'对象键。

Answer 6

感谢本的解决scheme，我的使用案例只显示特定的领域

与对象

码：

  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 

Answer 7

这是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 

（顺序可能是随机的 – 这是一个地图）如果你知道你想要的地图元素，这可能是有用的。 只要小心falsy值。