Skip to main content

ForLoop Attribute

The $for directive is used for rendering lists of items dynamically.

Usage

~index.html
<ul>
  <li $for="item in items">{item}</li>
</ul>

How it Works

  1. The framework parses the $for expression to identify the item variable and the array.
  2. It creates a comment node as a placeholder in the DOM.
  3. The original template element is removed from the DOM.
  4. For each item in the array, a clone of the template is created and inserted.
  5. The framework sets up a watcher on the array.
  6. When the array changes, the list is re-rendered.

Error Handling

If the specified array doesn't exist, an empty list might be rendered, and an error could be logged to the console.

Note

note

This directive efficiently handles the rendering of dynamic lists, automatically updating the DOM when the underlying data changes.