How do I use a component recursively?

CanJS
1

I am trying to set up a recursive component but it keeps crashing my server without outputting an error. How would I do it correctly?

Say I have this data structure

var halliwells = [
  {
    name: "Penny",
    children: [
      {
        name: "Patty",
        children: [
          {name: "Prue"},
          {name: "Piper"},
          {name: "Phoebe"},
          {name: "Paige"}
        ]
      }
    ]
  }
]

I want the output to look like this

<ul>
  <li>
    Penny
    <ul>
      <li>
        Patty
        <ul>
          <li>Prue</li>
          <li>Piper</li>
          <li>Phoebe</li>
          <li>Paige</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Right now I am calling a template to build the list like this

<can-import from="lineage.component">
  <direct-lineage {lineage}="halliwells" />
</can-import>

And the component builds the list like this

<ul>
    {{#lineage}}
      <li>{{name}}</li>
      <can-import from="lineage.component">
        <direct-lineage {lineage}="children" />
      </can-import>
      <!-- how do I recursively call the direct-lineage component from here? -->
    {{/lineage}}
  </ul>
2

That should work as long as you terminate properly.

Here is a working example:

Not sure about importing the component in its own template… that might cause a problem. Does it work without doing that?

3

I checked my closures and they’re fine.

When I remove the can-import line, it stops crashing but I get RangeError: Maximum call stack size exceeded

I’m trying to use it in a self-contained component.

<can-component tag="direct-lineage">
  <style type="less">
    display: block;

  </style>

  <template>
      <ul>
        {{#lineage}}
          <li>
              {{name}}
              {{#if children}}
                    <direct-lineage {lineage}="children"/>
              {{/if}}
          </li>
        {{/lineage}}
      </ul>
  </template>
</can-component>
4

I think what is happening here is that when children eventually becomes undefined, the parent scope is inspected instead, so the recursion never stops.

One solution is to define your component as leakScope:false to stop the scope chain. I think with the self-contained component, that just becomes an attribute like leakScope="false".

5

Thank you. I will look into leakScope. I solved it this time by using ./