Scope and sub components in stache template

Having an issue figuring out the proper syntax or method in binding to components within a each or iterator. I am trying to create a simple tree view.

I have created a simple component to start like below:
> can.Component.extend({
> tag: “item-view”,
> template: can.view(‘item-view’)
> });

I then want to loop through an object hierarchy and call the above component on a parent, then using an each, iterate through an array of child nodes again calling the same component for each child passing the child object in a binding.
When attempting this I get an exception of “Too much recursion”.

My example template is below:

<script id="item-view" type="text/stache">
          <div>{{@index}} - <i>Not sure why this is NaN?</i></div>
        <item-view {item}="."></item-view>
        <!-- When calling an item-view element from within it's own template passing {{.}} I am getting an exception of "too much recursion". -->

Below is an example of the data:

var data = {
     name: "Parent 1",
     id: 1,
     children: [
          { name: "Child 1", id: 2 },
          { name: "Child 2", id:3 }

I am sure that I am just missing something simple being a newbie, but between @index returning NaN and the recursion error I am confused.

Here is a fiddle:

Thanks in advance…

The problem here is that {{#item.children}} will keep walking up the scope to find more children. You just need to use the ./ key modifier. {{#./item.children}}


(I also switched to {{#each}} which is better if you are changing items one at a time … much faster).

Another option would be to set leakScope: false in your component.

That did the trick in fixing the issue… Like always I appreciate the help as I get started.