流星和把手#each迭代对象

时间:2013-02-23 00:09:20

标签: javascript meteor handlebars.js

我想将把手#each与不是数组的对象一起使用。

我该怎么做?我需要它仍然使用meteor与#each的特殊功能。

我的目标是:

{
  john: "hello",
  bob: "hi there"
}

我正在尝试获得这样的输出:

<div>hello</div>
<div>hi there</div>

3 个答案:

答案 0 :(得分:37)

您需要在js中使用帮助器来帮助把手理解您的对象:

添加到您的客户端js

Template.registerHelper('arrayify',function(obj){
    var result = [];
    for (var key in obj) result.push({name:key,value:obj[key]});
    return result;
});

在你的html中使用(你也可以使用{{name}}的密钥):

{{#each arrayify myobject}}
   <div title="hover here {{name}}">{{value}}</div>
{{/each}}

myobject来自您的模板:

Template.templatename.helpers({
    myobject : function() { 
      return { john:"hello", bob: "hi there" } 
    }
});

答案 1 :(得分:8)

您可以使用下划线_.map

将对象转换为数组

HTML:

<template name="test">
    {{#each person}}
       <div>{{greeting}}</div>
    {{/each}}
</template>

JS:

Template.test.helpers({
    person : function () { 
        return _.map(object, function(val,key){return {name: key, greeting: val}});
    }
});

答案 2 :(得分:4)

应该注意的是,现在发现这一点的人是在撰写本文时在Meteor中声明Handlebars助手的正确方法是使用UI.registerHelper方法而不是Handlebars.registerHelper。所以上面的帮助器现在看起来应该是这样的:

UI.registerHelper("arrayify", function(obj){
    result = [];
    for (var key in obj){
        result.push({name:key,value:obj[key]});
    }
    return result;
});