Ничего не найдено
Быстрый старт
CSS
Компоненты
Меню
Динамическое содержимое
SEO-паук
Социальные теги
Прочее
Установка
Категории v3
Категории v3: типы свойств

Создание динамического компонента

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

Создадим динамический компонент test-counter. Для этого создадим 2 файла:

/eva2/components/render/Test/Counter/index.php

Данный компонент выводит значение $props["number"] и имеет кнопку "+".

/eva2/components/render/Test/Counter/index.js

Все, что происходит в данном JS-контроллере это то, что он обновляет компонент, увеличивая переменную props.number на 1. В данном примере мы еще используем jQuery (но это делать не обязательно).

Создадим статическую страницу и разместим на ней код отображения компонента:

В итоге у нас получится что-то такое:

Общение компонентов

Компоненты могут общаться друг с другом.

Для демонстрации создадим еще один компонент, под названием test-counter-button. Компонент будет иметь только кнопку и заставлять увеличить свои счетчики все остальные компоненты.

/eva2/components/render/Test/Counter/Button/index.php

Создадим следующий JS-контроллер.

/eva2/components/render/Test/Counter/Button/index.js

Добавим в наш JS-контроллер /eva2/components/render/Test/Counter/index.js от компонента test-counter следующий код:

И изменим наш файл, где мы выводим наши компоненты:

То есть мы просто вывели наш новый компонент test-counter-button под другими компонентами.

Получится следующий результат:

Как вы видите новая кнопка увеличивает все счетчики на 10. При этом прошлый функционал все еще работает.