在sproutcore2中可以实现递归集合吗?

Are Recursive Collections possible in sproutcore2?

本文关键字：递归 集合 实现 sproutcore2      更新时间：2023-09-26

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

你可以做到这一点的方式是，通过把更多的逻辑到你的'NavItemView'模板，只是包括另一个集合视图在你写的地方"另一个集合在这里"。

如果你之前尝试过，它可能没有工作，因为在你的If语句中的双哈希字符。我已经在一个分层进度视图中使用了十个嵌套的级别。试着

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

相关文章：