web-dev-qa-db-ja.com

Handlebars / Mustache-オブジェクトのプロパティをループする組み込みの方法はありますか？

質問のタイトルが言うように、objectプロパティをループする口ひげ/ハンドルバーの方法はありますか？

だから

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
}

？

javascripthandlebars.jsmustache
199
Ben

Handlebars 1.0rc1以降の組み込みサポート

この機能のサポート 追加された はHandlebars.jsに追加されたため、外部ヘルパーはもう必要ありません。

どうやって使うのですか

配列の場合：

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

オブジェクトの場合：

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

hasOwnProperty テストを渡すプロパティのみが列挙されることに注意してください。

417
Jon

実際、ヘルパーとして実装するのは非常に簡単です。

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

編集：ハンドルバーには、これを実現する組み込みの方法があります。上記の 選択した回答 を参照してください。プレーンな口ひげで作業する場合、以下が引き続き適用されます。

Moustacheは、配列内のアイテムを反復処理できます。ですから、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

27
Amit

これは、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 }}
4
flynfish

@Amitの答えは、口ひげとハンドルバーの両方で機能するため、良いです。

Handlebarsのみのソリューションに関しては、いくつか見たことがありますが、 https://Gist.github.com/1371586 のeach_with_keyブロックヘルパーが最高です。

  • これにより、オブジェクトリテラルを最初に再構築することなく反復処理できます。
  • キー変数と呼ばれるものを制御できます。他の多くのソリューションでは、'key'や'property'などの名前のオブジェクトキーの使用に注意する必要があります。
1
mjumbewu

ベンのソリューションのおかげで、私のユースケースは特定のフィールドのみを順番に表示します

オブジェクト付き

コード：

    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
0
vincentlcy

これは、データを事前にフォーマットせずにレンダリング中に取得する、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

（順序はランダムである可能性があります-これはマップです）これは、必要なマップ要素がわかっている場合に役立ちます。偽の値に注意してください。

0
Cuel

私は古いバージョンのハンドルバーの1.0.beta.6を使用していましたが、1.1-1.3の間にこの機能が追加されたと思うので、1.3.0にアップデートすることで問題は解決しました。

使用法：

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