Видеоуроки по Pagekit | Разработка

Видеоурок #5 - использование Vue.js в расширении Pagekit

Pagekit
Добавление в избранное
Сохранить
Видеоурок #5

При создании панели управления 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.

Оригинальная статья:

Подпишитесь на рассылку новостей CMScafe