Перед началом этого урока, Вам понадобится cледующее:
- alexyoung/dailyjs-backbone-tutorial коммит
fcd653ec6
- API key из части 2
- Client ID из части 2
- обновить
app/js/config.js
полученными значениями (если Вы зачекаутили мой репо)
Чтобы получить исходный код, выполните следующую команду (или используйте подходящую Git UI утилиту):
$ git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
$ cd dailyjs-backbone-tutorial
$ git reset --hard fcd653ec6
Создаваемое нами приложение имеет несколько основных элементов интерфейса:
- двух колоночное расположение для показа списков задач и самих задач
- формы для добавления и редактирования задач
- кнопки для вызова форм, удаления элементов и очистки сделанных задач
- чекбокс, отображающий состояние задачи (сделано или нет)
Картинка ниже демонстрирует базовое расположение элементов:
В этом посте мы начнём реализацию интерфейса, используя несортированный список для отображения списков задач.
Несмотря на относительную простоту, реализация навигабельных списков задач требует использования нескольких элементов Backbone.js:
- HTML шаблоны
- Backbone представления:
ListMenuView
,ListMenuItemView
- Backbone коллекции:
TaskLists
Предтавление ListMenuView
содержит меню списка задач, а представление
ListMenuItemView
— элемент навигации для каждого списка задач. Оно
может быть реализовано с помощью ul
и множества li
элементов.
Для хранения Backbone.View
классов, связанных со списками задач,
создадим новую директорию app/js/views/lists
. А для хранения
соответствующих шаблонов, создадим директорию app/js/templates/lists
:
$ mkdir app/js/views/lists
$ mkdir app/js/templates/lists
ListMenuView
¶Откройте app/js/app.js
и добавьте ListMenuView
в список зависимостей
define
:
define([
'gapi'
, 'views/app'
, 'views/auth'
, 'views/lists/menu'
, 'collections/tasklists'
],
function(ApiManager, AppView, AuthView, ListMenuView, TaskLists) {
В прошлом уроке я добавил вызов
console.log
, чтобы напечатать в консоле имена списков. Удалите тот
код и замените его на следующий, который будет отрисовывать ListMenuView
:
connectGapi: function() {
var self = this;
this.apiManager = new ApiManager(this);
this.apiManager.on('ready', function() {
self.collections.lists.fetch({ data: { userId: '@me' }, success: function(res) {
self.views.listMenu.render();
}});
});
}
Теперь вернитесь в конструктор App
и добавьте создание инстанса
listMenu
:
var App = function() {
this.views.app = new AppView();
this.views.app.render();
this.views.auth = new AuthView(this);
this.views.auth.render();
this.collections.lists = new TaskLists();
this.views.listMenu = new ListMenuView({
collection: this.collections.lists
});
this.connectGapi();
};
Теперь, если Вы выполните команду node server
и откроете страницу
http://127.0.0.1:8080
, Вы должны увидеть списки задач в простом
несортированном списке.
Теперь наше приложение взаимодействует с Google, позволяет пользователям выполнть вход и отображает списки дел пользователя. Пока, конечно, наше приложение не выглядит потрясающе, так как мы не добавляли никаких стилей. Но зато теперь Вы способны приспособить увиденный код для работы с другими Google API или похожими сервисами.
Все изменения — одной пачкой.