Блог начинающего фронтендера

Погружение в Marionette.js. Часть 3

Выводим коллекцию моделей

Очень часто приходится работать с несколькими образцами моделей, например, списком контактов. В Backbone есть встроенный функционал для этих целей, который называется "коллекции". Коллекции имеют много интересных особенностей о которых мы поговорим позже, но пока мы обратим внимание на функционале, который позволяет Marionette выводить их.

Пример определения коллекции:

var MyModel = Backbone.Model.extend({});

var MyCollection = Backbone.Collection.extend({
    model: MyModel  //коллекция определяет какой тип моделей она будет содержать
});

Введение в CollectionView

Что нужно для показа многочисленного списка образцов моделей:

  1. коллекция для хранения всех моделей
  2. механизм для отображения одинакового типа представления для каждого образца модели
  3. место для отображения всех этих представлений

Все это есть в Marionette в CollectionView:

var MyItemView = Marionette.ItemView.extend({});

Marionette.CollectionView.extend({
    childView: MyItemView
});

Этот код покрывает задачи 2 и 3 из списка выше: наш CollectionView отобразит образец MyItemView для каждой модели в коллекции и мы можем отобразить образец CollectionView внутри области, чтобы вывести все представления разом.

На данном этапе мы не определили нашу коллекцию. Это связано с тем, что мы, скорее всего, захотим вызвать различные конфигурации коллекций для наших представлений, как полностью отличающуюся (например, отфильтрованный список), так и обычную, но отсортированную определенным образом. Поэтому мы передаем коллекцию как опцию когда представление инициировано.

Выводим список контактов с помощью CollectionView

Отобразим коллекцию контактов как не отсортированный список (внутри элемента ul). Вот как наши JS данные будут преобразованы в HTML через CollectionView:

В первую очередь нам нужен шаблон и представление для отображение каждой модели. Шаблон

Представление:

ContactManager.ContactItemView = Marionette.ItemView.extend({
    template: "#contact-list-item"
});

Теперь можно добавить CollectionView:

ContactManager.ContactsView = Marionette.CollectionView.extend({
    tagName: "ul",
    childView: ContactManager.ContactItemView
});    

tagName со значением ul мы используем чтобы заменить стадартное значение div, в которое будет завернуто наше представление. Когда наши li элементы отобразятся внутри коллекции мы получим валидную верстку.

У нас уже есть модель контакта, теперь можно создать коллекцию:

ContactManager.ContactCollection = Backbone.Collection.extend({
    model: ContactManager.Contact
});

Теперь можно запустить все внутри нашего start обработчика.

ContactManager.on("start", function(){
    var contacts = new ContactManager.ContactCollection([ //(1) начало массива
    {
        firstName: "Bob",
        lastName: "Brigham",
        phoneNumber: "555-0163"
    },
    {
        firstName: "Alice",
        lastName: "Arten",
        phoneNumber: "555-0184"
    },
    {
        firstName: "Charlie",
        lastName: "Campbell",
        phoneNumber: "555-0129"
    }
    ]);//(2) конец массива

    var contactsListView = new ContactManager.ContactsView({
        collection: contacts
    });

    ContactManager.regions.main.show(contactsListView);
});

Для создавния коллекцию образцов мы предоставляем массив объектов (1) и (2). Объявление коллекции создаст образцы модели для каждого элемента массива.

Текущий внешний вид нашего приложения.

Если посмотреть HTML код, то можно увидеть следующую картину:

Поделиться
Отправить
Отправить