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

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

Отображение модели

Мы рассмотрели отображение статичного контента, теперь можно рассмотреть отображение контента исодержащего данные из модели. Как вы знаете, одна из главных возможностей Backbone это возможность структурировать JS приложение с помощьюе паттерна MVC. В этой модели мы используем, так называеvst модели, для взаимодействия с нашими данными, передачи их в представления для отображения информаии, которую они содержат.

Объявил модель внутри нашего JS блока, ниже нашего объявления представления:

ContactManager.Contact = Backbone.Model.extend({});

Мы объявили модель с именем Contact и присоединили ее к нашему ContactManger приложению. Эта модель расширяет определение модели Backbone и наследует различные методы от нее. Когда мы таким образом расширяем базовую модель Backbone, мы предоставляем JS объект (который пустой в нашем случае) который может содержать дпоолинтельную информацию относящуюся к нашей модели.

Нам нужен шаблон и объявление представления до того как мы сможет отобразить что-либо в браузере. Заменил прошлый шаблон и StaticView следующим кодом:

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

Этот шаблон будет включен внутрь HTML body, но снаружи тега script, который включает код нашего приложения.

Специальные теги <%- %> позволяют вставить в них вычисляемые значения и отображать результат вычисления. В Marinotte используется шаблонизатор от Underscore, где <%- %> означает, что содержимое будет показано как есть, кроме HTML (" будет показано как ", а & как &); <% %> означает, что позволяется произвольный javascript (например if конструкции); <%= %> означает, что контент будет отображен как есть включая HTML. Так как модель прошла сериализацию, то написание <%-firstName %> означает, что будет выведено значение firstName модели. В целях безопасности, когда есть сомнения лучше использовать именно это написание.

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

ContactManager.on("start", function(){
    var alice = new ContactManager.Contact({ //(1) создаем образец модели с данными
        firstName: "Alice",
        lastName: "Arten",
        phoneNumber: "555-0184"
    });
    
    var aliceView = new ContactManager.ContactView({ //(2) определяем образец модели как атрибут 
        model: alice
    });
    
    ContactManager.regions.main.show(aliceView); //(3) показываем представление внутри области
});

Сначала мы создаем образец модели с данными (1). Мы определяем различные атрибуты модели и их соответствующие значения внутри JS объекта. Затем ммы создаем новые образец представления и определяем образец модели как атрибут (2)

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

Нам остается только показать наше представление внутри области (3)

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

Используем модели по умолчанию

Что если наш контакт не имеет имени (first name)? Мы не хотим, чтобы наше приложение ломалось если нет атрибута firstname, шаблон будет пытаться извлечь атрибут, которого нет в модели. Нам необходимо создать значение по умолчанию.

Для объявления значения по умолчанию необходимо использовать defaults в нашем главном объекте:

ContactManager.Contact = Backbone.Model.extend({
    defaults: {
        firstName: ""
    }
});    

Теперь если мы объявим такую модель без атрибута firstname, тогда вместо него подставится наше значение по умолчанию

var contact = new ContactManager.Contact({
    lastName: "Arten",
    phoneNumber: "555-0184"
});

Введение в события

Немного обогатим наше представление. Выведем номер телефона Alice в alert, при нажатии на имя. Представление Marionette наследует весь функционал Backbone, в том числе возможность объявления события и их связанные обработчики:

events: {
    "click p": "alertPhoneNumber"
}

Это событие транслируется как: когда пользователь нажимает (click) на тег p, который находится в этом представлении необходимо вызвать функцию alertPhoneNumber. Давайте используем этот функционал в нашем представлении чтобы отобразить номер телефона Alice.

ContactManager.ContactView = Marionette.ItemView.extend({
    template: "#contact-template",

    events: {
        "click p": "alertPhoneNumber"
    },

    alertPhoneNumber: function(){
        alert(this.model.escape("phoneNumber"));
    }
});

Model-escape в Backbone работает так же как Model-get: возвращает значение атрибута переданного как аргумент, а escape экранирует HTML, защищая от возможных XSS атак если вы выводите введенные пользователем данные в HTML.

Если теперь обновить страницу нашего приложения и нажать на имя, то появится сообщение с номером телефона. Так как мы функция alertPhoneNumber написана в определении представления, мы имеем доступ к образцу модели представления через this.model, несмотря на то, что пока не известно образец какой модели будет использован.

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