web-dev-qa-db-ja.com

流星とハンドルバー#eachでオブジェクトを反復する

配列ではないオブジェクトでハンドルバー#eachを使用したい。

それ、どうやったら出来るの？ #eachを使用して流星の特別な機能を引き続き使用するために必要です。

私のオブジェクトは次の形式です：

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

私はこのような出力を取得しようとしています：

<div>hello</div>
<div>hi there</div>
javascriptmeteorhandlebars.js
21
Harry

ハンドルバーがオブジェクトを理解できるようにするには、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" } 
    }
});
37
Akshat

アンダースコア_.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}});
    }
});
8
solo999

この記事を書いている現在、MeteorでHandlebarsヘルパーを宣言する正しい方法は、Handlebars.registerHelperではなくUI.registerHelperメソッドを使用しているため、これを見つけた人は注意してください。したがって、上記のヘルパーは次のようになります。

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