Возможны ли рекурсивные коллекции в sproutcore2? - PullRequest
Новая
       28

Возможны ли рекурсивные коллекции в sproutcore2?

2 голосов
/ 08 ноября 2011

У меня есть настраиваемое дерево навигации, которое может быть вложено в 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 со структурой данных?

1 Ответ

1 голос
/ 22 ноября 2011

Чтобы достичь этого, добавьте больше логики в шаблон «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>

в качестве шаблона руля.

...