Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
30 lines (22 sloc) 937 Bytes

Iteration

For iteration, an expression should return an array with a list of expressions. Items can be primitive values, nested templates as well as nested arrays.

html`
  <todo-list>
    ${names.map((name) => `Name: ${name}`)}

    ${items.map(({ name }) => html`<todo-item>${name}</todo-item>`)}
  </todo-list>
`;

👆 Click and play with todo list on ⚡StackBlitz

Keys

For default, array index identifies expressions for re-render. However, you can use key method provided by the result of html call for efficient re-order (it sets a key and returns update function). When the list changes and a key is found, the existing template is updated rather than a new one is created.

html`
  <todo-list>
    ${items.map(({ id, name }) => 
      html`<todo-item>${name}</todo-item>`.key(id),
    )}
  </todo-list>
`
You can’t perform that action at this time.