Шаблоны

Структура шаблона

📂 Имя компонента
  📂 template
    📂 default
        📄 events.js
        📄 index.html
        📄 styles.css

• index.html - Список Html-элементов, компилируемые в последствии с помощью js-шаблонизатора Lodash
• events.js - События смарт-компонента, которые подключаются во время загрузки шаблона
• style.css - Стили смарт-компонента, которые подключаются во время загрузки шаблона

Шаблон - обязательный элемент компонента (кроме служебных), отвечающий за его отображение.
Он может находиться как в папке самого компонента, так и локально - в папке сайта, заданной аттрибутом templateUrl

Примеры

index.html

<div class="template">
    <% for(let key in data) { %>
    <div class="item"><%= data[key] %></div>
    <% } %>
</div>

В шаблон всегда передается объект data.
Манипуляции с данными происходят с помощью шаблонизатора lodash.

events.js

new SF.cl.propsLoader('component_name', {
    function_name: (props) => {
        console.log('Кастомная функция из шаблона загружена')
        console.log(props)
    }
})

Загружаемые события в шаблоне добавляются с помощью класса propsLoader.

Первый параметр отвечает за добавление события в суперкласс SmartComponent для дальнейшего использования любым компонентом из этой группы.
Название должно строго соответствовать типу смарт-компонента.

Второй параметр - сама функция.

{
    action: Название события,
    count: Номер события по цепочке,
    event: Само событие,
    data: Не обязательное свойство - передается из предыдущего action опционально ( в основном аякс-запросы ),
    initiator: Класс инициатора события,
    item: Обработчик события,
    parent: Родительский класс из которого вызывается событие
}

В функцию передается объект props, состоящий из набора свойств позволяющих взаимодействовать с самим событием, классом-инициатором, классом-родителем и элементом на которое добавляется обработчик.

Ключевое слово this в стрелочной функции ссылается на класс-родитель данного события.

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