Интерполяция данных и выражения

Lit — это современный веб-фреймворк для создания компонент на основе стандартов Web Components. Одной из ключевых возможностей Lit является реактивное связывание данных с шаблонами через интерполяцию и выражения внутри шаблонных литералов.

Шаблоны в Lit создаются с помощью функции html из пакета lit. Интерполяция данных осуществляется через синтаксис ${...}, который позволяет внедрять JavaScript-выражения прямо в HTML.

import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('user-card')
class UserCard extends LitElement {
  @property({ type: String }) name = 'Иван';
  @property({ type: Number }) age = 30;

  render() {
    return html`
      <div>
        <p>Имя: ${this.name}</p>
        <p>Возраст: ${this.age}</p>
      </div>
    `;
  }
}

В этом примере значения name и age автоматически подставляются в шаблон. Любое изменение свойства инициирует повторный рендер компонента, благодаря реактивной системе Lit.

Выражения внутри интерполяции

В Lit можно использовать любые JavaScript-выражения внутри ${...}:

render() {
  const items = ['яблоко', 'банан', 'вишня'];
  return html`
    <ul>
      ${items.map(item => html`<li>${item.toUpperCase()}</li>`)}
    </ul>
    <p>${this.age >= 18 ? 'Взрослый' : 'Ребенок'}</p>
  `;
}
  • Тернарные операторы позволяют рендерить контент условно.
  • Методы массивов (map, filter) упрощают генерацию списков.
  • Вызовы функций и вычисления интегрируются напрямую, что устраняет необходимость создавать промежуточные переменные.

Реактивные свойства и обновление шаблона

Ключевым механизмом Lit является реактивность через декоратор @property. Любое изменение реактивного свойства автоматически инициирует обновление DOM.

@property({ type: Boolean }) isActive = false;

render() {
  return html`
    <button @click=${() => this.isActive = !this.isActive}>
      ${this.isActive ? 'Активен' : 'Не активен'}
    </button>
  `;
}

В этом примере кнопка обновляет текст при каждом клике. Использование тернарного оператора внутри интерполяции обеспечивает динамическую замену контента без прямой работы с DOM.

Интерполяция атрибутов и свойств

Lit позволяет связывать не только текстовые узлы, но и атрибуты HTML:

render() {
  return html`
    <input type="text" .value=${this.name} placeholder="Введите имя">
    <button ?disabled=${!this.name}>Отправить</button>
  `;
}
  • Префикс . связывает свойство DOM, а не атрибут.
  • Префикс ? связывает логическое свойство, например disabled, checked.
  • Без префиксов связываются стандартные HTML-атрибуты.

Использование вычисляемых выражений и функций

Интерполяция ${...} поддерживает вызовы методов компонента, что позволяет инкапсулировать логику:

getGreeting(name) {
  return `Привет, ${name.toUpperCase()}!`;
}

render() {
  return html`<p>${this.getGreeting(this.name)}</p>`;
}

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

Итоговые рекомендации по интерполяции в Lit

  • Использовать ${...} для внедрения значений и вычислений в шаблон.
  • Для списков применять map и создавать вложенные шаблоны `html```.
  • Использовать префиксы . и ? для корректного связывания свойств и логических атрибутов.
  • Разделять логику и шаблон через методы компонента для упрощения поддержки.
  • Реактивные свойства автоматически инициируют обновление DOM, что позволяет писать декларативный код без прямого манипулирования элементами.

Интерполяция в Lit обеспечивает мощный и гибкий способ связывания данных с DOM, упрощая создание реактивных веб-компонентов с минимальным количеством кода и высокой читаемостью.

Оглавление