Iteration

There are several utilities to allow iteration of arrays and then mapping those to HTML elements.

x-each and x-template

x-each allows iteration of a list and it has been designed with server-side rendering (SSR) mind so that you can display initial data without JavaScript enabled.

x-each connects to an array and then x-template is used to mark how to render each item of it while iterating.

Editor

  

Data access

Each child of the template has access to the state of the current item.

Editor

  
  • -

Adjacent templates

Same goes for sibling items. Note how multiple templates are grouped together.

Editor

  

Focus handling

Iterated items can also have inputs while focus is retained on edit.

Editor

  

Indirect updates

x-each state can be updated indirectly.

Editor

  

Lists inside lists

It’s possible to render lists inside lists.

Editor

  

Complex objects

x-each also works with complex objects.

Editor

  

x-each also works with even more complex objects.

Editor

  

Derived state

x-each also works with state derived from x-each.

Editor

  
    • -