Условные операторы¶

Поскольку Lit использует обычные выражения Javascript, вы можете использовать стандартные конструкции потока управления Javascript, такие как условные операторы, вызовы функций и операторы if или switch для отображения условного содержимого.

Условные выражения JavaScript также позволяют комбинировать вложенные шаблонные выражения, и вы даже можете сохранять результаты шаблонов в переменных, чтобы использовать их в других местах.

Условные выражения с условным (тернарным) оператором¶

Тернарные выражения с условным оператором ? — отличный способ добавления встроенных условий:

1
2
3
4
5

render() {
  return this.userName
    ? html`Welcome ${this.userName}`
    : html`Please log in <button>Login</button>`;
}

Условные выражения с помощью операторов if¶

Вы можете выразить условную логику с помощью операторов if вне шаблона, чтобы вычислить значения для использования внутри шаблона:

1
2
3
4
5
6
7
8
9

render() {
  let message;
  if (this.userName) {
    message = html`Welcome ${this.userName}`;
  } else {
    message = html`Please log in <button>Login</button>`;
  }
  return html`<p class="message">${message}</p>`;
}

В качестве альтернативы можно вынести логику в отдельную функцию, чтобы упростить шаблон:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

getUserMessage() {
  if (this.userName) {
    return html`Welcome ${this.userName}`;
  } else {
    return html`Please log in <button>Login</button>`;
  }
}
render() {
  return html`<p>${this.getUserMessage()}</p>`;
}

Кэширование результатов работы шаблона: директива cache¶

В большинстве случаев JavaScript-условия — это все, что вам нужно для условных шаблонов. Однако если вы переключаетесь между большими и сложными шаблонами, вам, возможно, захочется избежать затрат на воссоздание DOM при каждом переключении.

В этом случае вы можете использовать директиву cache directive. Директива cache кэширует DOM для шаблонов, которые не отображаются в данный момент.

1
2
3
4
5
6

render() {
  return html`${cache(this.userName ?
    html`Welcome ${this.userName}`:
    html`Please log in <button>Login</button>`)
  }`;
}

Дополнительную информацию см. в директиве cache.

Условный рендеринг ничего¶

Иногда в одной из ветвей условного оператора нужно вывести ничего. Это обычно требуется для дочерних выражений, а также иногда в выражениях атрибутов.

Для дочерних выражений значения undefined, null, пустая строка ('') и значение посыла Lit nothing не отображают узлы. Дополнительные сведения см. в разделе Удаление дочернего содержимого.

В этом примере значение отображается, если оно существует, а в противном случае ничего не отображается:

1
2
3

render() {
  return html`<user-name>${this.userName ?? nothing}</user-name>`;
}

Для выражений с атрибутами значение смыслового блока Lit nothing удаляет атрибут. Дополнительную информацию см. в разделе Удаление атрибута.

В этом примере условно отображается атрибут aria-label:

1
2
3

html`<button
    aria-label="${this.ariaLabel || nothing}"
></button>`;

Комментарии