Backbone.js (Backbone) предназначен для добавления структуры в клиентские приложения, чтобы избежать путаницы в виде спагетти-кода.
По словам Backbone.js:
Backbone.js придаёт структуру веб-приложениям, предоставляя модели с привязкой ключ-значение и пользовательские события, коллекции с богатым API перечислимых функций, представления с декларативной обработкой событий и соединяет всё это с вашим существующим API через интерфейс RESTful JSON.
Модели — это место, где вы храните свои данные, а в Backbone они представляют собой специальные объекты JavaScript, созданные на основе встроенного в Backbone Model, при необходимости расширяемые вами для добавления функциональности. Создание Model выглядит примерно так:
var jedi = new Backbone.Model({ name: 'Yoda', age: 874 });
Затем вы можете подключить эту модель к View, которая отображает её пользователю, с помощью шаблона. Шаблон — это просто HTML со специальными тегами или другим синтаксисом, используемым для указания, куда должны помещаться данные модели.
Представление выглядит примерно так, включая добавление его на страницу и его рендеринг.
var jediView = new Backbone.View({ model: jedi, tagName: 'div', jediTpl: _.template($('#jedi-template').html()), render: function () { this.$el.html(this.jediTpl(this.model.toJSON()))); return this; } }); jediView.$el.appendTo('body'); jediView.render();
Шаблон, часто хранящийся в элементе script с типом “template”, содержит HTML, который должно использовать представление. В приведённом выше примере это может выглядеть примерно так:
<script type="template" id="jedi-template"> <h1><%- name %></h1> <h2><%- age %></h2> </script>
Backbone ─ это очень большой, хорошо используемый и зрелый проект, и его подробное описание выходит далеко за рамки данного руководства. Если вы хотите узнать больше, отличным источником информации является свободно доступная книга Адди Османи «Разработка Backbone.js Приложений».
Одна вещь, которую следует учитывать в отношении Backbone, заключается в том, что она зависит от двух других библиотек JavaScript: jQuery и подчёркивания. Это создаёт довольно сильную зависимость в вашем проекте, и это стоит учитывать при принятии решения о том, использовать ли его. Мобильные браузеры могут с трудом загружать весь этот код, делая ваш сайт непригодным для использования.
Страницы в тему: