8

テンプレートで再帰配列を処理する方法がわかりません。handlebarsjsのドキュメントに何も見つかりません。

私のコードがあります：js：

    var branch = [{
                名前： "firstLayerNodeA"、
                has_branch：true、
                ブランチ：[{
                        名前： "secondLayoutNodeA"、
                        has_branch：false
                    }、{
                        名前： "secondLayoutNodeB"、
                        has_branch：true、
                        ブランチ：[{
                                名前： "thirdLayerNodeA"、
                                has_branch：true、
                                ブランチ：[{
                                        //第4層
                                        //第5層
                                        //....。
                                }]
                        }]
                }]
            }、{
                名前： "firstLayerNodeB"、
                has_branch：false
            }]

html

<Template name="tree">
  <ul>
  {{#each brach}}
      <li>
        name
        {{#if has_branch}}
          <ul>
          {{#each brach}}
              <li>
                name
                {{#if has_brach}}
                      {{#each brach}}
                          .....third layer
                          .....fourth layer
                          ....
                      {{/each}}
                {{/if}}
              </li>
          {{/each}
          </ul>
        {{/if}}
      </li>
  {{/each}}
  </ul>
</Template>

テンプレートのブランチを扱う良いアイデアはありますか？どんな助けでも大歓迎です。

4

2 に答える 2

4

ネストされたテンプレートを使用できます。

クライアント側のjs

Template.tree.branch = function() {
    var branch = ...
    return branch;
}

HTML

<template name="tree">
  <ul>
    {{#each branch}}
      <li>    
        {{>branch}}
      </li>       
    {{/each}}
  </ul>
</template>

<template name="branch">
    {{name}}
    {{#if branch.length}}
       <ul>
           {{#each branch}}
               <li>
                   {{>branch}}
               </li>
           {{/each}}
       </ul>
    {{/if}}
</template>

また、実際には必要ありませんhas_branch。代わりにブランチ配列の長さを確認してください。それぞれが配列であり、そこにある場合にのみループするためです。

于 2013-03-08T13:42:33.633 に答える
2

Akshatの答えはとても良いです。ただし、それを使用すると、イベント処理にいくつかの問題がありました。イベントは数回キャッチされました。branchイベントをスローする要素を含むテンプレートのインスタンスごとに 1 回。

これがバグなのか機能なのかはわかりません...とにかく、次を使用して克服できました。

Template.branch.events({
  'click': function (e,b) {    
    console.log("this will show up as often as deep your tree is");
    if (this._id==b.data._id)
      console.log("this will show up only once");
  }
});
于 2014-04-03T16:46:50.797 に答える