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

时间:2012-01-30 02:42:54

标签: javascript handlebars.js mustache

正如问题的标题所说,是否有胡子/把手循环对象属性?

所以用

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
}

8 个答案:

答案 0 :(得分:416)

自Handlebars 1.0rc1

以来的内置支持

支持Handlebars.js的此功能has been added,因此不再需要外部助手。

如何使用

对于数组:

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

对象:

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

请注意,只会枚举通过hasOwnProperty测试的属性。

答案 1 :(得分:69)

实际上很容易实现作为帮助者:

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

答案 2 :(得分:27)

编辑:车把现在有一种内置的方式来完成这个任务;请参阅上面的selected answer。 使用普通的胡子时,以下仍然适用。

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

答案 3 :(得分: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 }}

答案 4 :(得分:1)

@Amit的答案很好,因为它可以在Mustache和Handlebars中使用。

至于仅使用Handlebars的解决方案,我见过一些,我最喜欢https://gist.github.com/1371586 each_with_key块帮助器。

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

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

(订单可能是随机的 - 这是一张地图) 如果您知道所需的地图元素,这可能很有用。只要注意虚假的价值观。

答案 7 :(得分:0)

我使用的是旧版的import logging.config logging.config.fileConfig(fname='logger.ini') logger = logging.getLogger(__name__) from gevent import monkey monkey.patch_all() from gevent import pywsgi # some logging here http_server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, log=logger) http_server.serve_forever() 车把,我认为在1.1-1.3期间已添加了此功能,因此更新至1.3.0解决了该问题,用法如下:

用法:

1.0.beta.6