0

以下のような JSON 構造があります。

"markers": {
   "Lifestyle" : [
      {"Name1" : "Something"},
      {"Name2" : "Something"}
   ],  
   "Transport" : [
      {"Name1" : "Something"},
      {"Name2" : "Something"}
   ]

上記の JSON を使用して、リスト項目がネストされたメニューを作成したいと考えています。

<ul id="menu">
   <li class="Lifestyle">Lifestyle
      <ul class="sub-cat">
         <li>Something</li>
         <li>Something</li>
      </ul>
   </li>
   <li class="Transport">Transport
      <ul class="sub-cat">
         <li>Something</li>
         <li>Something</li>
      </ul>
   </li>
</ul>

プロパティの名前を抽出するヘルパー関数を追加しようとしましたが、サブカテゴリを追加する方法がわかりません。アドバイスをいただければ幸いです。

編集：コードを追加

Handlebars.registerHelper('getCategory',function(object) {
                var categories = [];
                for(var x in object) {
                    categories.push(x);
                }
                console.log(categories);
                return categories;
            });

これはカテゴリ名を返すだけです。同じヘルパーを使用して HTML を返すことができることはわかっていますが、ネストされた構造を追加する方法がわかりません。

4

2 に答える 2

3

{{@key}}反復する場合に使用できます。

于 2014-03-14T00:47:37.163 に答える
2

あなたの場合、ヘルパーはオブジェクトを (キー、値) ペアのリストに変換するイテレータ1になります。ヘルパーは HTML を返す必要があることに注意してください。

// context : object you wish to transform
// options.fn will contain the HTML block
Handlebars.registerHelper('pairs', function(context, options) {
    var cells = [], html, k;
    for (k in context) {
        if (context.hasOwnProperty(k)) {
            html = options.fn({
                key: k,
                value: context[k]
            }); 
            cells.push(html);
        }
    }
    return cells.join('');
});

テンプレートは次のようになります

<ul id="menu">
   {{#pairs .}}
   <li class="{{key}}">{{key}}
      <ul class="sub-cat">
      {{#each value}}
      {{#pairs .}}
          <li>{{key}}: {{value}}</li>
      {{/pairs}}
      {{/each}}
      </ul>
   </li>
    {{/pairs}}
</ul>

ネストされたレベルは、配列内の基本データであるため、ペアに変換される前に each ヘルパーを通過する必要があります。

最後に、Fiddle http://jsfiddle.net/hnrQC/でこのコードの動作を確認してください。

1ハンドルバーのブロック ヘルパー: 単純な反復子を参照してください。

于 2013-02-16T16:44:17.583 に答える