Представления в Backbone.js
Backbone.js

Представления в Backbone.js

Представления (View) в Backbone.js отвечают за отображение данных приложения, а также могут реагировать на события, возникающие в моделях, коллекциях или события DOM-элементов.

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


SearchView = Backbone.View.extend({
    initialize: function() {
        alert(‘Initialized!’);
    }
});

/**
 * Функция initialize() вызывается при инициализации объекта представления
 */
var searchView = new SearchView();

Свойство el

Свойство el представления — это ссылка на DOM-элемент. Представления в Backbone.js формируют внутри el отображение данных и только потом вставляют этот элемент в DOM.

Каждое представление должно быть связано с DOM-элементом и, если свойство el явно не определено, Backbone создает новый элемент. Управлять созданием этого элемента можно с помощью трех свойств: tagName, id и className, определяющих, соответственно, тег, id и class. По умолчанию, если ни одно из этих свойств не задано — будет создан пустой элемент <div></div>.

Для вызова jQuery (или Zepto) функций представление Backbone имеет свойство $el. Свойство $el хранит закешированный объект $(view.el).

Свяжем наше представление с существующим элементом div#search_container:


SearchView = Backbone.View.extend({
    initialize: function() {
        alert('Initialized!');
    }
});

var searchView = new SearchView({ el: $('#search_container') });

Если необходимо связать существующее представление с другим DOM-элементом — можно воспользоваться методом setElement. Такое изменение требует привязки всех событий к новому элементу.

Метод setElement удаляет обработчики всех событий элемента $el, создает новую ссылку $el и снова привязывает обработчики событий.

Рендеринг представления

Для отображения представления в DOM необходимо реализовать метод render() и вызвать его при инициализации представления.

Библиотека Underscore.js, использующаяся в Backbone.js, предоставляет собственное решение для шаблонизации. Однако при желании можно использовать любой другой шаблонизатор.


SearchView = Backbone.View.extend({
    initialize: function() {
        alert('Initialized!');
    },

    render: function() {
        var template = _.template($('#search_template').html(), {});
        this.$el.html(template);

        return this;
    }
});

var searchView = new SearchView({ el: $('#search_container') });

Обработчики событий

Чтобы создать обработчики событий в представлении, используется свойство events. Обработчики событий могут быть связаны только с элементами DOM внутри el.


SearchView = Backbone.View.extend({
    initialize: function() {
        alert('Initialized!');
    },

    events: {
        'click input[type=button]': 'doSearch'
    },

    render: function() {
        var template = _.template($('#search_template').html(), {});
        this.$el.html(template);

        return this;
    }
});

var searchView = new SearchView({ el: $('#search_container') });

Заключение

В статье мы немного подробнее, чем в прошлой статье, посвященной введению в Backbone.js, рассмотрели фукнционал представлений: способы инициализации представлений, работу в событиями, работу с элементами DOM. Также мы рассмотрели пример, показывающий работу представления вне связи с моделями или коллекциями.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться