Создание одностраничного приложения для составления списка заданий при помощи Backbone.js

() translation by (you can also view the original English article)

Backbone.js – JavaScript-фреймворк для создания гибких веб-приложений. Он предоставляет Модели, Коллекции, События, Маршрутизатор и несколько других замечательных возможностей. В этом руководстве мы разработаем простое приложение для создания списка заданий с возможностями их добавления, редактирования и удаления. Мы также добавим возможность отметить, что задание выполнено, и поместить его в архив. Для того чтобы длина этого поста оставалась приемлемой, мы не будем добавлять никакого взаимодействия с базой данных. Все данные будут храниться на стороне клиента.

Предварительная подготовка

Ниже приводится файловая структура, которую будем использовать:

css
    └── styles.css
js
    └── collections
        └── ToDos.js
    └── models
        └── ToDo.js
    └── vendor
       └── backbone.js
       └── jquery-1.10.2.min.js
       └── underscore.js
    └── views
    └── App.js
 └── index.html

Назначение пары файлов очевидно, например /css/styles.css и /index.html. В них содержатся стилевые правила CSS и HTML-разметка. В контексте Backbone.js модель является местом для хранения наших данных. Так что наши задания списка просто будут моделями. И поскольку у нас будет больше одного задания, мы организуем их в виде коллекции. Бизнес-логика (* программный код, реализующий функциональность приложения. Здесь и далее примеч. пер.) распределяется между представлениями и главным файлом приложения, App.js. Из зависимостей для Backbone.js обязательна только Underscore.js. Этот фреймворк также очень хорошо сочетается с jQuery, так что обе эти библиотеки добавляются в папку vendor (* поставщик, вендор). Все, что нам теперь необходимо, – просто написать немного HTML-разметки, и мы готовы к созданию приложения.

<!doctype html>
<html>
  <head>
        <title>My TODOs</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    <body>
        <div class="container">
            <div id="menu" class="menu cf"></div>
            <h1></h1>
            <div id="content"></div>
        </div>
        <script src="js/vendor/jquery-1.10.2.min.js"></script>
        <script src="js/vendor/underscore.js"></script>
        <script src="js/vendor/backbone.js"></script>
        <script src="js/App.js"></script>
        <script src="js/models/ToDo.js"></script>
        <script src="js/collections/ToDos.js"></script>
        <script>
            window.onload = function() {
                // bootstrap
            }
        </script>
    </body>
</html>

Как вы видите, мы подключаем все внешние файлы JavaScript ближе к концу документа, поскольку согласно установившейся практике это необходимо выполнять в конце тега body. Также мы подготавливаем код для поэтапной загрузки приложения. В документе имеется контейнер для контента, меню и заголовка. Главное навигационное меню является статическим элементом, и мы не будем его менять. Мы заменим контент заголовка и элемента div, расположенного ниже него.

Планирование приложения

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

Определение пространства имен

(* пространство имен – набор правил именования, регулирующий видимость объектов в программе; именованная область видимости). Согласно установившейся практике ваш код следует помещать в его собственную область видимости (* область текста программы, где может быть использован данный идентификатор (имя переменной, именованной константы, функции и т. п.)). Регистрация глобальных переменных или функций – плохая идея. Мы создадим одну модель, одну коллекцию, маршрутизатор и несколько представлений Backbone.js. Все эти элементы должны находиться в собственной области видимости. В App.js будет содержаться класс (* имитация класса), в котором размещается весь код.

// App.js
var app = (function() {

    var api = {
        views: {},
        models: {},
        collections: {},
        content: null,
        router: null,
        todos: null,
        init: function() {
            this.content = $("#content");
        },
        changeContent: function(el) {
            this.content.empty().append(el);
            return this;
        },
        title: function(str) {
            $("h1").text(str);
            return this;
        }
    };
    var ViewsFactory = {};
    var Router = Backbone.Router.extend({});
    api.router = new Router();

    return api;

})();

Выше показана типичная реализация шаблона проектирования (* обобщённое описание способа решения определённого класса задач) "Открытый модуль". В переменной api содержится объект, возвращаемый функцией и предоставляющий доступ к публичным методам класса. Свойства views, models и collections будут выступать в качестве вместилищ классов, возвращаемых Backbone.js. В content будет содержаться объект jQuery для главного контейнера пользовательского интерфейса. Здесь у нас имеется два вспомогательных метода. При помощи одного обновляется вышеупомянутый контейнер. При помощи второго задается текст заголовка страницы. Затем мы определили модуль под названием ViewsFactory. В нем будут создаваться наши представления, и в конце мы создали маршрутизатор.

