2

3 レベルの深さでネストできるカスタマイズ可能なナビゲーション ツリーがあります。

テンプレート:

<script type="text/x-handlebars" data-template-name="NavItemView">
    <a {{bindAttr href="href" class="content.className"}}>{{content.name}}</a>
    {{##if content.children}}
        another collection here?
    {{/if}}
</script>
<script type="text/x-handlebars">
    {{collection App.NavItemsCollectionView contentBinding="App.navItemsController" tagName="ul"}}
    {{view App.CreateLinkView id="new-link" placeholder="Name"}}
</script>

データ：

nav =[
    {
        "name": "Jethro Larson",
        "children":[
            {
                "name":"Dashboard",
                "href": "index.cfm"
            }
        ]
    },
    {
        "name":"Order Management",
        "children":
        [
            {
                "name":"OM Reports",
                "children":
                [
                    {
                        "name":"Status Updates",
                        "href":"index.cfm?blah"
                    }
                ]
            }
        ]
    }
];

js:

window.App = SC.Application.create();
App.NavItem = SC.Object.extend({
    name: null,
    href: '#',
});
App.navItemsController = SC.ArrayProxy.create({
    content:[],
    addMultiple: function(ar){
        that = this;
        $.each(ar,function(i,item){
            that.pushObject(App.NavItem.create(item));
        });
    }
});
App.NavItemView = SC.View.extend({
    tagName:'li'
    ,templateName: 'NavItemView'
});
App.NavItemsCollectionView = SC.CollectionView.extend({
    itemViewClass: App.NavItemView
});
App.navItemsController.addMultiple(nav);

DOM をデータ構造にリンクできるように、コレクションをネストする方法はありますか?

4

1 に答える 1

1

これを実現する方法は、「NavItemView」テンプレートにさらにロジックを追加することで、「ここに別のコレクション」を書き込んだ場所に別のコレクションビューを含めることです。

以前に試したことがあれば、ifステートメントに二重のhash-charが含まれているために機能しなかった可能性があります。階層的な進行状況ビューで、これを10個のネストされたレベルですでに使用しました。試す

<script type="text/x-handlebars" data-template-name="NavItemView">
   <a {{bindAttr href="href" class="content.className"}}>{{content.name}}</a>
   {{#if content.children}}
     {{view App.NavItemsCollectionView contentBinding="content.children"}}
   {{/if}}
</script>
<script type="text/x-handlebars">
   {{view App.NavItemsCollectionView contentBinding="App.navItemsController" tagName="ul"}}
   {{view App.CreateLinkView id="new-link" placeholder="Name"}}
</script>

ハンドルバーテンプレートとして。

于 2011-11-21T22:31:37.440 に答える