Створення односторінкового додатка для складання списку завдань за допомогою 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 нема дуже строгих архітектурних принципів, яких нам варто дотримуватися. Це є однією з переваг даного фреймворка. Так що, перед тим як взятися за реалізацію бізнес-логіки, давайте розглянемо основні принципи.

Визначення простору імен

(* набір правил іменування, що регулює видимість об'єктів у програмі або хост-комп'ютерів у комп'ютерній мережі. Простір імен може бути плоским (flat namespace) та ієрархічним (hierarchical namespace). Передбачено, що всі імена у просторі імен мають бути унікальними). Згідно з усталеною практикою ваш код потрібно розташовувати в його власній області видимості (* області тексту програми, де можна використати заданий ідентифікатор (ім'я змінної, іменована константи, назва функції тощо). Область видимості можна змінити, перевизначивши ідентифікатор, але краще просто не використовувати в різних блоках програми однакові імена). Реєстрація глобальних змінних або функцій – погана ідея. Ми створимо одну модель, одну колекцію, маршрутизатор та декілька представлень 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 для декількох проектів, і він відмінно працює.