Вы можете поинтересоваться, зачем нам нужна фабрика (* класс (class) используемый для создания экземпляров (instance) других классов. Фабрика нужна, чтобы изолировать создание объектов конкретного класса) для представлений? Что ж, для работы с Backbone.js имеются некоторые распространенные шаблоны. Один из них относится к созданию и использованию представлений.

1	var ViewClass = Backbone.View.extend({ /* logic here */ });
2	var view = new ViewClass();

Хорошо, если вы инициализировали представления только единожды и оставили их в таком состоянии. Сразу после изменения данных мы обычно вызываем методы представления и обновляем контент его объекта el. Другим очень распространенным подходом является повторное создание всего представления или замена всего элемента DOM. Однако это не совсем удачный выбор с точки зрения производительности. Поэтому мы обычно используем вспомогательный класс, при помощи которого создается и возвращается при необходимости один экземпляр представления.

Определение компонентов

У нас имеется пространство имен, так что теперь мы можем приступить к созданию компонентов. Ниже показано, как выглядит код для главного меню:

// views/menu.js
app.views.menu = Backbone.View.extend({
    initialize: function() {},
    render: function() {}
});

Мы создали свойство под названием menu, в котором хранится класс для навигационного меню. Позже мы можем добавить в модуле фабрики метод, при помощи которого создается его экземпляр.

var ViewsFactory = {
    menu: function() {
        if(!this.menuView) {
            this.menuView = new api.views.menu({ 
                el: $("#menu")
            });
        }
        return this.menuView;
    }
};

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

Поток данных

В качестве точки входа приложения выступает App.js и содержащийся в его коде метод init. Ниже показано, что мы вызовем в обработчике события onload для объекта window:

1	window.onload = function() {
2	app.init();
3	}

После этого управление передается указанному маршрутизатору. При помощи него на основании URL-адреса выбирается, какой обработчик запускать. В Backbone.js нет типичной архитектуры Модель-Представление-Контроллер (* MVC – Model-View-Controller). Контроллер отсутствует, и большая часть логики помещается в представления. Так что мы подвязываем модели непосредственно к методам представлений, и пользовательский интерфейс после изменения данных немедленно обновляется.

Управление данными

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

// models/ToDo.js
app.models.ToDo = Backbone.Model.extend({
    defaults: {
        title: "ToDo",
        archived: false,
        done: false
    }
});

Всего лишь три поля. В первое помещается текст задания, а при помощи остальных двух, которые являются флажками, отмечается статус записи.

Все объекты в рассматриваемом здесь фреймворке являются собственно распределителями событий. И поскольку модель изменяется при помощи сеттеров, фреймворк знает, когда обновляются данные, и может оповестить остальные части системы об этом. Как только вы подключили что-то для этих оповещений, ваше приложение отреагирует на изменения в модели. Это действительно мощная возможность Backbone.js.

Как я упомянул в начале, у нас будет множество записей и мы организуем их в виде коллекции под названием ToDos.

