[Feature]: Recursive For Loops

[mohamedmansour]

Before filing

• I searched existing issues and did not find a duplicate.

Area

None

Problem or need

To be able to recursively render a tree list, if the initial state has:

{
  items: [
     {
        name: "Colors",
        children: [
             {   name: "Ali" },
             {   name: "Alice" },
             {   name: "Bob" },
         ]
     },
     {
        name: "Name",
        children: [
         ]
     },
     {
        name: "Hobbies",
        children: [
             {
                  name: "Sports",
                  children: [
                    {   name: "Futbol" },
                    {   name: "Cricket" },
                  ] 
             }
         ]
     },
  ]
}

We need the structure to support how we did the original prototype

<ul>
  <for each="{{child in items}}" template="tree-item">
    <li>{{child.name}}</li>
    <if condition="{{child.children}}">
      <ul>
        <for template="tree-item" each="{{child in child.children}}" />
      </ul>
     </if>
   </for>
</ul>

Who would benefit?

Recursive trees

Desired outcome

No response

Concrete example

No response

Constraints

No response

Alternatives or workarounds

No response

[janechu]

Edit: maybe fragments so that they are explicitly non-rendered until they are referenced:

<fragment name="tree-items">
    <ul>
        <for each="{{child in items}}">
            <li>
                <span>{{child.name}}</span>

                <if condition="{{child.children.length}}">
                    <render
                        fragment="tree-items"
                        scope="{{child.children}}"
                        as="items"
                    ></render>
                </if>
            </li>
        </for>
    </ul>
</fragment>

<render
    fragment="tree-items"
    scope="{{items}}"
    as="items"
></render>

[mohamedmansour]

Jane Chu (@janechu) I like your fragments/render approach will use that!