Interface NodeCondition

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

<div>
  ${context.isLoggedIn ? html`<span>Добро пожаловать, ${context.name}!</span>` : html`<a href="/login">Войти</a>`}
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "cond",
      "data": "/context/isLoggedIn",
      "child": [
        {
          "tag": "span",
          "type": "el",
          "child": [
            {
              "type": "text",
              "data": "/context/name",
              "expr": "Добро пожаловать, ${[0]}!"
            }
          ]
        },
        {
          "tag": "a",
          "type": "el",
          "string": {
            "href": "/login"
          },
          "child": [
            {
              "type": "text",
              "value": "Войти"
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Сложное условие

<div>
  ${core.role === 'admin' && core.permissions.includes('write') ?
    html`<button>Редактировать</button>` :
    html`<span>Нет прав</span>`
  }
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "cond",
      "data": ["user.role", "user.permissions"],
      "expr": "${[0]} === 'admin' && ${[1]}.includes('write')",
      "child": [
        {
          "tag": "button",
          "type": "el",
          "child": [
            {
              "type": "text",
              "value": "Редактировать"
            }
          ]
        },
        {
          "tag": "span",
          "type": "el",
          "child": [
            {
              "type": "text",
              "value": "Нет прав"
            }
          ]
        }
      ]
    }
  ]
}
Copy

Example: Условие с проверкой массива

<div>
  ${core.posts.length > 0 ?
    html`<ul>${core.posts.map(post => html`<li>${post.title}</li>`)}</ul>` :
    html`<p>Постов пока нет</p>`
  }
</div>
Copy

Результат:

{
  "tag": "div",
  "type": "el",
  "child": [
    {
      "type": "cond",
      "data": "/core/posts.length",
      "expr": "${[0]} > 0",
      "child": [
        {
          "tag": "ul",
          "type": "el",
          "child": [
            {
              "type": "map",
              "data": "/core/posts",
              "child": [
                {
                  "tag": "li",
                  "type": "el",
                  "child": [
                    {
                      "type": "text",
                      "data": "[item]/title"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "tag": "p",
          "type": "el",
          "child": [
            {
              "type": "text",
              "value": "Постов пока нет"
            }
          ]
        }
      ]
    }
  ]
}
Copy

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

• type - всегда "cond" для условных операторов
• data - путь(и) к данным для условия
• expr - выражение с индексами (если условие сложное)
• child - массив из двух элементов: [true-ветка, false-ветка]