// collections/ToDos.js
app.collections.ToDos = Backbone.Collection.extend({
    initialize: function(){
        this.add({ title: "Learn JavaScript basics" });
        this.add({ title: "Go to backbonejs.org" });
        this.add({ title: "Develop a Backbone application" });
    },
    model: app.models.ToDo
    up: function(index) {
        if(index > 0) {
            var tmp = this.models[index-1];
            this.models[index-1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    down: function(index) {
        if(index < this.models.length-1) {
            var tmp = this.models[index+1];
            this.models[index+1] = this.models[index];
            this.models[index] = tmp;
            this.trigger("change");
        }
    },
    archive: function(archived, index) {
        this.models[index].set("archived", archived);
    },
    changeStatus: function(done, index) {
        this.models[index].set("done", done);
    }
});

Код коллекции начинается с метода initialize. В нашем случае мы добавили несколько заданий по умолчанию. Конечно же, в реальном мире разработки информация будет поступать из базы данных или еще откуда-то. Но чтобы не рассеивать ваше внимание, мы сделаем это вручную. Другой характерный для коллекций момент – задание значения свойства model. При помощи него классу сообщается информация о типе хранимых данных. За счет остальных методов реализуется логика, касающаяся возможностей нашего приложения. При помощи функций up и down меняется порядок расположения записей. Для простоты мы будем идентифицировать каждое задание лишь при помощи индекса массива коллекции. Это означает, что если нам нужно получить одну конкретную запись, то мы должны указать ее индекс. Таким образом, для изменения порядка расположения записей нам необходимо лишь поменять местами элементы в массиве. Как вы можете догадаться из кода выше, this.models – тот массив, о котором мы говорим. При помощи archive и changeStatus задаются значения свойств переданного элемента. Мы добавляем эти методы здесь, так как у представлений будет доступ к коллекции ToDos, а не непосредственно к заданиям.

Также нам не нужно создавать какие-либо модели класса app.models.ToDo, однако нам действительно необходимо создать образец коллекции app.collections.ToDos.

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    return this;
}

Отображение нашего первого представления (Главного навигационного меню)

Первое, что нам нужно отобразить, – главное навигационное меню приложения.

// views/menu.js
app.views.menu = Backbone.View.extend({
    template: _.template($("#tpl-menu").html()),
    initialize: function() {
        this.render();
    },
    render: function(){
        this.$el.html(this.template({}));
    }
});

В файле выше только девять строк кода, однако там происходит много крутых вещей. Во-первых, определение шаблона. Помните, что мы добавили Underscore.js в приложение? Мы будем использовать ее шаблонизатор (* программное обеспечение для комбинирования шаблонов с моделью данных для получения конечных документов), поскольку он хорошо работает и им легко пользоваться.

1	_.template(templateString, [data], [settings])

В результате у вас получается функция, принимающая объект, содержащий вашу информацию в виде пар ключ-значение, и templateString – это HTML-разметка. Хорошо, значит в вышеприведенную функцию передается строка с HTML-разметкой, но зачем там используется $("#tpl-menu").html() ? При разработке небольших одностраничных приложений мы обычно добавляем шаблоны непосредственно в документ следующим образом:

1	// index.html
2	<script type="text/template" id="tpl-menu">
3	<ul>
4	<li><a href="#">List</a></li>
5	<li><a href="#archive">Archive</a></li>
6	<li class="right"><a href="#new">+</a></li>
7	</ul>
8	</script>

И поскольку это тег script, то шаблон не показывается пользователю. С другой стороны, это обычный узел DOM, так что мы могли бы получить его контент при помощи jQuery. Таким образом, при помощи небольшого фрагмента кода выше просто получается контент того тега script.

Метод render очень важен в Backbone.js. Это функция, при помощи которой отображаются данные. Обычно вы привязываете генерируемые моделью события непосредственно к этому методу. Однако в случае с главным меню нам этого не нужно.

1	this.$el.html(this.template({}));

this.$el – объект, созданный фреймворком, и у каждого представления он имеется по умолчанию (перед el имеется $, поскольку мы подключили jQuery). И по умолчанию его значением является пустой <div></div>. Естественно, вы можете изменить его при помощи свойства tagName. Однако здесь важнее то, что мы не присваиваем значение тому объекту непосредственно. Мы его не меняем, мы изменяем только его контент. Между строкой выше и следующей строкой существует большая разница:

1	this.$el = $(this.template({}));

Смысл в том, что если вы хотите увидеть изменения в браузере, то вы должны для начала вызвать метод render, чтобы добавить представление в DOM. Иначе будет добавлен только пустой элемент div. Также может быть другой сценарий, когда у вас имеются вложенные представления. А поскольку вы меняете непосредственно свойство, то родительский компонент не обновляется. Также может нарушиться привязка к событиям, и вам нужно будет снова подключать обработчики. Таким образом, вам действительно необходимо изменять только контент this.$el, а не значение свойства.

Теперь представление готово, и нам необходимо его инициализировать. Давайте добавим его в наш модуль фабрики:

// App.js
var ViewsFactory = {
    menu: function() {
        if(!this.menuView) {
            this.menuView = new api.views.menu({ 
                el: $("#menu")
            });
        }
        return this.menuView;
    }
};

Наконец, просто вызовите метод menu в области для самонастройки приложения:

// App.js
init: function() {
    this.content = $("#content");
    this.todos = new api.collections.ToDos();
    ViewsFactory.menu();
    return this;
}

Обратите внимание на то, что хотя мы и создаем новый образец класса навигационного меню, мы передаем уже существующий элемент DOM $("#menu"). Поэтому в свойстве this.$el внутри представления содержится ссылка собственно на $("#menu").

Добавление маршрутов

В Backbone.js имеется поддержка операций добавления состояний в стек. Другими словами, вы можете манипулировать текущим URL-адресом браузера и переходить между страницами. Однако мы воспользуемся старыми добрыми URL-адресами с хеш-префиксом (* хеш url – все, что идет после символа #), например /#edit/3.

// App.js
var Router = Backbone.Router.extend({
    routes: {
        "archive": "archive",
        "new": "newToDo",
        "edit/:index": "editToDo",
        "delete/:index": "delteToDo",
        "": "list"
    },
    list: function(archive) {},
    archive: function() {},
    newToDo: function() {},
    editToDo: function(index) {},
    delteToDo: function(index) {}
});

Выше приведен наш маршрутизатор. В хеше (* коллекция пар ключ-значение, причем ключом является строка) имеется пять маршрутов. Ключ – то, что вы будете набирать в адресной строке браузера, а значение – функция, которая будет вызываться. Обратите внимание на то, что в составе двух маршрутов имеется :index. Это соответствует синтаксису, которого вы должны придерживаться, если хотите реализовать поддержку динамических URL-адресов. В нашем случае, если вы наберете #edit/3, то при вызове editToDo в качестве значения параметра index будет передано 3. В последней паре содержится пустая строка, и это означает, что она используется для реализации перехода на домашнюю страницу нашего приложения.

Отображение всего списка заданий

На данный момент мы создали главное представление для нашего проекта. Данные будут переданы в него из коллекции и выведены на экран. Мы могли бы использовать одно и то же представление для двух целей – отображение всех активных заданий и тех, что помещены в архив.

Перед тем как продолжить реализацию представления для списка, давайте посмотрим, как оно собственно инициализируется.

// in App.js views factory
list: function() {
    if(!this.listView) {
        this.listView = new api.views.list({
            model: api.todos
        });
    }   
    return this.listView;
}

Обратите внимание на то, что мы передаем коллекцию. Это важно, поскольку позже мы воспользуемся this.model для получения сохраненных данных. Фабрика возвращает наше представление для списка, однако именно при помощи маршрутизатора оно должно быть добавлено на страницу.

// in App.js's router
list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
}

Пока что метод list в маршрутизаторе вызывается без каких-либо аргументов. Так что представление находится не в режиме archive; при помощи него будут отображаться только текущие задания.

// views/list.js
app.views.list = Backbone.View.extend({
    mode: null,
    events: {},
    initialize: function() {
        var handler = _.bind(this.render, this);
        this.model.bind('change', handler);
        this.model.bind('add', handler);
        this.model.bind('remove', handler);
    },
    render: function() {},
    priorityUp: function(e) {},
    priorityDown: function(e) {},
    archive: function(e) {},
    changeStatus: function(e) {},
    setMode: function(mode) {
        this.mode = mode;
        return this;
    }
});

Свойство mode будет использовано при рендеринге. Если его значением является "archive", то будут отображены только находящиеся в архиве записи. events – объект, который мы заполним очень скоро. Это место, где мы назначаем событиям DOM соответствующие обработчики. Остальные методы используются для отклика на действия со стороны пользователя и непосредственно для реализации необходимых возможностей приложения. Например, при помощи priorityUp и priorityDown меняется порядок расположения заданий. За счет archive элемент перемещается в архив. При помощи changeStatus отмечается, что задание выполнено.

В методе initialize происходит нечто интересное. Ранее мы упомянули, что обычно вы будете подвязывать к событиям, возникающим при изменениях в модели (коллекции в нашем случае), метод render представления. Вы можете написать this.model.bind('change', this.render). Однако очень скоро вы заметите, что ключевое слово this в методе render не будет указывать на само представление. Так происходит из-за смены области видимости. В качестве обходного пути мы создаем обработчик с уже заданной областью видимости. Именно для этого и служит функция bind Underscore.

А ниже приводится реализация метода render.

// views/list.js
render: function() {)
    var html = '<ul class="list">', 
        self = this;
    this.model.each(function(todo, index) {
        if(self.mode === "archive" ? todo.get("archived") === true : todo.get("archived") === false) {
            var template = _.template($("#tpl-list-item").html());
            html += template({ 
                title: todo.get("title"),
                index: index,
                archiveLink: self.mode === "archive" ? "unarchive" : "archive",
                done: todo.get("done") ? "yes" : "no",
                doneChecked: todo.get("done")  ? 'checked=="checked"' : ""
            });
        }
    });
    html += '</ul>';
    this.$el.html(html);
    this.delegateEvents();
    return this;
}

Мы перебираем все модели коллекции и генерируем HTML-строку, которая позднее вставляется в DOM-элемент представления. Выполняется несколько проверок для определения того, принадлежат ли задания к тем, что находятся в архиве, или к текущим. При помощи флажка отмечается, что задание выполнено. Так что, для того чтобы это указать, нам необходимо передать атрибут checked=="checked" тому элементу. Вы, вероятно, заметили, что мы используем this.delegateEvents(). В нашем случае это необходимо, поскольку мы отвязываем представление от DOM и привязываем его к нему. Да, мы не заменяем главный элемент, однако обработчики событий удаляются. Поэтому нам необходимо указать Backbone.js, что их следует снова подключить. Использованный в коде выше шаблон выглядит следующим образом:

// index.html
<script type="text/template" id="tpl-list-item">
    <li class="cf done-<%= done %>" data-index="<%= index %>">
        <h2>
            <input type="checkbox" data-status <%= doneChecked %> />
            <a href="javascript:void(0);" data-up>&#8593;</a>
            <a href="javascript:void(0);" data-down>&#8595;</a>
            <%= title %>
        </h2>
        <div class="options">
            <a href="#edit/<%= index %>">edit</a>
            <a href="javascript:void(0);" data-archive><%= archiveLink %></a>
            <a href="#delete/<%= index %>">delete</a>
        </div>
    </li>
</script>

Обратите внимание, что указан класс CSS под названием done-yes, при помощи которого задание отображается с зеленым фоном. Помимо этого имеется множество ссылок, которые мы будем использовать для реализации необходимых функциональных возможностей. У них всех имеются собственные атрибуты HTML5 Data. У главного узла элемента, li, имеется data-index. При помощи значения этого атрибута указывается индекс задания в коллекции. Обратите внимание на то, что специальные выражения, обернутые в <%= ... %>, передаются в функцию template. Это данные, передаваемые в шаблон.

Пора добавить некоторые события для представления.

// views/list.js
events: {
    'click a[data-up]': 'priorityUp',
    'click a[data-down]': 'priorityDown',
    'click a[data-archive]': 'archive',
    'click input[data-status]': 'changeStatus'
}

В Backbone.js для определения событий используется просто хеш. Сначала вы указываете имя события, а затем – селектор. Значения свойств являются собственно методами представления.

// views/list.js
priorityUp: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.up(index);
},
priorityDown: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.down(index);
},
archive: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.archive(this.mode !== "archive", index); 
},
changeStatus: function(e) {
    var index = parseInt(e.target.parentNode.parentNode.getAttribute("data-index"));
    this.model.changeStatus(e.target.checked, index);       
}

