Создаём менеджер контактов на Backbone.js (часть 2)

Добро пожаловать обратно в серию уроков по Backbone.js. Сегодня мы создадим фильтр, который можно будет применять к контактам, а так же создадим маршрут, чтобы вы узнали как работать с URL. Будем дописывать пример, который начали в предыдущем уроке.

Реакция на ввод информации от пользователя

Из первого урока, вы наверное заметили, что каждый объект модели содержит помимо основных своих полей, опцию которая позволяет определить к какой категории он относится: друг, семья, приятель по колледжу. Давайте добавим элемент селект, где перечислим данные типы.

Теперь самое время вписать селект элемент в наш HTML код. Прежде чем сделать это, давайте подумаем что если мы захотим добавить новый или удалить существующий тип записи? В нашем приложении мы пока не можем добавлять и редактировать пользователей, но это дело будущего. Старайтесь всегда думать о динамике.

Наш селект элемент, будем заполнять динамически. Добавим немного HTML на нашу страницу, а именно в контейнер с контактами:

<header>
    <div id="filter"><label>Show me:</label></div>
</header>

Вот и всё. Наш элемент <header> будет играть роль главного контейнера, где каждый элемент будет иметь свой id и текст.

Теперь давайте создадим элемент <select>. В первую очередь, добавим несколько методов в DirectoryView; первый будет извлекать уникальные типы, а второй создаст выпадающий список. Оба метода нужно добавить в представление:

getTypes: function () {
    return _.uniq(this.collection.pluck("type"), false, function (type) {
        return type.toLowerCase();
    });
},

createSelect: function () {
    var filter = this.el.find("#filter"),
        select = $("<select/>", {
            html: "<option>All</option>"
        });

    _.each(this.getTypes(), function (item) {
        var option = $("<option/>", {
            value: item.toLowerCase(),
            text: item.toLowerCase()
        }).appendTo(select);
    });
    return select;
}

Первый метод, getTypes() возвращает массив, созданный с помощью Underscore метода uniq(). Он принимает исходный массив и возвращает массив только с уникальными значениями. Сам массив, мы генерируем с помощью Backbone метода pluck(), который позволяет извлечь все значения атрибутов из коллекции моделей. Интересующий нас атрибут называется thetype.

Сразу же преобразуем полученные значения к нижнему регистру. Можем воспользоваться функцией-итератором, передаваемую в качестве третьего аргумента в uniq(), для трансформации каждого значения массива. В данной функции просто преобразуем текст к нижнему регистру и возвращаем строку. Второй аргумент в uniq(), это флаг, активирующий или деактивирующий сортировку элементов.

Второй метод, createSelect() немного побольше, но не намного сложнее. Его главная задача сформировать новый элемент <select>, и его содержание чтобы мы могли вывести выпадающий список с типами контактов. Так же задаём значение по умолчанию All.

Затем используем Underscore метод each(), чтобы пройтись по каждому элементу массива, пришедшего от метода ourgetTypes(). Для каждого из них создаём элемент <option>, задаём ему текст и добавляем в <select>.

Для добавления элемента <select> на страницу, можем написать код в нашем главный шаблоне, в методе sinitialize():

this.$el.find("#filter").append(this.createSelect());

Контейнер нашего главного представления кэшируется в элементе $el, так что Backbone автоматически добавит его в класс представления.

Теперь, если мы запустим страницу, то увидим элемент <select>, заполненный различными типами контактов:

Фильтрация представления

Теперь когда у нас есть наше меню из элемента <select>, мы можем добавить функциональность, позволяющую фильтровать контакты. Для этого можем добавить главному представлению обработчики действий, связанных с пользовательским интерфейсом. Добавьте это код после метода renderSelect():

events: {
    "change #filter select": "setFilter"
},

Атрибут events принимает объект типа ключ:значение, где каждый ключ - это тип события; значение - селектор, к которому будет прикреплён наблюдатель события. В нашем случае мы хотим реагировать на изменение значения элемента <select> в контейнере с id #filter. Создаём обработчик setFilter:

setFilter: function (e) {
    this.filterType = e.currentTarget.value;
    this.trigger("change:filterType");
},

Всё что нам нужно сделать в функции setFilter() изменить значение свойства filterType, на то, которое было выбрано пользователем. Его мы можем извлечь из свойства currentTargetproperty объекта события, автоматически переданного в обработчик.

Как только значение свойства будет изменено, мы так же хотим отреагировать на это событие. Перед тем как это сделать, давайте добавим функцию, где реализуем применение фильтра, setFilter():

filterByType: function () {
    if (this.filterType === "all") {
        this.collection.reset(contacts);
    } else {
        this.collection.reset(contacts, { silent: true });

        var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
            return item.get("type").toLowerCase() === filterType;
        });

        this.collection.reset(filtered);
    }
}

Во-первых, проверяем значение поля filterType на строку “all”; если данное значение активно, то просто выводим все объекты моделей, который хранятся в нашем массиве контактов.

Если значение поля другое, сбиваем данные коллекции, которая теперь должна содержать контакты только одного типа. На этот раз ставим значение true опции silent (зачем, увидите через минуту), чтобы событие не сработало сразу.

