是否有通过对象属性循环的胡子/把手的方式?

所以,

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
}

?


当前回答

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

(顺序可能是随机的-这是一个地图) 如果你知道你想要的地图元素,这可能会很有用。只是要注意错误的值。

其他回答

它实际上很容易作为一个helper来实现:

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

我使用的是旧版本1.0.beta。6个把手,我想在1.1 - 1.3的某个时候添加了这个功能,所以更新到1.3.0解决了这个问题,下面是用法:

用法:

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

编辑:车把现在有一个内置的方式来完成这一点;见上面所选的答案。 当使用普通的胡子时,下面的建议仍然适用。

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

现在,你的胡子模板将是这样的:

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

查看“非空列表”部分:https://github.com/janl/mustache.js

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