Scope and sub components in stache template

CanJS
1

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">
            {{item.name}}
      {{#item.children}}
          <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". -->
      {{/item.children}}
</script>

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: http://jsfiddle.net/bobbyross/qamLv0t9/

Thanks in advance…

2

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

Example: http://jsfiddle.net/qamLv0t9/6/

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

3

Another option would be to set leakScope: false in your component. http://canjs.com/docs/can.Component.prototype.leakScope.html

4

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