Шаблонизатор для MetaFor - v2.6.1
    Preparing search index...

    Interface NodeMap

    Узел map операции в AST. Представляет итерацию по массиву данных с дочерними элементами.

    ({ html, context }) => html`
      <ul>
        ${context.list.map((name) => html`<li>${name}</li>`)}
      </ul>
    `

    [
      {
        tag: "ul",
        type: "el",
        child: [
          {
            type: "map",
            data: "/context/list",
            child: [
              {
                tag: "li",
                type: "el",
                child: [
                  {
                    type: "text",
                    data: "[item]",
                  },
                ],
              },
            ],
          },
        ],
      },
    ]

    Могут быть как с деструктуризацией, так и без.

    ({ html, core }) => html`
      <ul>
        ${core.configs.map((config) => html`<li>${config.name} ${config.value}</li>`)}
      </ul>
    `

    ({ html, core }) => html`
      <ul>
        ${core.configs.map(({ name, value }) => html`<li>${name} ${value}</li>`)}
      </ul>
    `

    [
      {
        tag: "ul",
        type: "el",
        child: [
          {
            type: "map",
            data: "/core/configs",
            child: [
              {
                tag: "li",
                type: "el",
                child: [
                  {
                    type: "text",
                    data: ["[item]/name", "[item]/value"],
                    expr: "${_[0]} ${_[1]}",
                  },
                ],
              },
            ],
          },
        ],
      },
    ]

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

    Результат:

    {
      "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]}"
                }
              ]
            }
          ]
        }
      ]
    }

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

    Результат:

    {
      "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"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }

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

    • type - всегда "map" для map операций
    • data - путь к массиву данных для итерации
    • child - дочерние узлы, которые будут повторены для каждого элемента массива
    interface NodeMap {
        type: "map";
        data: string;
        child: NodeType[];
    }
    Index

    Properties

    type data child

    Properties

    type: "map"

    Тип узла - всегда "map" для map операций

    type: "map"
    data: string

    Путь к массиву данных для итерации

    data: "/context/users"

    data: "/core/products"
    child: NodeType[]

    Дочерние узлы, которые будут повторены для каждого элемента массива

    child: [
      {
        tag: "li",
        type: "el",
        child: [
          { type: "text", data: "[item]/name" }
        ]
      }
    ]

    Settings

    Member Visibility

    On This Page

    ПримитивыОбъекты
    Properties