Здесь мы используем e.target, передаваемый в обработчик. В нем находится ссылка на элемент DOM, сгенерировавший событие. Мы получаем индекс выбранного задания и обновляем модель в коллекции. После добавления этих четырех функций наш класс готов, и теперь данные отображаются на странице.

Как было упомянуто ранее, мы будем использовать то же самое представление и для страницы Archive.

list: function(archive) {
    var view = ViewsFactory.list();
    api
    .title(archive ? "Archive:" : "Your ToDos:")
    .changeContent(view.$el);
    view.setMode(archive ? "archive" : null).render();
},
archive: function() {
    this.list(true);
}

Выше представлен тот же обработчик для маршрута, что и ранее, однако в этот раз ему в качестве аргумента передается значение true.

Реализация возможности добавления и редактирования заданий

Следуя примеру представления для списка, мы могли бы создать другое, при помощи которого отображается форма для добавления и редактирования заданий. Ниже показано, как создается класс для этого:

// App.js / views factory
form: function() {
    if(!this.formView) {
        this.formView = new api.views.form({
            model: api.todos
        }).on("saved", function() {
            api.router.navigate("", {trigger: true});
        })
    }
    return this.formView;
}

Код очень похож на тот, что видели ранее. Однако, в этот раз нам необходимо кое-что выполнить после отправления формы, а именно перенаправить пользователя на главную страницу. Как я сказал ранее, каждый объект, который наследует характеристики классов Backbone.js, является собственно распределителем событий. Имеются методы вроде on и trigger, которыми вы можете воспользоваться.

