Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 7.88 KB

lifecycle.md

File metadata and controls

101 lines (69 loc) · 7.88 KB

Хуки жизненного цикла

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

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        // …
    }
}

Методы

Вы можете определить любой из следующих методов в своем контроллере:

Метод Вызывается Stimulus…
initialize() Один раз, при первом инстанцировании контроллера
[name]TargetConnected(target: Element) Каждый раз, когда объект подключается к DOM
connect() Каждый раз, когда контроллер подключается к DOM
[name]TargetDisconnected(target: Element) Каждый раз, когда объект отсоединяется от DOM
disconnect() Каждый раз, когда контроллер отсоединяется от DOM

Подключение

Контроллер подключен к документу, когда верны оба следующих условия:

  • его элемент присутствует в документе (т.е. является потомком document.documentElement, элемента <html>)
  • его идентификатор присутствует в атрибуте data-controller элемента

Когда контроллер становится подключенным, Stimulus вызывает его метод connect().

Объекты

Объект подключен к документу, если верны оба следующих условия:

  • его элемент присутствует в документе как потомок соответствующего элемента контроллера
  • его идентификатор присутствует в атрибуте data-{identifier}-target элемента

Когда объект становится подключенным, Stimulus вызывает метод [name]TargetConnected() своего контроллера, передавая целевой элемент в качестве параметра. Хуки жизненного цикла [name]TargetConnected() срабатывают до хука контроллера connect().

Отключение

Подключенный контроллер впоследствии станет отключенным, когда одно из предыдущих условий станет ложным, например, при любом из следующих сценариев:

  • элемент явно удален из документа с помощью Node#removeChild() или ChildNode#remove().
  • один из родительских элементов элемента удален из документа
  • у одного из родительских элементов элемента его содержимое заменено с помощью Element#innerHTML=
  • атрибут data-controller элемента удален или изменен
  • документ устанавливает новый элемент <body>, например, при изменении страницы Turbo

Когда контроллер становится отключенным, Stimulus вызывает его метод disconnect().

Объекты

Подключенный объект впоследствии станет отключенный, когда одно из предыдущих условий станет ложным, например, при любом из следующих сценариев:

  • элемент явно удален из документа с помощью Node#removeChild() или ChildNode#remove().
  • один из родительских элементов элемента удален из документа
  • у одного из родительских элементов элемента его содержимое заменено с помощью Element#innerHTML=
  • атрибут data-{identifier}-target элемента удален или изменен
  • документ устанавливает новый элемент <body>, например, при изменении страницы Turbo

Когда объект становится отключенным, Stimulus вызывает метод [name]TargetDisconnected() своего контроллера, передавая целевой элемент в качестве параметра. Хуки жизненного цикла [имя]TargetDisconnected() срабатывают до хука контроллера disconnect().

Переподключение

Отключенный контроллер может быть снова подключен позднее.

Когда это происходит, например, после удаления элемента контроллера из документа, а затем его повторного подключения, Stimulus повторно использует предыдущий экземпляр контроллера элемента, вызывая его метод connect() несколько раз.

Аналогично, отключенный объект может быть подключен снова в более позднее время. Stimulus вызовет метод [name]TargetConnected() своего контроллера несколько раз.

Очерёдность и тайминги

Stimulus следит за изменениями на странице асинхронно, используя DOM MutationObserver API.

Это означает, что Stimulus вызывает методы жизненного цикла вашего контроллера асинхронно после внесения изменений в документ, в следующей microtask после каждого изменения.

Методы жизненного цикла по-прежнему выполняются в порядке их появления, поэтому два вызова метода контроллера connect() всегда будут разделены одним вызовом disconnect(). Аналогично, два вызова метода контроллера [name]TargetConnected() для данного объекта всегда будут разделены одним вызовом [name]TargetDisconnected() для того же объекта.