Затем запоминаем значение поля filterType для того чтобы достучаться до него в функции обратного действия. Используем Underscore метод filter() для фильтрации коллекции моделей. Метод filter() принимает массив и функцию обратного действия, которая будет выполнена для каждого элемента. В качестве аргумента, она принимает текущий элемент массива.

Функция обратного действия вернёт true если у элемента задано искомое нами значение атрибута типа записи. Типы снова преобразуем к нижнему регистру. Те элементы, из-за которых нам был возвращён false, удаляем из массива.

После фильтрации, вызываем ещё раз метод reset(), передав отфильтрованный массив. Теперь мы готовы добавить код, вызывающий метод setType() и andfilterByType().

Прикрепляем событие к коллекции

Одновременно с назначением обработчика события к нашему пользовательскому интерфейсу, мы можем назначить обработчики для самой коллекции. В методе setFilter() мы выкинули собственное событие. Теперь нам нужно написать код, который будет отслеживать это событие в методе filterByType(); добавьте следующий код в метод initialize():

this.on("change:filterType", this.filterByType, this);

Мы используем Backbone метод on() для отслеживания собственного события. Так же мы определили, что метод filterByType() будет обрабатывать событие (второй аргумент); и назначили контекст функции обратного вызова с помощью третьего аргумента. Ключевое слово this, в данном контексте, это объект, связанный с главным представлением.

В функции filterByType, мы сбиваем состав коллекции чтобы перезаполнить её нужными данными моделей. Так же, мы прикрепили событие и к сбросу данных в коллекции. Для обработки данного события, уже написали метод-обработчик. Добавьте следующую строчку сразу же после предыдущей:

this.collection.on("reset", this.render, this);

В этом случае, мы ждём сброс данных коллекции и если он произойдёт, то будет вызван метод render(). Так же, в качестве третьего аргумента, передаём this. Если этого не сделаем, то не сможем вызвать метод render() нашей коллекции.

Теперь, вернёмся к тому, что пропустили. Причина, по которой мы выставили опции silent значение true в методе filterByType() заключается в том, чтобы представление не было сформировано ещё до того как мы до конца не преобразуем массив с отфильтрованными данными. Главное при фильтрации разными типами, не потерять модели.

Маршрутизация

Итак, теперь мы можем фильтровать наши контакты по категориям. Было бы круто, если бы мы могли делать это, меняя URL, не так ли? Модуль Backbone для обеспечения маршрутизации, может предоставить нам такую возможность. Для начала нам нужно расширить модуль Router; добавьте следующий код сразу после главного представления:

var ContactsRouter = Backbone.Router.extend({
    routes: {
        "filter/:type": "urlFilter"
    },

    urlFilter: function (type) {
        directory.filterType = type;
        directory.trigger("change:filterType");
    }
});

Первый аргумент, который мы передаём в объект маршрутизатора это маршруты, состоящие из ключа (URL шаблон); и значения (функции обратного действия). В нашем случае, мы отслеживаем URL, которое начинается с слова #filter и заканчивается чем-то другим. Часть URL после знака / попадёт в функцию обратного вызова.

В этой функции, мы обновляем поле filterType главного представления и вызываем наше собственное событие. Это в принципе всё что нам нужно сделать для фильтрации данных, посредством изменения URL. Однако, есть ещё пару шагов, и один из них, это создание объекта маршрутизатора. Добавьте этот код сразу же после определения DirectoryView:

var contactsRouter = new ContactsRouter();

Теперь, нам нужно лишь набрать адрес типа #filter/family, и все контакты будут автоматически отфильтрованы и выведены на страницу:

Круто, не правда ли? Не хватает только одного – каким образом пользователь узнает, какой URL набирать? Нам нужно назначит обработчик события на элемент <select>, для смены URL при выборе какой-то опции.

Сделать это можем в два шага; во-первых активируем поддержку истории в Backbone сразу же после того, как приложение будет сформировано; добавьте следующий код в самый конец файла:

Backbone.history.start();

С этого момента, Backbone будет отслеживать хэш изменения URL. Теперь, если мы захотим обновить URL после какого-то события, нам нужно всего-лишь обратиться к методу navigate(). Измените метод thefilterByType():

filterByType: function () {
    if (this.filterType === "all") {
        this.collection.reset(contacts);

        <b>contactsRouter.navigate("filter/all");</b>

    } else {
        this.collection.reset(contacts, { silent: true });

        var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
                return item.get("type") === filterType;
        });

        this.collection.reset(filtered);

        <b>contactsRouter.navigate("filter/" + filterType);</b>
    }
}

Теперь при смене опции элемента селект, URL будет обновляться и пользователь спокойно сможет закинуть страницу нужного состояния себе в закладки, а так же пользоваться навигацией браузера для перехода между режимами страницы.

Итог

В этом уроке мы рассмотрели ещё несколько компонент Backbone: маршрутизатор, история и модуль событий. Это в принципе, всё что нам предоставляет эта библиотека.

В следующей части, мы вернёмся к работе с моделями и посмотрим как можно организовать добавление и удаление данных в нашей коллекции.

• Комментарии