Перед тем как мы продолжим разбираться с представлением, давайте взглянем на HTML-шаблон:

<script type="text/template" id="tpl-form">
    <form>
        <textarea><%= title %></textarea>
        <button>save</button>
    </form>
</script>

У нас имеется textarea и button. В шаблон должен передаваться аргумент title, значением которого должна быть пустая строка, если мы добавляем новое задание.

// views/form.js
app.views.form = Backbone.View.extend({
    index: false,
    events: {
        'click button': 'save'
    },
    initialize: function() {
        this.render();
    },
    render: function(index) {
        var template, html = $("#tpl-form").html();
        if(typeof index == 'undefined') {
            this.index = false;
            template = _.template(html, { title: ""});
        } else {
            this.index = parseInt(index);
            this.todoForEditing = this.model.at(this.index);
            template = _.template($("#tpl-form").html(), {
                title: this.todoForEditing.get("title")
            });
        }
        this.$el.html(template);
        this.$el.find("textarea").focus();
        this.delegateEvents();
        return this;
    },
    save: function(e) {
        e.preventDefault();
        var title = this.$el.find("textarea").val();
        if(title == "") {
            alert("Empty textarea!"); return;
        }
        if(this.index !== false) {
            this.todoForEditing.set("title", title);
        } else {
            this.model.add({ title: title });
        }   
        this.trigger("saved");      
    }
});

