Вызов методов из шаблона

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

Объявление методов в компоненте

Методы определяются в классе компонента как обычные функции. Они могут принимать аргументы, работать с состоянием компонента и возвращать значения, которые можно использовать в шаблоне.

import { Slim } from 'slim-js';

class CounterComponent extends Slim {
  count = 0;

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }

  getCountMessage() {
    return `Текущее значение: ${this.count}`;
  }
}

CounterComponent.register('counter-component');
  • increment и decrement изменяют внутреннее состояние компонента.
  • getCountMessage возвращает строку, которая может отображаться в шаблоне.

Вызов методов через шаблон

В шаблоне Slim.js методы вызываются с помощью директив @click, @change и аналогичных событий. Сама библиотека автоматически связывает обработчики событий с контекстом компонента, поэтому this внутри метода всегда указывает на экземпляр компонента.

<counter-component>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
  <p>{{getCountMessage()}}</p>
</counter-component>
  • Атрибут @click="increment" указывает, что при нажатии на кнопку будет вызван метод increment.
  • Двойные фигурные скобки {{}} позволяют вставлять результат вызова метода в DOM, и Slim.js автоматически обновляет содержимое при изменении состояния.

Передача аргументов в методы

Методы могут принимать аргументы, передаваемые прямо из шаблона. Для этого в Slim.js используется синтаксис с фигурными скобками внутри события.

class Calculator extends Slim {
  result = 0;

  add(a, b) {
    this.result = a + b;
  }
}
Calculator.register('calculator-component');
<calculator-component>
  <button @click="add(5, 10)">Сложить 5 и 10</button>
  <p>{{result}}</p>
</calculator-component>
  • Аргументы передаются как литералы JavaScript.
  • Slim.js обеспечивает корректный вызов метода и обновление реактивных данных.

Вызов методов с возвращаемым значением в шаблоне

Методы можно использовать для генерации динамического контента, возвращая значение, которое сразу отображается в DOM. Для этого необходимо использовать синтаксис интерполяции {{methodName()}}.

class UserComponent extends Slim {
  user = { name: 'Алексей', age: 30 };

  userInfo() {
    return `${this.user.name}, ${this.user.age} лет`;
  }
}
UserComponent.register('user-component');
<user-component>
  <p>{{userInfo()}}</p>
</user-component>
  • Любые изменения состояния, влияющие на результат метода, автоматически обновляют отображение в браузере.
  • Методы, возвращающие сложные структуры (например, массивы), могут использоваться для генерации списков с помощью for в Slim.js.

Обработка событий с методами компонента

Slim.js позволяет связывать события не только с простыми кликами, но и с другими DOM-событиями. Методы компонента могут использовать параметры события, которые передаются автоматически.

class InputComponent extends Slim {
  inputValue = '';

  handleInput(event) {
    this.inputValue = event.target.value;
  }
}
InputComponent.register('input-component');
<input-component>
  <input type="text" @input="handleInput">
  <p>{{inputValue}}</p>
</input-component>
  • Событие @input вызывает метод handleInput с объектом события.
  • Состояние inputValue обновляется в реальном времени, что демонстрирует реактивную природу Slim.js.

Методы как вычисляемые свойства

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

class TodoComponent extends Slim {
  todos = [
    { text: 'Купить продукты', done: false },
    { text: 'Прочитать книгу', done: true }
  ];

  remainingCount() {
    return this.todos.filter(todo => !todo.done).length;
  }
}
TodoComponent.register('todo-component');
<todo-component>
  <p>Осталось задач: {{remainingCount()}}</p>
</todo-component>
  • Любое изменение массива todos автоматически пересчитывает результат метода remainingCount.
  • Slim.js оптимизирует обновление DOM, изменяя только необходимые узлы.

Важные моменты

  • Методы вызываются в контексте компонента, поэтому использование this внутри них безопасно.
  • Аргументы методов должны быть корректными литералами JavaScript или ссылками на реактивные свойства компонента.
  • Для сложных событий и асинхронной логики методы могут быть async, и Slim.js корректно обработает промисы при вызове их из шаблона.
  • Методы не должны напрямую манипулировать DOM вне Slim.js; обновления должны происходить через реактивные свойства для сохранения согласованности.

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

Оглавление