Templates

Recursive templates — `x-nested`

x-nested compiles a template into a recursive render function — ideal for self-similar tree data (file trees, nav menus, comment threads). Declare it with x-nested="node in items", then recurse into a node's children with <template x-nested.children>.

x-nested

<ul class="text-sm" x-data="{ tree: [{ id: 1, label: 'src', children: [{ id: 2, label: 'main.rs', children: [] }, { id: 3, label: 'render', children: [{ id: 4, label: 'mod.rs', children: [] }, { id: 5, label: 'widget.rs', children: [] }] }] }] }">
  <template x-nested="node in tree">
    <li class="my-0.5">
      <span class="" x-text="node.label"></span>
      <ul class="">
        <template x-nested.children></template>
      </ul>
    </li>
  </template>
</ul>

Result

src
- main.rs
- render
  - mod.rs
  - widget.rs

Recursive templates — x-nested

Recursive templates — `x-nested`