Question

我有一个可自定义的导航树，可以嵌套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链接到数据结构？

Answer 1

您可以通过在“NavItemView”模板中添加更多逻辑来实现这一点，只需在您编写“另一个集合”的地方添加另一个集合视图。

如果你因为if语句中的double hash-char而无法使用它之前已经尝试过。我已经在分层进度视图中使用了十个嵌套级别。尝试

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

作为把手模板。

sproutcore2中的递归集合是否可行？

1 个答案: