回答:
この機能のサポートがHandlebars.jsに追加されたため、外部ヘルパーは必要ありません。
アレイの場合：
{{#each myArray}}
Index: {{@index}} Value = {{this}}
{{/each}}オブジェクトの場合：
{{#each myObject}}
Key: {{@key}} Value = {{this}}
{{/each}}hasOwnPropertyテストに合格するプロパティのみが列挙されることに注意してください。
{{#each this}}ます。用語の選択もわかりにくいので（あるオブジェクトを「トップレベル」にし、別のオブジェクトをそうしないのか？「定義済み」のキーとは正確に何なのかなど）、これらの概念を再検討する必要があるかもしれません。
実際、ヘルパーとして実装するのは非常に簡単です。
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 }}編集：ハンドルバーには、これを実現する組み込みの方法があります。上記の選択した回答を参照してください。プレーンな口ひげを使用する場合、以下が引き続き適用されます。
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
これは、Emberで使用するために更新された@Benの回答です。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 }}@Amitの答えは、MustacheとHandlebarsの両方で機能するので良いです。
ハンドルバーのみのソリューションに関しては、いくつか見たことがありますが、https：//gist.github.com/1371586のeach_with_keyブロックヘルパーが最高です。
'key'、や'property'、などの名前のオブジェクトキーの使用に注意する必要があります。ベンの解決策をありがとう、特定のフィールドのみを順番に表示するユースケース
オブジェクト付き
コード：
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これは、データを事前にフォーマットせずに、レンダリング中に取得することなく、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（順序はランダムかもしれません-それはマップです）これはあなたが望むマップ要素を知っているなら便利かもしれません。偽の値に注意してください。