События

Событие или цепочка событий инициатором которого является данный компонент.

Пример реализации события

<smart
        name="button"
        id="test_button"
        events='{"click":{"0":{"test_button":{"action":"push"}}}}'
        sf-code="button"
        data='{"text":"Клик"}'
        property='{"size":"small"}'>
</smart>

{ Тип события: { 0: { Идентификатор элемента: { action: 'push' } },1: { Аякс_запрос: { action: 'send',async: 'true',method: 'get',url:'/url?get' }}}

• Тип события - На данный момент представлены стандартные обработчики типа: click,keydown,input.
  Так же существует событие ready, выполняемое после инициализации компонента и его дочерних компонентов (если имеются).
• Идентификатор элемента - Может содержать в себе как id элемента, так и класс.
  В случае класса идет выборка всех элементов в текущем шаблоне компонента.
  Если по данному селектору ничего не найдено, то суперкласс пытается найти компонент с данным идентификатором и происходит поиск action непосредственно в нем.
• action - Свойство отвечающее за метод, который будет выполнен.
• async - Вызывается ли асинхронный метод ? True/False Не обязательное свойство
• method - Тип запроса
• url - Урл запроса

Пример events.js из ядра смарт-компонента

const push = (props) => {
    alert('Клик по кнопке')
}

export { push }

Реализация events.js из ядра компонента отличается от файла находящегося в шаблоне!

Дополнительная информация при подгрузке шаблона с имеющимся в нем events.js

Цепочка событий

{ input: { 0: { init_input: { action: 'save' } }, 1: { text_holder: { action: 'write' } } } }

В данном примере происходит поиск события save у элемента-инициатора, которое сохраняет значение из input. После ищется компонент с идентификатором text_holder ( в данном случае это простой компонент text), после чего выполняется action write (Берется значение из компонента-инициатора props.initiator.value и обновляем data-аттрибут текущего компонента).

Цепочка событий может быть любой длинны.

const save = (props) => {
    const parent = props.parent
    parent.value = props.event.target.value
}

const write = (props) => {
    props.parent.props.data.text = props.initiator.value
}

Изменить статью