Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

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…

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

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

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