是否有内置的方法来循环对象的属性？

Question

是否有 Mustache / Handlebars 方式循环访问 object 属性？

那么，

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，因此不再需要外部助手。

如何使用它

对于数组：

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

对于对象：

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

请注意，只有传递 hasOwnProperty 测试将被枚举。

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

编辑：车把现在有一个内置的方法来实现这一点；请参阅上面的所选答案。
使用普通 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

Answer 4

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

Answer 5

@Amit 的答案很好，因为它适用于 Mustache 和 Handlebars。

至于仅限车把的解决方案，我见过一些，我喜欢 https://gist.github.com/1371586 最好。

• 它允许您迭代对象文字，而不必先重构它们，并且
• 它使您可以控制所谓的关键变量。对于许多其他解决方案，您必须小心使用名为 'key' 或 'property' 等的对象键。

Answer 6

代码的顺序显示特定字段

感谢 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

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

顺序可能是随机的 - 这是一张地图）
如果您知道所需的地图元素，这可能会很有用。只需注意虚假值即可。

Answer 8

我使用的是旧版本的车把 1.0.beta.6，我认为在 1.1 - 1.3 期间添加了此功能，因此更新到 1.3.0 解决了该问题，以下是用法： 用法

：

{{#each object}}
  Key {{@key}} : Value {{this}}
{{/people}}