Значения по умолчанию

Stimulus — это JavaScript-фреймворк, ориентированный на управление поведением HTML-элементов через контроллеры. Одним из ключевых инструментов повышения гибкости контроллеров является система значений (Values), которая позволяет задавать данные с привязкой к DOM и автоматически отслеживать их изменения. Особое внимание уделяется значениям по умолчанию, которые обеспечивают предсказуемое поведение контроллера при отсутствии явного указания значения в HTML.

Определение значений по умолчанию

Значение по умолчанию — это заранее заданное значение свойства контроллера, используемое в случае, если соответствующий атрибут в DOM отсутствует. В Stimulus оно определяется внутри объекта static values при объявлении контроллера. Формат объявления включает имя значения и его тип.

Пример:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    count: { type: Number, default: 0 },
    title: { type: String, default: "Без названия" },
    enabled: { type: Boolean, default: true }
  }

  connect() {
    console.log(this.countValue)  // 0, если в HTML count-значение не указано
    console.log(this.titleValue)  // "Без названия"
    console.log(this.enabledValue) // true
  }
}

Ключевые моменты:

  • type определяет тип значения: String, Number, Boolean, Array, Object.
  • default задаёт значение по умолчанию, которое будет возвращено при отсутствии атрибута.
  • Stimulus автоматически конвертирует строковое значение из HTML в указанный тип.

Поведение при изменении значений

Значения по умолчанию активно участвуют в реактивной модели данных Stimulus. При изменении значения в HTML DOM через атрибут data-*, контроллер автоматически обновляет связанное свойство.

Пример динамического изменения:

<div data-controller="example" data-example-count-value="5"></div>
connect() {
  console.log(this.countValue) // 5, значение из HTML
}

Если атрибут удаляется:

element.removeAttribute("data-example-count-value")
console.log(this.countValue) // 0, возвращается значение по умолчанию

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

Типизация значений и поведение по умолчанию

Stimulus строго придерживается указанного типа при интерпретации значений:

  • String — любые строки, если атрибут отсутствует, используется default.
  • Number — строковое значение преобразуется в число. При невозможности преобразования используется значение по умолчанию.
  • Boolean — атрибут присутствует без значения или равен "true" → true, "false" → false. При отсутствии атрибута берётся default.
  • Array / Object — JSON-подобная строка в атрибуте конвертируется в соответствующую структуру. Ошибки парсинга приводят к использованию значения по умолчанию.

Пример с массивом:

static values = {
  items: { type: Array, default: ["яблоко", "банан"] }
}
<div data-controller="fruit"></div>

this.itemsValue вернёт ["яблоко", "банан"], так как атрибут не указан.

Практические рекомендации

  1. Всегда задавать значение по умолчанию для ключевых данных, чтобы контроллер работал стабильно при изменении DOM.
  2. Типизация обязательна, так как она обеспечивает правильное преобразование данных из HTML.
  3. Использование default для массивов и объектов предотвращает ошибки при попытке обратиться к элементам отсутствующих коллекций.
  4. Минимизировать ручное присвоение значений в connect, полагаясь на значения по умолчанию, чтобы уменьшить дублирование кода и повысить читаемость.

Пример комплексного контроллера

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    count: { type: Number, default: 10 },
    enabled: { type: Boolean, default: false },
    items: { type: Array, default: [] },
    title: { type: String, default: "Заголовок" }
  }

  connect() {
    this.updateUI()
  }

  updateUI() {
    this.element.innerHTML = `
      <h1>${this.titleValue}</h1>
      <p>Количество: ${this.countValue}</p>
      <p>Состояние: ${this.enabledValue ? "Активно" : "Неактивно"}</p>
      <ul>${this.itemsValue.map(item => `<li>${item}</li>`).join("")}</ul>
    `
  }
}

В этом примере контроллер остаётся полностью предсказуемым, независимо от того, какие значения заданы в HTML, благодаря использованию значений по умолчанию.

Система значений по умолчанию в Stimulus обеспечивает устойчивость, предсказуемость и простоту управления данными в контроллерах, позволяя создавать гибкие и безопасные интерфейсы с минимальным объёмом кода.

Оглавление