thoughts-on-eaches.html

<!-- Original template -->
<ul data-each="state.todos as todo" data-key="todo.id">
    <li data-component="TodoComponent">
        <span>foo</span>
        <div data-if="todo.complete" data-component="TodoComponent"></div>
    </li>
</ul>



<!-- Template is detached, then modified to become a "mold" -->
<ul>
    <li data-component-{parentId}-{childId}>
        <span>foo</span>
        <div data-component-1-0 data-component-1-1></div>
    </li>
</ul>



<!-- Iterations are instantiated by cloning the mold -->
<script>
    var eachComponent;
    /* The each component will have this structure at this point:
        EachComponent
            element <li>...</li>
            childComponents [
                FooComponent
                    childComponents [
                        IfComponent,
                        TodoComponent
                    ]
            ]
    */
    var cloneEl = eachComponent.element.cloneNode(true);
    // eachComponent.iterations[key];
    itComponent = new IterationComponent(cloneEl);
    itComponent.childComponents = eachComponent.childComponents.map(c => {
        var cloneComponent = c.clone();
        var parentId = c.parent.id;
        var childId = c.id;
        var selector = '[data-component-' + parentId + '-' + childId + ']';
        // TODO: This can be sped up by somehow using an id selector
        // TODO: Figure out how this'd work if a component was on cloneEl
        // TODO: This needs to be recursive for nested components
        cloneComponent.element = cloneEl.querySelector(selector);
        return cloneComponent;
    });
</script>

<!-- TODO: Figure out if this'll work for nested eaches -->

<dl
    data-out="{ className: state.isYes ? 'active' : '' }"
    data-if="state.isYes"
    data-component="FooComponent"
    data-state="{ arr: state.arr }"
    data-each="state.arr"
    data-key="loop.val.id"
>
    <dt data-out="{ textContent: loop.key }"></dt>
    <dd>
        <span data-out="{ textContent: loop.value.foo }"></span>
        <ul data-each="loop.value.arr">
            <li>
                <span data-out="{ textContent: loop.outer.value }"></span>
                <span data-out="{ textContent: loop.value }"></span>
            </li>
        </ul>
    </dd>
</dl>