Conditionals & Loops

Control structural DOM rendering. ly-if, ly-if-else, and ly-else conditionally insert elements, and ly-for renders keyed lists with fine-grained in-place reconciliation.

ly-if / ly-if-else / ly-else

Conditionals evaluate sequentially. Only the first truthy branch is rendered into the DOM, anchored via lightweight comment markers.

<div ly-if="auth.status === 'user'">
    Welcome back, <span ly-text="auth.username"></span>!
</div>
<div ly-if-else="auth.status === 'loading'">
    Authenticating…
</div>
<div ly-else>
    Please log in to continue.
</div>

ly-for — keyed list iteration

Iterate collections using ly-for="item in items" with ly-key="item.id". Lyap reuses existing DOM elements in place when array order changes.

<ul>
    <li ly-for="task in todo.tasks" ly-key="task.id">
        <span ly-text="task.text"></span>
        <button ly-on:click="todo.removeTask(task.id)">×</button>
    </li>
</ul>

ly-key — stable reconciliation

In Prototype 3, ly-key supplies the unique identity for in-place keyed reconciliation. When items move, are added, or removed, only the necessary DOM nodes are created, detached, or repositioned.