Используем 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 вы узнаете из слудующих постов!