Alpine.data

Alpine.data(...) предоставляет возможность повторного использования контекстов x-data в вашем приложении.

Для примера приведём надуманный компонент dropdown:

<div x-data="dropdown">
  <button @click="toggle">...</button>
  <div x-show="open">...</div>
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('dropdown', () => ({
      open: false,

      toggle() {
        this.open = !this.open;
      },
    }));
  });
</script>

Как видите, мы вынесли свойства и методы, которые обычно определяются непосредственно внутри x-data, в отдельный объект компонента Alpine.

Регистрация в сборке

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

import Alpine from 'alpinejs';
import dropdown from './dropdown.js';

Alpine.data('dropdown', dropdown);

Alpine.start();

Предполагается, что у вас есть файл dropdown.js со следующим содержимым:

export default () => ({
  open: false,

  toggle() {
    this.open = !this.open;
  },
});

Исходные параметры

Помимо обращения к провайдерам Alpine.data по их имени в простом виде (например, x-data="dropdown"), можно обращаться к ним как к функциям (x-data="dropdown()"). Вызывая их непосредственно как функции, можно передавать дополнительные параметры, которые будут использоваться при создании исходного объекта данных, например, так:

<div x-data="dropdown(true)"></div>

Alpine.data('dropdown', (initialOpenState = false) => ({
  open: initialOpenState,
}));

Теперь можно повторно использовать объект dropdown, добавляя ему различные параметры по мере необходимости.

Метод init

Если ваш компонент содержит метод init(), то Alpine автоматически выполнит его перед рендерингом компонента. Например:

Alpine.data('dropdown', () => ({
  init() {
    // Этот код будет выполнен до того, как Alpine
    // инициализирует остальные компоненты.
  },
}));

Метод destroy

Если ваш компонент содержит метод destroy(), то Alpine автоматически выполнит его перед очисткой компонента.

Основной пример — регистрация обработчика события в другой библиотеке или API браузера, недоступных через Alpine. Как использовать метод destroy() для очистки такого обработчика, смотрите в следующем примере:

Alpine.data('timer', () => ({
  timer: null,
  counter: 0,
  init() {
    // Зарегистрируйте обработчик события, ссылающийся на экземпляр компонента
    this.timer = setInterval(() => {
      console.log('Увеличение счётчика до ', ++this.counter);
    }, 1000);
  },
  destroy() {
    // Отсоедините обработчик, избежав утечки памяти и побочных эффектов
    clearInterval(this.timer);
  },
}));

Примером отсоединения компонента является использование его внутри x-if:

<span x-data="{ enabled: false }">
  <button @click.prevent="enabled = !enabled">Переключить</button>

  <template x-if="enabled">
    <span x-data="timer" x-text="counter"></span>
  </template>
</span>

Использование магических свойств

Если нужно получить доступ к магическим методам или свойствам объекта компонента, можно использовать контекст this:

Alpine.data('dropdown', () => ({
    open: false,

    init() {
        this.$watch('open', () => {...})
    }
}))

Инкапсуляция директив с помощью x-bind

Если вам нужно повторно использовать не только объект данных компонента, вы можете обернуть целые директивы шаблона Alpine с помощью x-bind.

Ниже приведён пример извлечения деталей шаблона нашего предыдущего выпадающего компонента с помощью x-bind:

<div x-data="dropdown">
  <button x-bind="trigger"></button>

  <div x-bind="dialogue"></div>
</div>

Alpine.data('dropdown', () => ({
  open: false,

  trigger: {
    ['@click']() {
      this.open = !this.open;
    },
  },

  dialogue: {
    ['x-show']() {
      return this.open;
    },
  },
}));

Проверка знаний

Вопрос 1

Правильный вызов провайдеров Alpine.data…

Выберите все подходящие варианты.

• x-data="func"

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

• x-data="{ func() }"

  Провайдер не оборачивают в объект — x-data принимает либо его имя, либо вызов func().

• x-data="func()"

  Вызов со скобками обращается к провайдеру как к функции и позволяет передать в него исходные параметры.

Вопрос 2

Как обратиться к магическому методу $watch компонента?

Alpine.data('dropdown', () => ({
    open: false,

    init() {
        // обращаемся к методу $watch
    }
}))

• Вызов $watch без контекста

  $watch('open', () => {...})

  Внутри Alpine.data магические методы недоступны как обычные переменные.

• Вызов $watch через this

  this.$watch('open', () => {...})

  Магические свойства и методы объекта компонента доступны через контекст this.

• Возврат $watch без контекста

  return $watch('open', () => {...})

  return здесь ни к чему, да и без this метод $watch не найдётся.

Прогресс викторины

0 / 0 вопросов отвечено (0%)

0 верно