<Mr.ElectroNick>
/* personal website */

Используем Backbone.View

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

Давайте рассмотрим пример простейшего использования Backbone.View.

Запускаем Backbone

Для того чтобы Backbone завелся на нашей странице нужно следующее:

  • JQuery
  • Underscore
  • Backbone :-)

Добавляем их на страницу и забываем:

<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="lib/backbone-min.js"></script>

Первое что мы можем сделать это создать пустую вьюшку. Делается это вот так:

<script>
    var MyView = Backbone.View.extend({
        initialize: function() {
            console.log('initialize')
        }
    });
    new MyView();
</script>

Если обновить страницу. Вьюшка напишет в консоли «initialize». Это означает что с кодом все ок.

А теперь давайте заставим нашу вьюшку что-то сделать.

Например мы можем использовать ее по назначению и попросить отрендерить нам небольшой кусочек HTML.

В этот раз код будет сложнее.

<script>
    var MyView = Backbone.View.extend({
        contact:{},
        initialize: function(data) {
            this.contact = data;
        },
        render:function() {
            var html = '<h1></h1>' +
                    '<p>Company:<span id="company"></span></p>' +
                    '<p>Birth date:<span id="dob"></span></p>' +
                    '<p>Email:<span id="email"></span></p>';
            this.$el.html(html);
            this.$el.find('h1').text(this.contact.name);
            this.$el.find('#company').text(this.contact.company);
            this.$el.find('#dob').text(this.contact.dob);
            this.$el.find('#email').text(this.contact.email);
            $('body').append(this.$el);
        }
    });

    var contacts = [
        {
            name:'Bill Gates',
            company:'Microsoft',
            dob:'1955-10-28',
            email:'bill.gates@microsoft.com'
        },
        {
            name:'Steve Jobs',
            company:'Apple',
            dob:'1955-02-24',
            email:'steve.jobs@apple.com'
        },
        {
            name:'Larry Ellison',
            company:'Oracle',
            dob:'1944-08-17',
            email:'steve.jobs@apple.com'
        }
    ];
    contacts.forEach(function(contact){
        (new MyView(contact)).render();
    });
</script>

Данный код выведет следующее:

<div>
    <h1>Bill Gates</h1>
    <p>Company:<span id="company">Microsoft</span></p>
    <p>Birth date:<span id="dob">1955-10-28</span></p>
    <p>Email:<span id="email">bill.gates@microsoft.com</span></p>
</div>
<div>
    <h1>Steve Jobs</h1>
    <p>Company:<span id="company">Apple</span></p>
    <p>Birth date:<span id="dob">1955-02-24</span></p>
    <p>Email:<span id="email">steve.jobs@apple.com</span></p>
</div>
<div>
    <h1>Larry Ellison</h1>
    <p>Company:<span id="company">Oracle</span></p>
    <p>Birth date:<span id="dob">1944-08-17</span></p>
    <p>Email:<span id="email">steve.jobs@apple.com</span></p>
</div>

А теперь по порядку, кто и что делает:

  • Переменная contact — просто хороший тон объявить пустым то что будет использоваться
  • Функция initialize — в Backbone.View выполняет роль конструктора объекта. Она же принимает данные из конструктора
  • Функция render — выполняет непосредственный рендеринг. В нашем случае мы делаем прямой рендеринг добавляя готовый HTML прямо в документ
  • Внутреннее свойсво $el — является JQuery представлением свойста el — которое в свою очередь и есть главным HTML элементом нашей вьюшки.

Я бы описал Backbone.View как довольно гибкую и многофункциональную обертку над HTML элементом :-)

Его можно отрендерить сразу, можно потом, можно вообще не рендерить а просто держать в памяти — все зависит от задачи. Но главная задача Backbone.View не столько в том чтобы облегчить множественный рендеринг, а в том чтобы разделить данные и представление. В нашем случае данные это объект contact который мы достали из массива contacts и передали в конструктор вьюхи.

Что еще можно делать при помощи Backbone.View вы узнаете из слудующих постов!