Interface NodeLogical

Example: Простое логическое условие

<div>
  ${context.isAdmin && html`<button>Админ-панель</button>`}
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "log",
      "data": "/context/isAdmin",
      "child": [
        {
          "tag": "button",
          "type": "el",
          "child": [
            {
              "type": "text",
              "value": "Админ-панель"
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Логическое условие с проверкой массива

<div>
  ${core.notifications.length > 0 && html`
    <div class="notifications">
      ${core.notifications.map(n => html`<div>${n.message}</div>`)}
    </div>
  `}
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "log",
      "data": "/core/notifications.length",
      "expr": "${[0]} > 0",
      "child": [
        {
          "tag": "div",
          "type": "el",
          "string": {
            "class": "notifications"
          },
          "child": [
            {
              "type": "map",
              "data": "/core/notifications",
              "child": [
                {
                  "tag": "div",
                  "type": "el",
                  "child": [
                    {
                      "type": "text",
                      "data": "[item]/message"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
Copy

Сложное логическое условие

elements = parse<Context, Core>(({ html, context, core }) => html`
    <div>
      ${core.user && context.isAdmin && html`
        <div class="admin">Admin Panel</div>
      `}
    </div>
`)
Copy

[
  {
    tag: "div",
    type: "el",
    child: [
      {
        type: "log",
        data: ["/core/user", "/context/isAdmin"],
        expr: "_[0] && _[1]",
        child: [
          {
            tag: "div",
            type: "el",
            string: {
              class: "admin",
            },
            child: [
              {
                type: "text",
                value: "Admin Panel",
              },
            ],
          },
        ],
      },
    ],
  },
]
Copy

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

• type - всегда "log" для логических операторов
• data - путь(и) к данным для условия
• expr - выражение с индексами (если условие сложное)
• child - дочерние узлы, которые отображаются только если условие истинно