Are recursive collections possible in sproutcore2?

Question

I have a custom navigation tree that can be nested into 3 levels.

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 that I can associate dom with a data structure?

Answer 1

How can you do this by adding more logic to your "NavItemView" template, just include another kind of collection in the place where you wrote "another collection here."

If you tried this before it might not have worked due to the double hash char in your if-statement. I have used this with ten nested levels in a hierarchical representation of progress. 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 a pen template.