Код представления содержит всего лишь 40 строк, однако он выполняет свою задачу. Имеется всего один обработчик события, которое возникает при нажатии кнопки save. Метод render ведет себя по-разному в зависимости от значения переданного аргумента index. Например, если мы редактируем запись, то передаем индекс и получаем конкретную модель. Если нет, то форма пуста и будет создано новое задание. В коде выше есть несколько интересный моментов. Во-первых, в render ми воспользовались методом .focus() для перемещения фокуса в форму сразу после отображения представления. Опять-таки, должна быть вызвана функция delegateEvents, поскольку форма могла бы быть отвязана и привязана снова. Метод save начинается с e.preventDefault(). В результате поведение кнопки по умолчанию отменяется, которое в некоторых случаях может заключаться в отправлении формы. В конце, после того как все выполнено, мы генерируем событие saved, при помощи которого остальные части системы оповещаются о том, что задание сохранилось в коллекцию.

Нам необходимо реализовать два метода для маршрутизатора.

// App.js
newToDo: function() {
    var view = ViewsFactory.form();
    api.title("Create new ToDo:").changeContent(view.$el);
    view.render()
},
editToDo: function(index) {
    var view = ViewsFactory.form();
    api.title("Edit:").changeContent(view.$el);
    view.render(index);
}

Разница между ними заключается в том, что мы передаем index, если переход выполняется по маршруту edit/:index. И, конечно же, заголовок страницы меняется соответствующим образом.

Реализация возможности удаления записи из коллекции

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

1	delteToDo: function(index) {
2	api.todos.remove(api.todos.at(parseInt(index)));
3	api.router.navigate("", {trigger: true});
4	}

Нам известен индекс задания, которое мы хотим удалить. Имеется метод remove класса коллекции, который принимает объект модели. В конце перенаправляем пользователя на главную страницу, где отображается обновленный список.

Заключение

Backbone.js предоставляет вам все возможности, необходимые для создания полнофункциональных одностраничных приложений. Мы бы могли даже привязать его к RESTful веб-службе (* веб-служба, построенная с учётом REST (Representational State Transfer – передача состояния представления) на стороне сервера, и при помощи этого фреймворка данные вашего приложения были бы синхронизированы с базой данных. За счет событийно-управляемого подхода разработки (* стиль проектирования программных систем, при котором поведение компонента системы определяется набором возможных внешних событий и ответных реакций компонента на них) нам становится легче использовать метод модульного программирования (* один из ранних методов проектирования программ. Вся программа разбивается на модули, каждый из которых выполняет одну функцию и содержит в себе весь необходимый для этого код и переменные, что позволяет программировать и отлаживать его отдельно. Затем модули постепенно собираются вместе, пока не будет реализована вся система. Этот подход позволил уменьшить сложность разработки и отладки больших программ. Принципы модульного программирования стали составной частью ООП) и построить хорошую архитектуру. Лично я использую Backbone.js для нескольких проектов, и он отлично работает.