javascript - 递归集合在 sproutcore2 中是否可行？

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”模板中，只需在您编写“此处的另一个集合”的位置包含另一个 Collection View 。

如果您之前尝试过它可能因为您的 if 语句中的双哈希字符而无法工作。我已经在分层进度 View 中使用了十个嵌套级别。尝试

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

作为 Handlebars 模板。