При создании панели управления Pagekit разработчики изучили множество JavaScript фреймворков. В итоге выбор пал на довольно свежий Vue.js, библиотеку с простым, но мощным API.
Когда вы создаёте свои страницы для области панели управления, вы можете использовать любую библиотеку, к которой вы привыкли. Но в Pagekit включён Vue.js, поэтому есть смысл взглянуть на него и определить, это именно то, что вам нужно или нет.
В этом материале мы представим базовые концепты работы с Vue.js внутри Pagekit. Законченный пример расширения можно найти на Github.
1. Передача данных в JavaScript
В предыдущих материалах мы рассмотрели, как данные могут быть доступны в PHP контроллерах. Для использования этих данных в JavaScript используйте ключевое слово $data для передачи PHP массивов в рендерер представления. Pagekit автоматически сконвертирует их в JSON и выведет в раздел head сгенерированного HTML.
packages/pagekit/todo/src/Controller/TodoController.php
// ...
public function indexAction()
{
$module = App::module('todo');
return [
'$view' => [
'name' => 'todo:views/admin/index.php'
],
'$data' => $module->config
];
}
Это выведет следующее в раздел <head>:
2. Объединение представления и модели
ViewModel – это экземпляр класса Vue, который синхронизирует данные вашей модели с интерфейсом вашего представления. Это называется reactivity и является одной из ключевых возможностей Vue. При корректном использовании это помогает держать ваши JavaScript компоненты маленькими и читаемыми.
Вы можете приаттачить экземпляр Vue к элементу DOM: el: '#todo'. Моделью будет всё, что вы передадите в параметр data. Чтобы использовать данные из Pagekit, используйте глобальный объект window.$data, который отрендерило ваше представление.
Любые созданные methods могут быть вызваны из вашего шаблона. Мы создадим разметку шаблона чуть позже.
packages/pagekit/todo/js/todo.js
$(function(){
var vm = new Vue({
el: '#todo',
data: {
entries: window.$data.config.entries,
},
methods: {
add: function(e) {
// ...
},
toggle: function(entry) {
entry.done = !entry.done;
},
remove: function(entry) {
this.entries.$remove(entry);
},
save: function() {
// ...
}
}
});
});
2. Разметка для Vue
Из PHP мы всё ещё рендерим файл представления views/admin/index.php. А здесь мы подключаем необходимые JavaScript файлы. Для того чтобы Vue был доступен в вашем скрипте, добавьте зависимость vue в качестве третьего параметра:
<?php $view->script('todo', 'todo:js/todo.js', 'vue') ?>В вашем HTML подключите DOM элемент, который будет искать экземпляр Vue:
<div id="todo"></div>Внутри элемента вы можете использовать директивы Vue. Директивы – это определённые ключевые слова, которые говорят Vue, что делать с элементом:
<p v-if="entry.done">Это будет показано, если entry.done.</p>С помощью @click вы можете забиндить событие клика и вызвать методы вашей модели представления.
Для вывода значений из модели, вы можете использовать фигурные скобки:
{{ entry.message }}Pagekit предоставляет фильтр trans, которые заменит строку на переведённую альтернативу, если она есть для выбранной локали:
{{ 'Save' | trans }}Вот как может выглядеть простейшее представление:
<div id="todo">
<button @click="save()">{{ 'Save' | trans }}</button>
<ul>
<li v-for="entry in entries">
{{ entry.message }}
<button @click="click: toggle(entry)">{{ entry.done ? 'Undo' : 'Do' }}</button>
</li>
</ul>
</div>
3. Полный пример
В полном примере реализовано сохранение в бэкенде и чистый исходный код. Он объединяет все предыдущие шаги, где было описано создание простое расширение Todo. Результат доступен на GitHub.
Узнайте больше о Vue
Vue.js – это мощная библиотека, которая позволяет создавать реактивные веб-интерфейсы. Больше можете узнать в официальной документации. Мы также рекомендуем Laracastвидео о Vue.js.
