问题
I have a customizable navigation tree that can be nested 3 levels deep.
Templates:
<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>
data:
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);
Is there a way to nest collections so I can link the dom to the data structure?
回答1:
The way you can achieve this is, by putting more logic into your 'NavItemView' template, just include another collection-view at the place you've written "another collection here".
If you've tried that before it might have not worked because of the double hash-char in your if-statement. I've used this already with ten nested levels in a hierarchical progress view. Try
<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>
as handlebars template.
来源:https://stackoverflow.com/questions/8044919/are-recursive-collections-possible-in-sproutcore2