Interface NodeMap

Example: Простая итерация

<ul>
  ${core.users.map(user => html`<li>${user}</li>`)}
</ul>
Copy

Результат:

{
  "tag": "ul",
  "type": "el",
  "child": [
    {
      "type": "map",
      "data": "/core/users",
      "child": [
        {
          "tag": "li",
          "type": "el",
          "child": [
            {
              "type": "text",
              "data": "[item]/name"
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Итерация с деструктуризацией

<div>
  ${core.posts.map(({title, content}) => html`
    <article>
      <h2>${title}</h2>
      <p>${content}</p>
    </article>
  `)}
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "map",
      "data": "/core/posts",
      "child": [
        {
          "tag": "article",
          "type": "el",
          "child": [
            {
              "tag": "h2",
              "type": "el",
              "child": [
                {
                  "type": "text",
                  "data": "[item]/title"
                }
              ]
            },
            {
              "tag": "p",
              "type": "el",
              "child": [
                {
                  "type": "text",
                  "data": "[item]/content"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Итерация с индексом

<ul>
  ${core.items.map((item, index) => html`
    <li class=${index % 2 === 0 ? 'even' : 'odd'}>
      ${index + 1}. ${item.name}
    </li>
  `)}
</ul>
Copy

Результат:

{
  "tag": "ul",
  "type": "el",
  "child": [
    {
      "type": "map",
      "data": "/core/items",
      "child": [
        {
          "tag": "li",
          "type": "el",
          "string": {
            "class": {
              "data": ["index", "item.name"],
              "expr": "${[0]} % 2 === 0 ? 'even' : 'odd'"
            }
          },
          "child": [
            {
              "type": "text",
              "data": ["index", "item.name"],
              "expr": "${[0] + 1}. ${[1]}"
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Вложенная итерация

<div>
  ${core.categories.map(category => html`
    <section>
      <h1>${category.name}</h1>
      ${category.products.map(product => html`
        <div>${product.name}</div>
      `)}
    </section>
  `)}
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "map",
      "data": "/core/categories",
      "child": [
        {
          "tag": "section",
          "type": "el",
          "child": [
            {
              "tag": "h1",
              "type": "el",
              "child": [
                {
                  "type": "text",
                  "data": "[item]/name"
                }
              ]
            },
            {
              "type": "map",
              "data": "[item]/products",
              "child": [
                {
                  "tag": "div",
                  "type": "el",
                  "child": [
                    {
                      "type": "text",
                      "data": "[item]/name"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
Copy

Структура узла:

• type - всегда "map" для map операций
• data - путь к массиву данных для итерации
• child - дочерние узлы, которые будут повторены для каждого элемента массива