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

Интерполяция данных в Slim.js представляет собой механизм связывания значений переменных с HTML-шаблонами, позволяя динамически отображать состояние модели в пользовательском интерфейсе. В отличие от традиционного DOM-манипулирования через document.createElement или innerHTML, Slim.js обеспечивает декларативный подход, что значительно упрощает поддержку и масштабирование приложений.

Синтаксис и базовое использование

Для вставки значения переменной в шаблон используется двойная фигурная скобка:

<p>{{ message }}</p>

Здесь message — это свойство компонента Slim.js. При изменении значения message содержимое <p> автоматически обновляется. Внутри фигурных скобок можно использовать любые допустимые выражения JavaScript, включая арифметические операции, условные выражения и вызовы методов компонента:

<p>{{ count + 1 }}</p>
<p>{{ isActive ? "Активен" : "Неактивен" }}</p>
<p>{{ formatDate(date) }}</p>

Реактивность и привязка данных

Slim.js использует реактивную систему обновления DOM, основанную на прокси-объектах. Любое изменение значения свойства компонента немедленно отражается в интерфейсе без необходимости вручную пересоздавать элементы или вызывать методы обновления:

class MyComponent extends Slim {
  get useShadow() { return true; }

  message = "Привет, Slim.js!";

  setMessage() {
    this.message = "Сообщение обновлено";
  }
}

customElements.define('my-component', MyComponent);
<my-component>
  <button @click="setMessage">Обновить сообщение</button>
  <p>{{ message }}</p>
</my-component>

При клике по кнопке значение message изменится, а параграф <p> автоматически обновится благодаря реактивной привязке данных.

Интерполяция с атрибутами HTML

Данные можно вставлять не только в текстовое содержимое, но и в атрибуты HTML. Для этого используется синтаксис с двойными кавычками внутри фигурных скобок:

<img src="{{ imageUrl }}" alt="{{ imageAlt }}">
<a href="{{ linkUrl }}">{{ linkText }}</a>

При этом Slim.js гарантирует корректное обновление атрибутов при изменении соответствующих свойств компонента.

Использование выражений и методов

Внутри интерполяции допускаются вызовы методов компонента и обработка данных. Это позволяет выполнять форматирование, фильтрацию и вычисления прямо в шаблоне:

<p>{{ formatCurrency(price) }}</p>
<p>{{ items.length > 0 ? "Есть элементы" : "Список пуст" }}</p>
formatCurrency(amount) {
  return amount.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' });
}

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

Комбинирование с условной отрисовкой

Интерполяция тесно связана с условной отрисовкой в Slim.js. С помощью атрибутов if и for можно контролировать видимость элементов и повторение блоков:

<div if="{{ isLoggedIn }}">
  Добро пожаловать, {{ userName }}!
</div>

<ul>
  <li for="{{ item of items }}">{{ item.name }}</li>
</ul>

if и for автоматически реагируют на изменения свойств isLoggedIn и items, обновляя DOM без лишних манипуляций.

Производительность и оптимизация

Slim.js оптимизирует обновления DOM, изменяя только те узлы, которые затронуты изменением данных. Интерполяция с простыми выражениями выполняется быстро, однако сложные вычисления лучше выносить в методы компонента, чтобы минимизировать нагрузку на реактивную систему:

get expensiveComputation() {
  // Сложные вычисления
  return this.data.reduce((acc, item) => acc + item.value, 0);
}
<p>{{ expensiveComputation }}</p>

Использование геттеров позволяет кэшировать вычисления и уменьшать частоту обновлений интерфейса.

Особенности работы с массивами и объектами

Интерполяция корректно обрабатывает массивы и объекты, если они участвуют в циклах for. Для динамического отображения свойств объектов можно использовать привязку к ключам:

<div for="{{ (key, value) of settings }}">
  {{ key }}: {{ value }}
</div>

Это позволяет легко создавать динамические таблицы, списки и панели настроек.

Итоговые рекомендации по использованию

  • Использовать интерполяцию для динамического текста и атрибутов.
  • Выносить сложные вычисления в методы или геттеры компонента.
  • Комбинировать с условными конструкциями if и циклами for для управления видимостью и списками.
  • Следить за реактивными изменениями свойств, чтобы минимизировать лишние обновления DOM.

Интерполяция в Slim.js — это фундаментальный инструмент для построения реактивных интерфейсов, позволяющий интегрировать логику компонента и шаблон HTML без избыточного кода и сложных манипуляций с DOM.

Оглавление