docs.org.ua
Open in
urlscan Pro
2a00:7a60:0:1012::1
Public Scan
URL:
https://docs.org.ua/
Submission: On November 17 via api from US — Scanned from DE
Submission: On November 17 via api from US — Scanned from DE
Form analysis 0 forms found in the DOM
Text Content
Backbone.js (1.6.0)
* » Репозиторій GitHub
* » Анотоване джерело
Починаємо
* - Вступ
* – Моделі та види
* – Колекції
* – Інтеграція API
* – Візуалізація
* – Маршрутизація
Події (Events)
* – on
* – off
* – trigger
* – once
* – listenTo
* – stopListening
* – listenToOnce
* - Catalog of Built-in Events
Модель (Model)
* – extend
* – preinitialize
* – constructor / initialize
* – get
* – set
* – escape
* – has
* – unset
* – clear
* – id
* – idAttribute
* – cid
* – cidPrefix
* – attributes
* – changed
* – defaults
* – toJSON
* – sync
* – fetch
* – save
* – destroy
* – Underscore методи
* – validate
* – validationError
* – isValid
* – url
* – urlRoot
* – parse
* – clone
* – isNew
* – hasChanged
* – changedAttributes
* – previous
* – previousAttributes
Колекція (Collection)
* – extend
* – model
* – modelId
* – preinitialize
* – constructor / initialize
* – models
* – toJSON
* – sync
* – Underscore Methods (46)
* – add
* – remove
* – reset
* – set
* – get
* – at
* – push
* – pop
* – unshift
* – shift
* – slice
* – length
* – comparator
* – sort
* – pluck
* – where
* – findWhere
* – url
* – parse
* – clone
* – fetch
* – create
* – mixin
Маршрутизатор (Router)
* – extend
* – routes
* – preinitialize
* – constructor / initialize
* – route
* – navigate
* – execute
історія (history)
* – start
Синхронізація (Sync)
* – Backbone.sync
* – Backbone.ajax
* – Backbone.emulateHTTP
* – Backbone.emulateJSON
Відображення (View)
* – extend
* – preinitialize
* – constructor / initialize
* – el
* – $el
* – setElement
* – attributes
* – $ (jQuery)
* – template
* – render
* – remove
* – events
* – delegateEvents
* – undelegateEvents
Утиліта (Utility)
* – Backbone.noConflict
* – Backbone.$
* – debugInfo
FAQ
* – Чому Backbone?
* – Більш ніж один спосіб зробити це
* – Вкладені моделі та колекції
* – Завантаження початкових моделей
* – Розширення магістралі
* – Традиційний MVC
* – Прив'язка "this"
* – Робота з Rails
Приклади
* – Тодось
* – DocumentCloud
* – USA Today
* – Рдіо
* – Хулу
* – Кварц
* – Земля
* – Вокс
* – Gawker Media
* – Потік
* – Gilt Groupe
* – Енігма
* – NewsBlur
* – WordPress.com
* – Чотирикутник
* – Бітбакет
* – Обговорення
* – Смачно
* – Академія Хана
* – IRCCloud
* – Вила
* – Спін
* – ZocDoc
* – Walmart Mobile
* – Groupon зараз!
* – Базовий табір
* – Слід рабства
* – Смужка
* – Airbnb
* – SoundCloud Mobile
* - ст.с
* – Пандора
* – Натякаючи
* – Школа коду
* – CloudApp
* – SeatGeek
* – Мольберт
* - Jolicloud
* – Salon.io
* – плитковий фрез
* – Цвіти
* – Trello
* – Цігла
Журнал змін
БАЗОВА ДОКУМЕНТАЦІЯ JS-ФРЕЙМВОКА BACKBONE.JS УКРАЇНСЬКОЮ З ПРИКЛАДАМИ
Backbone.js надає структуру веб-додаткам, надаючи моделі зі зв’язуванням ключів
і значень і корисними подіями, колекцію з багатим API перерахованих функцій,
представлення з декларативною обробкою подій і підключаючи все це до вашого
існуючого API через інтерфейс RESTful JSON.
Проект розміщено на GitHub , і доступний анотований вихідний код , а також набір
онлайнових тестів , прикладних програм , список навчальних посібників і довгий
список реальних проектів , які забезпечують Backbone. Backbone доступний для
використання за ліцензією на програмне забезпечення MIT .
Ви можете повідомляти про помилки та обговорювати функції на проблемі сторінки
GitHub або додавати сторінки у віки .
Backbone — це компонент DocumentCloud з відкритим кодом.
ЗАВАНТАЖЕННЯ ТА ВЗАЄМОДІЯ (КЛАЦНІТЬ ПРАВОЮ КНОПКОЮ МИШІ ТА СКОРИСТАЙТЕСЯ
«ЗБЕРЕГТИ ЯК»)
Версія розробки (1.6.0) 72 кб, повне джерело, безліч коментарів Робоча версія
(1.6.0) 7,9 Кб, запаковано та стиснуто gzip
( вихідна карта ) Версія Edge (основна) Неопубліковано, використовуйте свій
страх і ризик
Єдиною жорсткою залежністю Backbone є Underscore.js (>= 1.8.3) . Для стійкості
RESTful і маніпуляції DOM за допомогою Backbone.View включіть jQuery (>=
1.11.0). (Імітатори Underscore і jQuery API, такі як Lodash і Zepto , також, як
правило, працюють із різним ступенем сумісності.)
ПОЧИНАЄМО
Працюючи над веб-програмою, яка включає багато JavaScript, одну з перших речей,
про які ви бачите, ви залишили прив'язувати свої дані до DOM. Надто легко
створювати програми JavaScript, які закінчуються заплутаною купою селекторів і
зворотних викликів jQuery, які відчайдушно намагаються підтримувати
синхронізацію даних між інтерфейсом користувача HTML, вашою логікою JavaScript і
базою даних на вашому сервері. Для багатофункціональних програм на стороні
клієнта часто корисним є більш структурований підхід.
За допомогою Backbone ви представляєте свої дані як моделі , які можна створити,
перевірити, знищити та зберегти на сервері. Щоразу, коли дія інтерфейсу
користувача змінює зміну атрибута моделі, модель запускає подію "зміна" ; всі
представлення , які відображають стан моделі, можуть бути повідомлені про зміну,
щоб вони могли відповідати відповідним чином, повторно відображаючи себе з новою
інформацією. У готовій програмі Backbone вам не потрібно писати з’єднувальний
код, який переглядає DOM, щоб знайти елементи з певним ідентифікатором , і
оновлювати HTML вручну — коли змінюється модель, перегляди просто оновлюються
самі.
З філософської точки зору Backbone — це спроба виявити мінімальний набір
примітивів структурування даних (моделі та колекції) та інтерфейсу користувача
(перегляди та URL-адреси), які зараз корисні під час створення веб-додатків за
допомогою JavaScript. В екосистемі, де всеохоплюючі фреймворки, які вирішують
усе для вас, є звичним явищем, а багато бібліотек вимагають реорганізації вашого
сайту відповідно до їхнього вигляду, відчуття та поведінки замовчуванням —
Backbone має й надалі залишатися інструментом, який дає вам свободу створити
повний досвід вашої веб-програми.
Якщо ви тут новачок і не зовсім впевнені, для чого потрібна Backbone, почніть із
переглядом ще списку проектів на основі Backbone .
Багато прикладів коду в цій документації можна відмовити, через Backbone
включено на цю сторінку. Натисніть кнопку відтворення , щоб виконати їх.
МОДЕЛІ ТА ВИДИ
Єдина річ, у якій Backbone може вам допомогти, — це відокремлення бізнес-логіки
від інтерфейсу користувача. Коли вони переплутані, змінюються важко; коли логіка
не залежить від інтерфейсу користувача, з інтерфейсом стає легше працювати.
Модель
* Керує даними та бізнес-логікою.
* Завантажує та зберігає дані з сервера.
* Видає події, коли дані змінюються.
Переглянути
* Слухає зміни та рендерить інтерфейс користувача.
* Обробляє введення даних користувача та інтерактивність.
* Надсилає отримані дані в моделі.
Модель керує внутрішньою таблицею атрибутів даних і запускає події "зміни" ,
коли будь-які її дані змінюються. Моделі обробляють синхронізацію даних за
допомогою рівня збереження — традиційно REST API із резервною базою даних.
Створюйте свої моделі як атомарні багаторазово використовувані об'єкти, що
містять усі корисні функції для маніпулювання їхніми окремими частинами даних
Моделі мають передаватись у вашу програму та використовуватися там, де потрібні
дані.
Представлення — це атомна частина інтерфейсу користувача. Він часто рендерить
дані з певної моделі або кількох моделей, але представлення також може бути
самостійними фрагментами інтерфейсу без даних. Моделі, як правило, не треба
знати про погляди. Замість цього представлення прислухаються до подій «change»
моделі та реагують або повторно відображаються належним чином.
КОЛЕКЦІЇ
Колекція працює з групою пов'язаних моделей, керуючи збереженням завантаження з
новими моделями на сервері та надаючи допоміжні функції для виконання агрегацій
або обчислень зі списком моделей . Крім власних подій, колекції також проксі
через усі події, які відбуваються з моделями в них, дозволяючи вам
прослуховувати в одному місці будь-які зміни, які можуть статися з будь-якою
моделлю в колекції.
ІНТЕГРАЦІЯ API
Backbone попередньо налаштовано для синхронізації з RESTful API. Просто створіть
нову колекцію з URL-адресою кінцевої точки вашого ресурсу:
var Books = Backbone.Collection.extend({
url: '/books'
});
Компоненти Collection і Model разом безпосередньо безпосередньо відображення
ресурсів REST за допомогою таких методів :
GET /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET /books/1 ... model.fetch();
PUT /books/1 ... model.save();
DEL /books/1 ... model.destroy();
Під час отримання необроблених даних JSON з колекції API автоматично
заповнюється даними, відформатованими як масив, потім як модель автоматично
заповнюється даними, відформатованими як об’єкт:
[{"id": 1}] ..... заповнює колекційну модель.
{"id": 1} ....... заповнює модель одним атрибутом.
Однак часто досить можна зустріти API, які повертають дані у форматі, відмінному
від очікуваного Backbone. Наприклад, спробуйте отримати колекцію з API, яка
повертає реальний масив даних, загорнутий у метадані:
{
"сторінка": 1,
"ліміт": 10,
"усього": 2,
"книги": [
{"id": 1, "title": "Гордість і упередження"},
{"id": 4, " title": "Великий Гецбі"}
]
}
У наведених вище прикладах даних Колекція повинна заповнюватися за допомогою
масиву «книги» , а не структури кореневого об'єкта. Цю різницю легко узгодити за
допомогою методу аналізу , який повертає (або перетворює) потребує всіх даних
API:
var Books = Backbone.Collection.extend({
url: '/books',
parse: function(data) {
return data.books;
}
});
ПЕРЕГЛЯНУТИ ВІЗУАЛІЗАЦІЮ
Кожне представлення керує рендерингом і взаємодією з користувачем у своєму
власному елементі DOM. Якщо ви суворо забороняєте представленням виходити за
межі себе, це допоможе зберегти ваш інтерфейс гнучким — дозволяючи
представленням відображатися ізольовано в будь-якому місці, де вони можуть
знадобитися.
Backbone не має жодної думки щодо процесу, який використовується для рендерингу
об’єктів View та їхніх підвидів у користувальницький інтерфейс: вибирайте, як
ваші моделі перекладаються в HTML (або SVG, чи Canvas, чи щось ще більш
екзотичне). Це може бути таким же прозаїчним, як простий шаблон Underscore , або
таким же химерним, як віртуальний DOM React . Деякі основні підходи до
візуалізації переглядів можна знайти в Backbone Primer .
МАРШРУТИЗАЦІЯ ЗА ДОПОМОГОЮ URL-АДРЕСИ
У розширених веб-додатках ми все ще хочемо розміщувати посилання, закладки та
спільні URL-адреси до значущих місць у програмі. Використовуйте маршрутизатор ,
щоб оновити URL-адресу браузера щоразу, якщо користувач переходить до нового
«місця» у вашій програмі, яку він може захотіти зробити закладкою або
поділитися. І навпаки, маршрутизатор ви відображаєте зміни URL-адреси — скажемо,
натиснувши кнопку «Назад» — і можете повідомити вашу програму, де саме ви зараз
перебуваєте.
BACKBONE.EVENTS
Події — це модуль, який можна додати до будь-якого об'єкта, надаючи об'єкту
можливість прив'язувати та запускати спеціальні іменовані події. Події не
потрібно оголошувати перед тим, як їх зв'язати, і вони можуть прийняти передані
аргументи. наприклад:
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
alert("Triggered " + msg);
});
object.trigger("alert", "an event");
Наприклад, щоб створити зручний диспетчер подій, який може координувати події
між широкими областями вашої програми: var dispatcher = _.clone(Backbone.Events)
on object.on(event, callback, [context])Alias: bind
Прив'язує функцію зворотного виклику до об'єкта. Зворотний виклик буде викликано
кожного разу, коли буде запущена подія . Якщо у вас є велика кількість
різноманітних подій на сторінці, умовно виберіть двокрапки для їхнього простору
з іменем: "poll:start" або "change:selection" . Рядок подій також може бути
розділеним пробілом у списку кількох подій...
book.on("change:title change:author", ...);
Зворотні виклики, пов’язані зі спеціальною подією «все» , запускатимуться, коли
відбудеться будь-яка подія, і їм передається назва події як перший аргумент.
Наприклад, щоб проксі всі події від одного об’єкта до іншого:
proxy.on("all", function(eventName) {
object.trigger(eventName);
});
Усі методи подій Backbone також підтримують синтаксис карти подій як
альтернативу позиційним аргументам:
book.on({
"change:author": authorPane.update,
"change:title change:subtitle": titleView.update,
"destroy": bookView.remove
});
Щоб надати контекстне значення для цього під час виклику зворотного виклику,
передайте необов’язковий останній аргумент: model.on('change', this.render,
this) або model.on({change: this.render}, this) .
off object.off([event], [callback], [context])Псевдонім: unbind Видалити з
об’єкта функцію зворотного виклику
, яка була раніше зв’язана . Якщо контекст не вказано, усі версії зворотного
виклику з різними контекстами буде видалено. Якщо зворотний виклик не вказано,
усі зворотні виклики для події буде видалено. Якщо подія не вказана, зворотні
виклики для всіх подій буде видалено.
// Вилучає лише зворотний виклик `onChange`.
object.off("change", onChange);
// Видаляє всі зворотні виклики "change".
object.off("change");
// Вилучає зворотний виклик `onChange` для всіх подій.
object.off(null, onChange);
// Видаляє всі зворотні виклики для `context` для всіх подій.
object.off(null, null, context);
// Видаляє всі зворотні виклики для `object`.
object.off();
Зауважте, що виклик model.off() , наприклад, справді видалить усі події в
моделі, включаючи події, які Backbone використовує для внутрішнього обліку.
trigger Запускаєobject.trigger(event, [*args])
зворотні виклики для даної події або списку подій, розділених пробілами.
Подальші аргументи ініціатора будуть передані до зворотних викликів події.
onceobject.once(event, callback, [context])
Так само, як і на , але змушує зв’язаний зворотний виклик запускатися лише один
раз перед видаленням. Зручно сказати «зробіть це наступного разу, коли трапиться
X». Коли кілька подій передаються за допомогою синтаксису, розділеного
пробілами, подія запускатиметься один раз для кожної переданої події, а не один
раз для комбінації всіх подій
listenToobject.listenTo(other, event, callback)
Вказує об’єкту прослухати певну подію на іншому об’єкті. Перевага використання
цієї форми замість other.on(event, callback, object) полягає в тому, що listenTo
дозволяє об’єкту відстежувати події, і їх можна видалити всі одразу пізніше.
Зворотний виклик завжди буде викликатися з об’єктом як контекстом.
view.listenTo(model, 'change', view.render);
stopListeningobject.stopListening([other], [event], [callback])
Скажіть об'єкту припинити слухати події. Або викличте stopListing без
аргументів, щоб об’єкт видалив усі зареєстровані зворотні виклики... або будьте
точнішими, наказавши йому видалити лише події, які він прослуховує для певного
об’єкта, або конкретну подію, або лише певний зворотний виклик.
view.stopListening();
view.stopListening(model);
listenToOnceobject.listenToOnce(other, event, callback)
Так само, як і listenTo , але змушує пов’язаний зворотний виклик запускатися
лише один раз перед видаленням.
Каталог подій
Ось повний список вбудованих подій Backbone з аргументами. Ви також можете
запускати власні події в моделях, колекціях і представленнях, як вважаєте за
потрібне. Сам об’єкт Backbone змішується з Events і може використовуватися для
випромінювання будь-яких глобальних подій, необхідних вашій програмі.
* «add» (model, collection, options) — коли модель додається до колекції.
* "remove" (model, collection, options) — коли модель видаляється з колекції.
* "update" (collection, options) — одна подія, що запускається після додавання,
видалення або зміни будь-якої кількості моделей у колекції.
* "reset" (collection, options) — коли весь вміст колекції було скинуто .
* "sort" (collection, options) — коли колекція була пересортована.
* "change" (model, options) — коли змінилися атрибути моделі.
* "changeId" (model, previousId, options) — коли ідентифікатор моделі було
оновлено.
* "change:[attribute]" (model, value, options) — коли певний атрибут було
оновлено.
* «destroy» (model, collection, options) — коли модель знищується .
* "request" (model_or_collection, xhr, options) — коли модель або колекція
почала запит до сервера.
* "sync" (model_or_collection, response, options) — коли модель або колекцію
успішно синхронізовано із сервером.
* "error" (model_or_collection, xhr, options) — коли запит моделі чи колекції
до сервера завершився помилкою.
* "invalid" (model, error, options) — коли перевірка моделі не виконується на
клієнті.
* "route:[name]" (options) — запускається маршрутизатором, коли збігається
певний маршрут.
* "route" (route, params) — запускається маршрутизатором, коли знайдено
будь-який маршрут.
* "route" (router, route, params) — запускається історією, коли знайдено
будь-який маршрут.
* "notfound" () — запускається історією, коли не вдається знайти маршрут.
* "all" — ця спеціальна подія запускається для будь-якої ініційованої події,
передаючи назву події як перший аргумент, за яким слідують усі аргументи
тригера.
Загалом, під час виклику функції, яка створює подію ( model.set , collection.add
тощо...), якщо ви хочете запобігти запуску події, ви можете передати {silent:
true} як варіант. Зауважте, що це рідко , можливо навіть ніколи, гарна ідея.
Перехід через певний прапорець у параметрах для вашого зворотного виклику події,
щоб переглянути та вибрати ігнорування, зазвичай працює краще.
ХРЕБЕТ. МОДЕЛЬ
Моделі є серцевиною будь-якої програми JavaScript, яка містить інтерактивні
дані, а також значну частину логіки, що їх оточує: перетворення, перевірки,
обчислені властивості та контроль доступу. Ви розширюєте Backbone.Model своїми
методами, що стосуються домену, а Model надає базовий набір функцій для
керування змінами.
Нижче наведено надуманий приклад, але він демонструє визначення моделі за
допомогою спеціального методу, встановлення атрибута та запуск події, пов’язаної
зі змінами в цьому конкретному атрибуті. Після одного запуску цього коду бічна
панель стане доступною на консолі вашого браузера, тож ви можете пограти з ним.
var Sidebar = Backbone.Model.extend({
promptColor: function() {
var cssColor = prompt("Please enter a CSS color:");
this.set({color: cssColor});
}
});
window.sidebar = new Sidebar;
sidebar.on('change:color', function(model, color) {
$('#sidebar').css({background: color});
});
sidebar.set({color: 'white'});
sidebar.promptColor();
extendBackbone.Model.extend(properties, [classProperties])
Щоб створити власний клас Model , ви розширюєте Backbone.Model і надаєте
властивості екземпляра , а також додаткові classProperties, які потрібно
приєднати безпосередньо до функції конструктора.
extend правильно встановлює ланцюжок прототипів, тому підкласи, створені за
допомогою extend , можна далі розширювати та створювати підкласи, скільки
завгодно.
var Note = Backbone.Model.extend({
initialize: function() { ... },
author: function() { ... },
coordinates: function() { ... },
allowedToEdit: function(account) {
return true;
}
});
var PrivateNote = Note.extend({
allowedToEdit: function(account) {
return account.owns(this);
}
});
Коротко про super : JavaScript не надає простого способу виклику super —
однойменної функції, визначеної вище в ланцюжку прототипів. Якщо ви замінюєте
основну функцію, як-от set або save , і хочете викликати реалізацію
батьківського об’єкта, вам доведеться явно викликати її за такими лініями:
var Note = Backbone.Model.extend({
set: function(attributes, options) {
Backbone.Model.prototype.set.apply(this, arguments);
...
}
});
preinitializenew Model([attributes], [options])
Для використання з моделями як класами ES. Якщо ви визначите метод попередньої
ініціалізації, він буде викликаний під час першого створення моделі, перш ніж
запуститься будь-яка логіка створення екземпляра моделі.
class Country extends Backbone.Model {
preinitialize({countryCode}) {
this.name = COUNTRY_NAMES[countryCode];
}
initialize() { ... }
}
constructor / initializenew Model([attributes], [options])
Під час створення екземпляра моделі ви можете передати початкові значення
атрибутів , які будуть set на моделі. Якщо ви визначаєте функцію ініціалізації ,
вона буде викликана під час створення моделі.
new Book({
title: "Тисяча і одна ніч",
author: "Шахерезада"
});
У рідкісних випадках, якщо ви хочете пофантазувати, ви можете перевизначити
constructor , що дозволить вам замінити фактичну функцію конструктора для вашої
моделі.
var Library = Backbone.Model.extend({
constructor: function() {
this.books = new Books();
Backbone.Model.apply(this, arguments);
},
parse: function(data, options) {
this.books.reset(data.books);
return data.library;
}
});
Якщо ви передаєте {collection: ...} як параметри , модель отримує властивість
колекції , яка використовуватиметься для вказівки, до якої колекції належить
модель, і використовується для обчислення URL-адреси моделі . Властивість
model.collection зазвичай створюється автоматично , коли ви вперше додаєте
модель до колекції. Зауважте, що зворотне не вірно, оскільки передача цього
параметра конструктору не призведе до автоматичного додавання моделі до
колекції. Корисно, іноді.
Якщо {parse: true} передано як параметр , атрибути спочатку будуть перетворені
за допомогою set , перш ніж установлюватися в моделі.
getmodel.get(attribute)
Отримати поточне значення атрибута з моделі. Наприклад: note.get("title")
setmodel.set(attributes, [options])
Встановити хеш атрибутів (один або багато) моделі. Якщо будь-який із атрибутів
змінює стан моделі, у моделі запускається подія "зміна" . Події зміни для певних
атрибутів також запускаються, і ви також можете зв’язатися з ними, наприклад:
change:title та change:content . Ви також можете передати окремі ключі та
значення.
note.set({title: "20 березня", content: "В його очах вона затьмарює..."});
book.set("title", "Скандал у Богемії");
escapemodel.escape(attribute)
Подібно до get , але повертає HTML-екрановану версію атрибута моделі. Якщо ви
інтерполюєте дані з моделі в HTML, використання escape для отримання атрибутів
запобігатиме атакам XSS .
var hacker = new Backbone.Model({
ім'я: "<script>alert('xss')</script>"
});
alert(hacker.escape('name'));
hasmodel.has(attribute)
Повертає true , якщо для атрибута встановлено ненульове або невизначене
значення.
if (note.has("title")) {
...
}
unsetmodel.unset(attribute, [options])
Видалити атрибут, видаливши його з хешу внутрішніх атрибутів. Викликає подію
"зміна" , якщо не вказано безмовний параметр.
clearmodel.clear([options])
Вилучає всі атрибути з моделі, включно з атрибутом id . Викликає подію "зміна" ,
якщо не вказано безмовний параметр.
idmodel.id
Особлива властивість моделей, id — це довільний рядок (цілочисельний id або
UUID). Якщо ви встановите ідентифікатор у хеші атрибутів, він буде скопійований
у модель як пряма властивість. model.idне слід маніпулювати безпосередньо, його
слід змінювати лише за допомогою model.set('id', …). Моделі можна отримати за
ідентифікатором із колекцій, і ідентифікатор використовується для створення
URL-адрес моделей за замовчуванням.
idAttributemodel.idAttribute
Унікальний ідентифікатор моделі зберігається в атрибуті id . Якщо ви
безпосередньо спілкуєтесь із серверною частиною (CouchDB, MongoDB), яка
використовує інший унікальний ключ, ви можете встановити атрибут idAttribute
моделі для прозорого відображення цього ключа в id . Якщо ви встановили
idAttribute , ви також можете замінити cidPrefix .
var Meal = Backbone.Model.extend({
idAttribute: "_id"
});
var cake = new Meal({ _id: 1, name: "Cake" });
alert("Ідентифікатор торта: " + cake.id);
cidmodel.cid
Спеціальна властивість моделей, cid або ідентифікатор клієнта — це унікальний
ідентифікатор, який автоматично призначається всім моделям під час їх першого
створення. Ідентифікатори клієнта зручні, коли модель ще не збережено на сервері
та ще не має свого справжнього ідентифікатора , але вже має бути видимою в
інтерфейсі користувача.
cidPrefixmodel.cidPrefix
Якщо ваша модель має ідентифікатор , який не є цілим числом або UUID, існує
ймовірність, що він може конфліктувати з її cid . Щоб запобігти цьому, ви можете
замінити префікс, з якого починається cid .
// Якщо обидві довжини дорівнюють 2, оновіть сторінку перед запуском цього прикладу.
var clashy = new Backbone.Collection([
{id: 'c2'},
{id: 'c1'},
]);
alert('clashy length: ' + clashy.length);
var ClashFree = Backbone.Model.extend({cidPrefix: 'm'});
var clashless = new Backbone.Collection([
{id: 'c3'},
{id: 'c2'},
], {model: ClashFree});
alert('clashless length: ' + clashless.length);
attributesmodel.attributes
Властивість attributes — це внутрішній хеш, що містить стан моделі — зазвичай
(але не обов’язково) форма об’єкта JSON, що представляє дані моделі на сервері.
Часто це звичайна серіалізація рядка з бази даних, але це також може бути стан,
обчислений на стороні клієнта.
Будь ласка, використовуйте set , щоб оновити атрибути , а не змінювати їх
безпосередньо. Якщо ви хочете отримати та замінити копію атрибутів моделі,
використовуйте натомість _.clone(model.attributes) .
Через те, що Події приймають списки подій, розділених пробілами, імена атрибутів
не повинні містити пробіли.
changesmodel.changed
Властивість changes — це внутрішній хеш, що містить усі атрибути, які були
змінені з моменту останнього набору . Будь ласка, не оновлюйте змінені
безпосередньо, оскільки їх стан внутрішньо підтримується набором . Копію changes
можна отримати з changesAttributes .
defaultsmodel.defaults or model.defaults()
Хеш (або функцію) defaults можна використовувати для визначення стандартних
атрибутів для вашої моделі. Під час створення екземпляра моделі для будь-яких
невизначених атрибутів буде встановлено значення за замовчуванням.
var Meal = Backbone.Model.extend({
defaults: {
"appetizer": "салат цезар",
"entree": "равіолі",
"dessert": "чізкейк"
}
});
alert("Десерт буде " + (new Meal).get('dessert'));
Пам’ятайте, що в JavaScript об’єкти передаються за посиланням, тому якщо ви
включите об’єкт як значення за замовчуванням, він буде спільним для всіх
екземплярів. Натомість визначте значення за замовчуванням як функцію.
Якщо ви встановлюєте значення для idAttribute моделі , ви повинні визначити
значення за замовчуванням як функцію, яка повертає інший, універсально
унікальний ідентифікатор під час кожного виклику. Якщо цього не робити, то,
ймовірно, завадить екземпляру Backbone.Collection правильно ідентифікувати хеші
моделі, і це майже напевно буде помилкою, якщо ви ніколи не додасте екземпляри
класу моделі до колекції.
toJSON Повертає поверхневу копію атрибутівmodel.toJSON([options])
моделі для JSON-рядкової версії. Це можна використовувати для збереження,
серіалізації або для розширення перед надсиланням на сервер. Назва цього методу
трохи заплутана, оскільки він насправді не повертає рядок JSON — але я боюся, що
це спосіб роботи JavaScript API для JSON.stringify .
var artist = new Backbone.Model({
firstName: "Василь",
lastName: "Кандинський"
});
artist.set({birthday: "16 грудня 1866"});
alert(JSON.stringify(artist));
syncmodel.sync(method, model, [options])
Використовує Backbone.sync для збереження стану моделі на сервері. Може бути
замінено для спеціальної поведінки.
fetchmodel.fetch([options])
Об’єднує стан моделі з атрибутами, отриманими з сервера, шляхом делегування
Backbone.sync . Повертає jqXHR . Корисно, якщо модель ніколи не заповнювалася
даними або якщо ви хочете переконатися, що у вас є останній стан сервера.
Запускає подію "зміна" , якщо стан сервера відрізняється від поточних атрибутів.
fetch приймає зворотні виклики success та error в хеші параметрів, які обидва
передаються (модель, відповідь, параметри) як аргументи.
// Опитування кожні 10 секунд, щоб підтримувати модель каналу в актуальному стані.
setInterval(function() {
channel.fetch();
}, 10000);
savemodel.save([attributes], [options])
Збережіть модель у вашій базі даних (або альтернативному рівні збереження),
делегувавши Backbone.sync . Повертає jqXHR , якщо перевірка пройшла успішно, і
false в іншому випадку. Хеш атрибутів (як у наборі ) має містити атрибути, які
ви хотіли б змінити — ключі, які не згадуються, не будуть змінені — але повне
представлення ресурсу буде надіслано на сервер. Як і у випадку з set , ви можете
передати окремі ключі та значення замість хешу. Якщо модель має метод перевірки
, а перевірка не вдається, модель не буде збережено. Якщо модель є New ,
збереження буде «створенням» (HTTP POST ), якщо модель уже існує на сервері,
збереженням буде «update» (HTTP PUT ).
Якщо замість цього ви хочете, щоб на сервер надсилалися лише змінені атрибути,
викличте model.save(attrs, {patch: true}) . Ви отримаєте запит HTTP PATCH до
сервера лише з переданими атрибутами.
Виклик save із новими атрибутами негайно спричинить подію «зміна» , подію
«запит» , коли запит Ajax почне надходити на сервер, і подію «синхронізація»
після того, як сервер підтвердить успішну зміну. Передайте {wait: true} , якщо
ви хочете дочекатися сервера, перш ніж установлювати нові атрибути в моделі.
У наступному прикладі зверніть увагу на те, як наша перевизначена версія
Backbone.sync отримує запит «створити» під час першого збереження моделі та
запит «update» під час другого.
Backbone.sync = function(method, model) {
alert(method + ": " + JSON.stringify(model));
model.set('id', 1);
};
var book = new Backbone.Model({
title: "Кайдашева сім'я",
author: "Іван Нечуй-Левицький"
});
book.save();
book.save({author: "Levi"});
save приймає зворотні виклики success та error в хеші параметрів, яким будуть
передані аргументи (model, response, options) . Якщо перевірка на стороні
сервера не вдається, поверніть код відповіді HTTP, відмінний від 200 , разом із
відповіддю про помилку в текстовому вигляді або JSON.
book.save("author", "F.D.R.", {error: function(){ ... }});
destroymodel.destroy([options])
Знищує модель на сервері шляхом делегування запиту HTTP DELETE Backbone.sync .
Повертає об’єкт jqXHR або false , якщо модель є New . Приймає зворотні виклики
success та error в хеші параметрів, які будуть передані (model, response,
options) . Ініціює подію «destroy» на моделі, яка з’являється через будь-які
колекції, які її містять, подію «запит», коли вона починає запит Ajax до
сервера, і подію «синхронізація» після того, як сервер успішно підтвердив
видалення моделі. Передайте {wait: true} , якщо ви хочете дочекатися відповіді
сервера перед видаленням моделі з колекції.
book.destroy({success: function(model, response) {
...
}});
Методи підкреслення (9)
Основні проксі Underscore.js , щоб забезпечити 9 об’єктних функцій на
Backbone.Model . Не всі вони задокументовані тут, але ви можете переглянути
документацію Underscore, щоб отримати повну інформацію…
* keys
* values
* pairs
* invert
* pick
* omit
* chain
* isEmpty
user.pick('first_name', 'last_name', 'email');
chapters.keys().join(', ');
validatemodel.validate(attributes, options)
Цей метод залишився невизначеним, і вам пропонується замінити його будь-якою
спеціальною логікою перевірки, яку можна виконати в JavaScript. Якщо атрибути
дійсні, не повертайте нічого з validate ; якщо вони недійсні, поверніть помилку
за вашим вибором. Це може бути просте повідомлення про помилку в рядку або
повний об’єкт помилки, який програмно описує помилку.
За замовчуванням перевірки save перевіряються перед установкою будь-яких
атрибутів, але ви також можете вказати set перевірити нові атрибути, передавши
{validate: true} як параметр. Метод validate отримує атрибути моделі, а також
будь-які параметри, передані для set або save . Якщо validate повертає помилку,
save не продовжується, атрибути моделі не змінюються на сервері, запускається
подія "invalid" , і validationError властивість встановлюється на моделі зі
значенням, яке повертає цей метод.
var Chapter = Backbone.Model.extend({
validate: function(attrs, options) {
if (attrs.end < attrs.start) {
return "can't end before it starts";
}
}
});
var one = new Chapter({
title : "Chapter One: The Beginning"
});
one.on("invalid", function(model, error) {
alert(model.get("title") + " " + error);
});
one.save({
start: 15,
end: 10
});
"invalid" події корисні для надання грубих повідомлень про помилки на рівні
моделі чи колекції.
validationErrormodel.validationError
Значення, яке повертає validate під час останньої невдалої перевірки.
isValidmodel.isValid(options)
Запустіть перевірку , щоб перевірити стан моделі.
Метод validate отримує атрибути моделі, а також будь-які параметри, передані
isValid . Якщо validate повертає помилку, запускається подія «invalid» , і
помилка встановлюється на моделі у властивості validationError .
var Chapter = Backbone.Model.extend({
validate: function(attrs, options) {
if (attrs.end < attrs.start) {
return "can't end before it starts";
}
}
});
var one = new Chapter({
title : "Chapter One: The Beginning"
});
one.set({
start: 15,
end: 10
});
if (!one.isValid()) {
alert(one.get("title") + " " + one.validationError);
}
urlmodel.url()
Повертає відносну URL-адресу, де на сервері буде розміщено ресурс моделі. Якщо
ваші моделі знаходяться в іншому місці, замініть цей метод правильною логікою.
Генерує URL-адреси у формі: "[collection.url]/[id]" за замовчуванням, але ви
можете замінити, вказавши явний urlRoot , якщо колекцію моделі не слід брати до
уваги.
Делегує Collection#url для створення URL-адреси, тому переконайтеся, що вона
визначена, або властивість urlRoot , якщо всі моделі цього класу мають спільну
кореневу URL-адресу. Модель з ідентифікатором 101 , що зберігається в
Backbone.Collection з URL -адресою "/documents/7/notes" , матиме таку
URL-адресу: "/documents/7/notes/101"
urlRootmodel.urlRoot or model.urlRoot()
Укажіть urlRoot , якщо ви використовуєте модель поза колекцією, щоб увімкнути
функцію URL-адреси за замовчуванням для створення URL-адрес на основі
ідентифікатора моделі. "[urlRoot]/id"
Зазвичай вам не потрібно визначати це. Зауважте, що urlRoot також може бути
функцією.
var Book = Backbone.Model.extend({urlRoot : '/books'});
var solaris = new Book({id: "1083-lem-solaris"});
alert(solaris.url());
parse model.parse(response, options)
parse викликається щоразу, коли дані моделі повертаються сервером у fetch і save
. Функції передається необроблений об’єкт response , і вона має повернути хеш
атрибутів, який потрібно встановити в моделі. Реалізація за замовчуванням –
безопераційна, просто передає відповідь JSON. Перевизначте це, якщо вам потрібно
працювати з уже існуючим API або кращим простором імен для ваших відповідей.
Якщо ви працюєте з серверною частиною Rails, яка має версію до 3.1, ви помітите,
що її реалізація to_json за замовчуванням включає атрибути моделі в просторі
імен. Щоб вимкнути цю поведінку для бездоганної інтеграції магістралі,
установіть:
ActiveRecord::Base.include_root_in_json = false
clonemodel.clone()
Повертає новий екземпляр моделі з ідентичними атрибутами.
isNewmodel.isNew()
Ця модель вже збережена на сервері? Якщо модель ще не має id , вона вважається
новою.
hasChangedmodel.hasChanged([attribute])
Чи змінилася модель після останнього набору ? Якщо атрибут передається, повертає
true , якщо цей конкретний атрибут змінився.
Зауважте, що цей метод і наступні, пов’язані зі змінами, корисні лише під час
події «change» .
book.on("change", function() {
if (book.hasChanged("title")) {
...
}
});
changesAttributes
model.changedAttributes([attributes])
Отримувати хеш лише тих атрибутів моделі, які змінилися після останнього набору
, або false , якщо їх немає. За бажанням можна передати хеш зовнішніх атрибутів
, повертаючи атрибути в цьому хеші, які відрізняються від моделі. Це можна
використовувати, щоб визначити, які частини представлення потрібно оновити, або
які виклики потрібно зробити для синхронізації змін із сервером.
попереднійmodel.previous(attribute)
Під час події "change" цей метод можна використовувати для отримання
попереднього значення зміненого атрибута.
var bill = new Backbone.Model({
name: "Bill Smith"
});
bill.on("change:name", function(model, name) {
alert("Changed name from " + bill.previous("name") + " to " + name);
});
bill.set({name : "Bill Jones"});
previousAttributes
model.previousAttributes()
Повертає копію попередніх атрибутів моделі. Корисно для отримання відмінностей
між версіями моделі або повернення до дійсного стану після виникнення помилки.
BACKBONE.COLLECTION
Колекції - це замовлені комплекти моделей. Ви можете прив’язати події «change»
до сповіщень про зміну будь-якої моделі в колекції, прослуховувати події «add»
та «remove» , fetch колекцію з сервера та використовувати повний набір методів
Underscore.js .
Для зручності будь-яка подія, яка запускається на моделі в колекції, також
запускається безпосередньо в колекції. Це дозволяє вам прослуховувати зміни
певних атрибутів у будь-якій моделі колекції, наприклад:
documents.on("change:selected", ...)
extendBackbone.Collection.extend(properties, [classProperties])
Щоб створити власний клас колекції , розширте Backbone.Collection , надавши
властивості екземпляра , а також необов’язкові classProperties, які потрібно
приєднати безпосередньо до функції конструктора колекції.
modelcollection.model([attrs], [options])
Перевизначте цю властивість, щоб указати клас моделі, який містить колекція.
Якщо визначено, ви можете передавати необроблені об’єкти атрибутів (і масиви) і
параметри add , create і reset , і атрибути будуть перетворені в модель
належного типу за допомогою наданих параметрів, якщо такі є.
var Library = Backbone.Collection.extend({
model: Kn
});
Колекція також може містити поліморфні моделі, замінивши цю властивість
конструктором, який повертає модель.
var Library = Backbone.Collection.extend({
model: function(attrs, options) {
if (condition) {
return new PublicDocument(attrs, options);
} else {
return new PrivateDocument(attrs, options);
}
}
});
modelIdcollection.modelId(attrs, idAttribute)
Перевизначте цей метод, щоб повернути значення, яке колекція використовуватиме
для ідентифікації моделі з її атрибутами. Корисно для об’єднання моделей із
кількох таблиць із різними значеннями idAttribute в одну колекцію.
За замовчуванням повертає значення даного атрибута idAttribute в атрибутах attrs
або, якщо це не так, id . Якщо ваша колекція використовує фабрику моделей і
діапазони ідентифікаторів цих моделей можуть збігатися, ви повинні змінити цей
метод.
var Library = Backbone.Collection.extend({
modelId: function(attrs) {
return attrs.type + attrs.id;
}
});
var library = new Library([
{type: 'dvd', id: 1},
{type: 'vhs', id: 1}
]);
var dvdId = library.get('dvd1').id;
var vhsId = library.get('vhs1').id;
alert('dvd: ' + dvdId + ', vhs: ' + vhsId);
preinitializenew Backbone.Collection([models], [options])
Для використання з колекціями як класами ES. Якщо ви визначите метод попередньої
ініціалізації , він буде викликаний під час першого створення колекції та до
запуску будь-якої логіки створення екземпляра для колекції.
class Library extends Backbone.Collection {
preinitialize() {
this.on("add", function() {
console.log("Add model event got fired!");
});
}
}
constructor / initializenew Backbone.Collection([models], [options])
Під час створення колекції ви можете передати початковий масив моделей .
comparator колекції може бути включений як опція. Передача false як опції
порівняння запобігає сортуванню. Якщо ви визначаєте функцію ініціалізації , вона
буде викликана під час створення колекції. Є кілька параметрів, які, якщо вони
надані, додаються безпосередньо до колекції: модель і компаратор .
Передайте null для model , щоб створити порожню колекцію з options .
var tabs = new TabSet([tab1, tab2, tab3]);
var spaces = new Backbone.Collection(null, {
model: Space
});
Якщо {parse: true} передано як опцію , атрибути спочатку будуть перетворені за
допомогою аналізу перед встановленням у колекції.
modelscollection.models
Необроблений доступ до масиву моделей JavaScript у колекції. Зазвичай ви бажаєте
використовувати get , at або методи Underscore для доступу до об’єктів моделі,
але іноді бажане пряме посилання на масив.
toJSONcollection.toJSON([options])
Повертає масив, що містить хеш атрибутів кожної моделі (через toJSON ) у
колекції. Це можна використовувати для серіалізації та збереження колекції в
цілому. Назва цього методу трохи заплутана, оскільки він відповідає JSON API
JavaScript .
var collection = new Backbone.Collection([
{name: "Tim", age: 5},
{name: "Ida", age: 26},
{name: "Rob", age: 55}
]);
alert(JSON.stringify(collection));
synccollection.sync(method, collection, [options])
Використовує Backbone.sync для збереження стану колекції на сервері. Може бути
замінено для спеціальної поведінки.
Методи підкреслення (46)
Основні проксі Underscore.js для забезпечення 46 ітераційних функцій на
Backbone.Collection . Не всі вони задокументовані тут, але ви можете переглянути
документацію Underscore, щоб отримати повну інформацію…
Більшість методів можуть приймати об’єкт або рядок для підтримки предикатів типу
атрибутів моделі або функцію, яка отримує екземпляр моделі як аргумент.
* forEach (each)
* map (collect)
* reduce (foldl, inject)
* reduceRight (foldr)
* find (detect)
* findIndex
* findLastIndex
* filter (select)
* reject
* every (all)
* some (any)
* contains (includes)
* invoke
* max
* min
* sortBy
* groupBy
* shuffle
* toArray
* size
* first (head, take)
* initial
* rest (tail, drop)
* last
* without
* indexOf
* lastIndexOf
* isEmpty
* chain
* difference
* sample
* partition
* countBy
* indexBy
books.each(function(book) {
book.publish();
});
var titles = books.map("title");
var publishedBooks = books.filter({published: true});
var alphabetical = books.sortBy(function(book) {
return book.author.get("name").toLowerCase();
});
var randomThree = books.sample(3);
addcollection.add(models, [options])
Додайте модель (або масив моделей) до колекції, запускаючи подію «add» для
кожної моделі та подію «update» після цього. Це варіант набору з тими ж
параметрами та значенням, що повертається, але він завжди додає і ніколи не
видаляє. Якщо ви додаєте до колекції моделі, які вже є в колекції, вони
ігноруватимуться, якщо ви не передасте {merge: true} , у цьому випадку їхні
атрибути буде об’єднано з відповідними моделями, запускаючи будь-які відповідні
«change» події.
var ships = new Backbone.Collection;
ships.on("add", function(ship) {
alert("Ahoy " + ship.get("name") + "!");
});
ships.add([
{title: "Летючий Голландець"},
{title: "Чорна перлина"}
]);
Зауважте, що додавання тієї самої моделі (моделі з тим самим ідентифікатором )
до колекції більше одного разу
є безопераційним.
removecollection.remove(models, [options])
Видалити модель (або масив моделей) із колекції та повернути їх. Кожна модель
може бути екземпляром Model, рядком id або об’єктом JS, будь-яке значення,
прийнятне як аргумент id для collection.get . Запускає подію «remove» для кожної
моделі та одну подію «update» після цього, якщо не передано {silent: true} .
Індекс моделі до видалення доступний слухачам як options.index .
Resetcollection.reset([models], [options])
Додавання та видалення моделей по черзі – це добре, але іноді потрібно змінити
так багато моделей, що краще оновити колекцію масово. Використовуйте скидання ,
щоб замінити колекцію новим списком моделей (або хешів атрибутів), запускаючи
одну подію «reset» після завершення та не запускаючи жодних подій додавання чи
видалення на будь-якій моделі. Повертає щойно встановлені моделі. Для зручності
під час події «reset» список усіх попередніх моделей доступний як
options.previousModels .
Передайте null для model , щоб очистити вашу колекцію з options .
Ось приклад використання reset для завантаження колекції під час початкового
завантаження сторінки в програмі Rails:
var accounts = new Backbone.Collection;
accounts.reset(<%= @accounts.to_json %>);
Виклик collection.reset() без передачі жодної моделі як аргументів спустошить
всю колекцію.
setcollection.set(models, [options])
Метод set виконує «розумне» оновлення колекції за допомогою переданого списку
моделей. Якщо моделі зі списку ще немає в колекції, її буде додано; якщо модель
вже є в колекції, її атрибути будуть об’єднані; і якщо колекція містить будь-які
моделі, яких немає у списку, їх буде видалено. Усі відповідні події «add» ,
«remove» та «change» запускаються, коли це відбувається, з єдиною подією
«update» у кінці. Повертає торкнулися моделі в колекцію. Якщо ви хочете
налаштувати цю поведінку, ви можете змінити її за допомогою параметрів: {add:
false} , {remove: false} або {merge: false} .
Якщо властивість моделі ви можете визначити, ви також передаєте необроблені
об'єкти атрибутів і параметрів, і їх оживіть як екземпляри моделі за допомогою
заданих параметрів. Якщо ви встановили компаратор , колекція автоматично
відсортує себе та ініціює подію "sort" , якщо ви не передасте {sort: false} або
не використаєте параметр {at: index} . Передайте {at: index} , щоб приєднати
модель(и) до колекції за вказаним індексом .
var vanHalen = new Backbone.Collection([eddie, alex, stone, roth]);
vanHalen.set([eddie, alex, stone, hagar]);
// Запускає подію "remove" для roth і подію "add" для "hagar".
// Оновлює будь-які атрибути Стоуна, Алекса та Едді, // які могли
змінитися протягом багатьох років.
getcollection.get(id)
Отримати модель із колекції, визначену ідентифікатором , cid або передачею
моделі .
var book = library.get(110);
atcollection.at(index)
Отримати модель із колекції, заданої індексом. Корисно, якщо ваша колекція
відсортована, і якщо ваша колекція не відсортована, за бажанням все одно
отримувати моделі в порядку вставки. Якщо передано від'ємний індекс, модель буде
отримано з кінця колекції.
pushcollection.push(model, [options])
Як add , але завжди додає модель у кінець колекції та ніколи не сортує.
popcollection.pop([options])
Видалити та повернути останню модель із колекції. Використовує самі ті
параметри, що й видаляють .
unshiftcollection.unshift(model, [options])
Як add , але завжди додає модель на початок колекції та ніколи не сортує.
shiftcollection.shift([options])
Вилучити та повернути першу модель із колекції. Використовує самі ті параметри,
що й видаляють .
slicecollection.slice(begin, end)
Повертає дрібну копію моделі цієї колекції, використовуючи ті самі параметри, що
й нативний Array#slice .
lengthcollection.length
Як і масив, колекція підтримує властивість length , підраховуючи кількість
моделей, які вона містить.
comparator collection.comparator
За умовчанням компаратор для колекції відсутній . Якщо ви шукаєте компаратор
колекції, він використовуватиметься для сортування кожного разу, коли додається
модель. Компаратор можна використовувати як sortBy (передати функцію, яка
замість одного аргументу), як сортувати ( передати функцію порівняння, яка
очікує два аргументи) або як рядок, який вказує атрибут, за яким потрібно
сортувати.
Функції порівняння "sortBy" беруть модель і повертають числове або рядкове
значення, за яким модель має бути впорядкована всім іншим. Функції порівняння
"sort" беруть дві моделі та повертають -1 , якщо перша модель має бути перед
іншою, 0 , якщо вони мають один ранг, і 1, якщо перша модель має бути після.
Зауважте, що Backbone залежить від арності вашої функції порівняння для
визначення між двома стилями, тому будьте обережні, якщо ваша функція порівняння
є прив’язаною.
Зауважте, що всі хоча розділи в цьому прикладі додано в зворотному порядку, вони
виходять у правильному порядку:
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection;
chapters.comparator = 'сторінка';
chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));
alert(chapters.pluck('title'));
Колекції з компаратором не будуть автоматично повторно сортуватися, якщо ви
пізніше зміните атрибути моделі, тому ви можете вибрати sort змінених атрибутів
моделі, після вставлення на порядок.
sortcollection.sort([options])
Змусити колекцію пересортувати себе. Зауважте, що колекція з компаратором
сортуватиметься автоматично щоразу, коли додається модель. Щоб вимкнути
сортування під час додавання моделі, передайте {sort: false} , щоб додати .
Виклик sort запускає подію "sort" у колекції.
pluckcollection.pluck(attribute)
Витягнути атрибут із кожної моделі в колекції. Еквівалентно виклику карти і
поверненню одного атрибута з ітератора.
var stooges = new Backbone.Collection([
{name: "Curly"},
{name: "Larry"},
{name: "Moe"}
]);
var names = stooges.pluck("ім'я");
alert(JSON.stringify(names));
деcollection.where(attributes)
Повертає масив усіх моделей у колекції, які відповідають переданим атрибутам .
Корисно для простих випадків фільтра .
var friends = new Backbone.Collection([
{name: "Атос", profession: "Мушкетер"},
{name: "Портос", profession: "Мушкетер"},
{name: "Араміс", profession: "Мушкетер"},
{name: "д'Артаньян", profession: "Юнак"},
]);
var musketeers = friends.where({profession: "Мушкетер"});
alert(musketeers.length);
findWherecollection.findWhere(attributes)
Так само, як where , але безпосередньо повертає лише першу модель у колекції,
яка відповідає переданим атрибутам . Якщо жодна модель не відповідає, повертає
undefined .
urlcollection.url or collection.url()
Встановіть властивість url (або функцію) колекції для посилання на її
розташування на сервері. Моделі в колекції використовуватимуть url для створення
власних URL-адрес.
var Notes = Backbone.Collection.extend({
url: '/notes'
});
// Або щось більш складне:
var Notes = Backbone.Collection.extend({
url: function() {
return this.document.url() + '/notes';
}
});
parse collection.parse(response, options)
parse викликається Backbone кожного разу, коли сервер повертає моделі колекції у
fetch . Функції передається необроблений об’єкт response , і вона має повернути
масив атрибутів моделі, які потрібно додати до колекції. Реалізація за
замовчуванням – безопераційна, просто передає відповідь JSON. Перевизначте це,
якщо вам потрібно працювати з уже існуючим API або кращим простором імен для
ваших відповідей.
var Tweets = Backbone.Collection.extend({
// The Twitter Search API returns tweets under "results".
parse: function(response) {
return response.results;
}
});
clonecollection.clone()
Повертає новий екземпляр колекції з ідентичним списком моделей.
fetchcollection.fetch([options])
Отримати стандартний набір моделей для цієї колекції з сервера, set їх у
колекцію, коли вони надходять. Хеш параметрів приймає зворотні виклики success
та error , які обидва будуть передані (колекція, відповідь, параметри) як
аргументи. Коли дані моделі повертаються із сервера, він використовує set для
(інтелектуального) об’єднання отриманих моделей, якщо ви не передасте {reset:
true} , у цьому випадку колекцію буде (ефективно) reset . Делегує Backbone.sync
під прикриттям для спеціальних стратегій збереження та повертає jqXHR .
Серверний обробник для запитів на вибірку має повертати масив JSON моделей.
Поведінку вибірки можна налаштувати за допомогою доступних параметрів .
Наприклад, щоб отримати колекцію, отримуючи подію «додати» для кожної нової
моделі та подію «change» для кожної зміненої існуючої моделі, нічого не
видаляючи: collection.fetch({remove: false})
Параметри jQuery.ajax можна також передати безпосередньо як параметри вибірки ,
щоб отримати певну сторінку колекції з розбивкою на сторінки:
Documents.fetch({data: {page: 3}})
Зауважте, що fetch не слід використовувати для заповнення колекцій під час
завантаження сторінки — усі моделі, необхідні під час завантаження, мають бути
вже завантажені на місце. fetch призначений для моделей з відкладеним
завантаженням для інтерфейсів, які не потрібні негайно: наприклад, документи з
колекціями нотаток, які можна відкривати та закривати.
createcollection.create(attributes, [options])
Зручність створення нового екземпляра моделі в колекції. Еквівалент створення
екземпляра моделі з хешем атрибутів, збереження моделі на сервері та додавання
моделі до набору після успішного створення. Повертає нову модель. Якщо перевірка
на стороні клієнта не вдалася, модель буде незбережено з помилками перевірки.
Щоб це працювало, вам слід встановити властивість моделі для колекції. Метод
create може приймати хеш атрибутів і параметри, які передаються під час
створення екземпляра моделі, або існуючий незбережений об’єкт моделі.
Створення моделі призведе до негайного запуску події «add» в колекції, події
«request» , коли нова модель надсилається на сервер, а також події «sync» ,
щойно сервер відповість успішним створення моделі. Передайте {wait: true} , якщо
ви хочете дочекатися сервера, перш ніж додати нову модель до колекції.
var Library = Backbone.Collection.extend({
model: Book
});
var nypl = new Libraly;
var eneida = nypl.create({
nazva: "Енеїда",
author: "Іван Котляревський"
});
mixinBackbone.Collection.mixin(properties)
mixin надає спосіб покращити базовий Backbone.Collection і будь-які колекції,
які його розширюють. Це можна використовувати для додавання загальних методів
(наприклад, додаткових методів підкреслення ).
Backbone.Collection.mixin({
sum: function(models, iteratee) {
return _.reduce(models, function(s, m) {
return s + iteratee(m);
}, 0);
}
});
var cart = new Backbone.Collection([
{price: 16, name: 'монополія'},
{price: 5, name: 'колода карт'},
{price: 20, name: 'шахи'}
]);
var cost = cart.sum('price');
BACKBONE.ROUTER
Веб-програми часто надають URL-адреси для важливих місць у програмі, які можна
посилати, робити закладки та ділитися ними. Донедавна для надання цих постійних
посилань використовували хеш-фрагменти ( #page ), але з появою History API тепер
можна використовувати стандартні URL-адреси ( /page ). Backbone.Router надає
методи для маршрутизації сторінок клієнта та підключення їх до дій і подій. Для
браузерів, які ще не підтримують History API, маршрутизатор обробляє витончений
резервний і прозорий переклад фрагментної версії URL-адреси.
Під час завантаження сторінки, коли ваша програма завершить створення всіх своїх
маршрутизаторів, обов’язково викличте Backbone.history.start() або
Backbone.history.start({pushState: true}) , щоб спрямувати початкову URL-адресу.
extendBackbone.Router.extend(properties, [classProperties])
Почніть із створення спеціального класу маршрутизатора. Визначте функції дій,
які запускаються, коли певні фрагменти URL-адреси збігаються, і надайте хеш
маршрутів , який поєднує маршрути з діями. Зауважте, що вам слід уникати
використання скісної риски у визначенні маршруту:
var Workspace = Backbone.Router.extend({
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
help: function() {
...
},
search: function(query, page) {
...
}
});
routesrouter.routes
Хеш routes відображає URL-адреси з параметрами на функції вашого маршрутизатора
(або просто прямі визначення функцій, якщо вам більше подобається), подібно до
хешу подій View . Маршрути можуть містити частини параметрів, :param , які
відповідають одному компоненту URL-адреси між скісними рисками; і splat частини
*splat , які можуть відповідати будь-якій кількості компонентів URL. Частину
маршруту можна зробити необов’язковою, узявши її в дужки (/:опціонально) .
Наприклад, маршрут "search/:query/p:page" відповідатиме фрагменту
#search/obama/p2 , передаючи "obama" та "2" дії як позиційні аргументи.
Маршрут "file/*path" відповідатиме #file/folder/file.txt , передаючи
"folder/file.txt" до дії.
Маршрут «docs/:section(/:subsection)» відповідатиме #docs/faq і
#docs/faq/installing , передаючи «faq» до дії в першому випадку, а «faq» і
«встановлення» до дія в другому.
Вкладений необов’язковий маршрут «docs(/:section)(/:subsection)» відповідатиме
#docs , #docs/faq та #docs/faq/installing , передаючи «faq» дії у другому
випадку та передаючи «faq» і «installing» до дії в третьому.
Слеші в кінці розглядаються як частина URL-адреси та (правильно) розглядаються
як унікальний маршрут під час доступу. docs і docs/ запускатимуть різні зворотні
виклики. Якщо ви не можете уникнути створення обох типів URL-адрес, ви можете
визначити відповідник "docs(/)" , щоб охопити обидва випадки.
Коли відвідувач натискає кнопку «Назад» або вводить URL-адресу, і певний маршрут
відповідає, назва дії буде запущено як подія , щоб інші об’єкти могли слухати
маршрутизатор і отримувати сповіщення. У наступному прикладі відвідування
#help/uploading призведе до запуску події route:help з маршрутизатора.
маршрути: {
"help/:page": "допомога",
"download/*path": "завантажити",
"folder/:name": "openFolder",
"folder/:name-:mode": "openFolder"
}
router.on("route:help", function(page) {
...
});
preinitializenew Backbone.Router([options])
Для використання з маршрутизаторами як класи ES. Якщо ви визначите метод
попередньої ініціалізації , він буде викликаний під час першого створення
маршрутизатора та до запуску будь-якої логіки створення екземпляра для
маршрутизатора.
class Router extends Backbone.Router {
preinitialize() {
// Перевизначити метод виконання
this.execute = function(callback, args, name) {
if (!loggedIn) {
goToLogin();
return false;
}
args.push(parseQueryString(args.pop()));
if (callback) callback.apply(this, args);
}
}
}
constructor / initializenew Router([options])
Під час створення нового маршрутизатора ви можете передати його хеш маршрутів
напряму як варіант, якщо хочете. Усі options також буде передано вашій функції
initialize , якщо вона визначена.
routerouter.route(route, name, [callback])
Створіть маршрут для маршрутизатора вручну. Аргументом route може бути рядок
маршрутизації або регулярний вираз. Кожне відповідне захоплення з маршруту або
регулярного виразу буде передано як аргумент зворотного виклику. Аргумент назви
запускатиметься як подія "route:name" коли знайдеться відповідність маршруту.
Якщо аргумент callback опущено, замість нього буде використано router[name] .
Маршрути, додані пізніше, можуть замінити раніше оголошені маршрути.
initialize: function(options) {
// Відповідає #page/10, передає "10"
this.route("page/:number", "page", function(number){ ... });
// Відповідає /117-a/b/c/open, передаючи "117-a/b/c" у this.open
this.route(/^(.*?)\/open$/, "open");
},
open: function(id) { ... }
navigaterouter.navigate(fragment, [options])
Щоразу, коли ви досягаєте точки у своїй програмі, яку хочете зберегти як
URL-адресу, викликайте navigate , щоб оновити URL-адресу. Якщо ви також бажаєте
викликати функцію маршруту, встановіть для параметра тригера значення true . Щоб
оновити URL-адресу без створення запису в історії веб-переглядача, установіть
для параметра заміни значення true .
openPage: function(pageNumber) {
this.document.pages.at(pageNumber).open();
this.navigate("page/" + pageNumber);
}
# Or ...
app.navigate("help/troubleshooting", {trigger: true});
# Or ...
app.navigate("help/troubleshooting", {trigger: true, replace: true});
executerouter.execute(callback, args, name)
Цей метод викликається всередині маршрутизатора щоразу, коли маршрут збігається
і його відповідний зворотний виклик має бути виконано. Повернути false із
виконання, щоб скасувати поточний перехід. Перевизначте його, щоб виконати
настроюваний аналіз або обгортку ваших маршрутів, наприклад, щоб проаналізувати
рядки запиту перед передачею їх зворотному виклику маршруту, наприклад:
var Router = Backbone.Router.extend({
execute: function(callback, args, name) {
if (!loggedIn) {
goToLogin();
return false;
}
args.push(parseQueryString(args.pop()));
if (callback) callback.apply(this, args);
}
});
BACKBONE.HISTORY
Історія слугує глобальним маршрутизатором (на кадр) для обробки подій hashchange
або pushState , зіставлення з відповідним маршрутом і запуску зворотних
викликів. Він пересилає події "route" і "route[name]" відповідного
маршрутизатора або "notfound" , якщо жоден маршрут у жодному маршрутизаторі не
відповідає поточній URL-адресі. Вам ніколи не доведеться створювати один із них
самостійно, оскільки Backbone.history вже містить один.
Підтримка pushState існує лише за згодою в Backbone. Старіші веб-переглядачі,
які не підтримують pushState, продовжуватимуть використовувати фрагменти
URL-адреси на основі хешу, і якщо веб-переглядач із підтримкою pushState
переходить до хеш-URL , його буде прозоро оновлено до справжньої URL-адреси.
Зауважте, що використання реальних URL-адрес вимагає, щоб ваш веб-сервер мав
змогу правильно відтворювати ці сторінки, тому також потрібні внутрішні зміни.
Наприклад, якщо у вас є маршрут /documents/100 , ваш веб-сервер повинен мати
можливість обслуговувати цю сторінку, якщо браузер безпосередньо відвідує цю
URL-адресу. Для повної сканування пошуковою системою найкраще, щоб сервер
генерував повний HTML для сторінки ... але якщо це веб-додаток, просто
відтворіть той самий вміст, який ви мали б для кореневої URL-адреси, а решту
заповніть Backbone Перегляди та JavaScript працюють добре.
startBackbone.history.start([options])
Коли всі ваші маршрутизатори створено та всі маршрути налаштовано належним
чином, викличте Backbone.history.start() , щоб розпочати моніторинг подій
hashchange та відправлення маршрутів. Подальші виклики Backbone.history.start()
викличуть помилку, а Backbone.History.started є логічним значенням, яке вказує,
чи його вже було викликано.
Щоб вказати, що ви хочете використовувати підтримку HTML5 pushState у своїй
програмі, використовуйте Backbone.history.start({pushState: true}) . Якщо ви
хочете використовувати pushState , але ваші веб-переглядачі не підтримують його
нативно, замість цього використовують повне оновлення сторінки, ви можете додати
{hashChange: false} до параметрів.
Якщо ваша програма не обслуговується з кореневої URL-адреси / вашого домену,
обов’язково повідомте історії, де насправді знаходиться корінь, як варіант:
Backbone.history.start({pushState: true, root: "/public/search/ "}) .
Значення, надане для кореня, буде нормалізовано, щоб включити скісну риску на
початку та в кінці. Під час навігації до маршруту типовою поведінкою є
виключення кінцевої скісної риски з URL-адреси (наприклад,
/public/search?query=... ). Якщо ви віддаєте перевагу включати косу риску в
кінці (наприклад, /public/search/?query=... ), використовуйте
Backbone.history.start({trailingSlash: true}) . URL-адреси завжди міститимуть
косу риску на початку. Коли root є /, URL-адреси виглядатимуть як /?query=...
незалежно від значення trailingSlash .
Під час виклику, якщо маршрут успішно відповідає поточній URL-адресі,
Backbone.history.start() повертає значення true , і запускаються події «route» і
«route[name]» . Якщо жоден визначений маршрут не збігається з поточною
URL-адресою, він повертає false і натомість запускається "notfound" .
Якщо сервер уже відобразив всю сторінку, і ви не хочете, щоб початковий маршрут
запускався під час запуску історії, передайте silent: true .
Оскільки історія на основі хешу в Internet Explorer покладається на <iframe> ,
не забудьте викликати start() лише після того, як DOM буде готовий.
$(function(){
new WorkspaceRouter();
new HelpPaneRouter();
Backbone.history.start({pushState: true});
});
BACKBONE.SYNC
Backbone.sync — це функція, яку Backbone викликає щоразу, коли намагається
прочитати або зберегти модель на сервері. За замовчуванням він використовує
jQuery.ajax , щоб зробити запит RESTful JSON і повертає jqXHR . Ви можете
змінити його, щоб використовувати іншу стратегію збереження, наприклад
WebSockets, транспорт XML або локальне сховище.
Сигнатура методу Backbone.sync — sync(метод, модель, [параметри])
* метод – метод CRUD ( "create" , "read" , "update" або "delete" )
* model – модель, яку потрібно зберегти (або колекцію, яку потрібно прочитати)
* параметри – зворотні виклики success та error та всі інші параметри запиту
jQuery
За умовчанням, коли Backbone.sync надсилає запит на збереження моделі, її
атрибути будуть передані, серіалізовані як JSON і надіслані в тілі HTTP з типом
вмісту application/json . Під час повернення відповіді JSON надішліть атрибути
моделі, які були змінені сервером і потребують оновлення на клієнті.
Відповідаючи на запит «read» з колекції ( Collection#fetch ), надсилайте вниз
масив об’єктів атрибутів моделі.
Кожного разу, коли модель або колекція починає синхронізацію із сервером,
виникає подія "request" . Якщо запит виконано успішно, ви отримаєте подію "sync"
, а якщо ні, подія "error" .
Функцію синхронізації можна замінити глобально як Backbone.sync або на більш
детальному рівні шляхом додавання функції sync до колекції Backbone або до
окремої моделі.
Обробник синхронізації за замовчуванням відображає CRUD на REST таким чином:
* create → POST /collection
* read → GET /collection[/id]
* update → PUT /collection/id
* patch → PATCH /collection/id
* delete → DELETE /collection/id
Як приклад, обробник Rails 4, що відповідає на виклик «update» від Backbone ,
може виглядати так:
def update
account = Account.find params[:id]
permitted = params.require(:account).permit(:name, :otherparam)
account.update_attributes permitted
render :json => account
end
Ще одна порада щодо інтеграції версій Rails до 3.1 — вимкнути простір імен за
замовчуванням для викликів to_json у моделях, встановивши
ActiveRecord::Base.include_root_in_json = false
ajaxBackbone.ajax = function(request) { ... };
Якщо ви хочете використовувати спеціальну функцію AJAX або ваша кінцева точка не
підтримує API jQuery.ajax і вам потрібно щось налаштувати, ви можете зробити це,
встановивши Backbone.ajax .
emulateHTTPBackbone.emulateHTTP = true
Якщо ви хочете працювати зі застарілим веб-сервером, який не підтримує
стандартний підхід REST/HTTP Backbone, ви можете ввімкнути Backbone.emulateHTTP
. Якщо встановити цей параметр, запити PUT , PATCH і DELETE будуть підроблені за
допомогою HTTP POST , встановлюючи заголовок X-HTTP-Method-Override із справжнім
методом. Якщо emulateJSON також увімкнено, справжній метод буде передано як
додатковий параметр _method .
Backbone.emulateHTTP = true;
model.save(); // POST to "/collection/id", with "_method=PUT" + header.
emulateJSONBackbone.emulateJSON = true
Якщо ви працюєте із застарілим веб-сервером, який не може обробляти запити,
закодовані як application/json , установіть Backbone.emulateJSON = true;
призведе до того, що JSON буде серіалізовано за параметром model , а запит буде
зроблено з типом MIME application/x-www-form-urlencoded , ніби з форми HTML.
BACKBONE.VIEW
Основні подання — це майже більше умовності, ніж код — вони нічого не визначають
щодо вашого HTML або CSS за вас і можуть використовуватися з будь-якою
бібліотекою шаблонів JavaScript. Загальна ідея полягає в тому, щоб організувати
ваш інтерфейс у логічні представлення, підкріплені моделями, кожне з яких можна
оновлювати незалежно, коли змінюється модель, без необхідності перемальовувати
сторінку. Замість того, щоб копатися в об’єкті JSON, шукати елемент у DOM і
оновлювати HTML вручну, ви можете прив’язати функцію render до події «change»
моделі — і тепер усюди, де дані моделі відображаються в інтерфейсі користувача,
він завжди актуальний.
extendBackbone.View.extend(properties, [classProperties])
Розпочніть роботу з представленнями, створивши спеціальний клас перегляду. Ви
захочете перевизначити функцію рендерингу , вказати свої декларативні події та,
можливо, tagName , className або ідентифікатор кореневого елемента View.
var DocumentRow = Backbone.View.extend({
tagName: "li",
className: "document-row",
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
initialize: function() {
this.listenTo(this.model, "change", this.render);
},
render: function() {
...
}
});
Такі властивості, як tagName , id , className , el і події , також можна
визначити як функцію, якщо ви хочете зачекати, щоб визначити їх до часу
виконання.
preinitializenew View([options])
Для використання з представленнями як класами ES. Якщо ви визначите метод
попередньої ініціалізації , він буде викликаний під час першого створення
представлення, перш ніж запуститься будь-яка логіка створення екземпляра.
class Document extends Backbone.View {
preinitialize({autoRender}) {
this.autoRender = autoRender;
}
initialize() {
if (this.autoRender) {
this.listenTo(this.model, "change", this.render);
}
}
}
constructor / initializenew View([options])
Є кілька спеціальних параметрів, які, якщо передано, будуть приєднані
безпосередньо до перегляду: model , collection , el , id , className , tagName ,
attributes and events . Якщо подання визначає функцію ініціалізації , вона буде
викликана під час першого створення подання. Якщо ви хочете створити
представлення, яке посилається на елемент, який уже є в DOM, передайте елемент
як параметр: new View({el: existingElement})
var doc = documents.first();
new DocumentRow({
model: doc,
id: "document-row-" + doc.id
});
elview.el
Усі представлення завжди мають елемент DOM ( властивість el ), незалежно від
того, чи вставлено їх на сторінку чи ні. Таким чином, перегляди можна
відтворювати в будь-який час і вставляти в DOM усі одночасно, щоб отримати
високоефективне відтворення інтерфейсу користувача з якомога меншою кількістю
перекомпонувань і перефарбовувань.
this.el можна розв’язати з рядка селектора DOM або елемента; інакше його буде
створено з властивостей tagName , className , id і attributes представлення .
Якщо жодного не встановлено, this.el є порожнім div , що часто добре. Посилання
el також може передаватися в конструктор представлення.
var ItemView = Backbone.View.extend({
tagName: 'li'
});
var BodyView = Backbone.View.extend({
el: 'body'
});
var item = new ItemView();
var body = new BodyView();
alert(item.el + ' ' + body.el);
$elview.$el
Кешований об’єкт jQuery для елемента перегляду. Зручна довідка замість того, щоб
весь час повторно обертати елемент DOM.
view.$el.show();
listView.$el.append(itemView.el);
setElementview.setElement(element)
Якщо ви бажаєте застосувати представлення Backbone до іншого елемента DOM,
використовуйте setElement , який також створить кешоване посилання $el і
перемістить делеговані події представлення зі старого елемента до нового.
attributesview.attributes
Хеш атрибутів, який буде встановлено як атрибути елемента HTML DOM на el
перегляду ( id, class, data-properties тощо), або функція, яка повертає такий
хеш.
$ (jQuery)view.$(selector)
Якщо jQuery включено на сторінку, кожне представлення даних має функцію $ , яка
виконує запити в межах елемента представлення. Якщо ви використовуєте цю функцію
jQuery з обмеженою областю, вам не потрібно використовувати ідентифікатори
моделі як частину вашого запиту, щоб витягнути певні елементи зі списку, і ви
можете покладатися набагато більше на атрибути класу HTML. Це еквівалентно
запуску: view.$el.find(selector)
ui.Chapter = Backbone.View.extend({
serialize : function() {
return {
title: this.$(".title").text(),
start: this.$(".start-page").text(),
end: this.$(".end-page").text()
};
}
});
templateview.template([data])
Хоча створення шаблону для представлення не є функцією, наданою безпосередньо
Backbone, часто є гарною угодою визначити функцію шаблону у ваших
представленнях. Таким чином, під час візуалізації вашого перегляду ви маєте
зручний доступ до даних екземплярів. Наприклад, використання шаблонів
підкреслення:
var LibraryView = Backbone.View.extend({
шаблон: _.template(...)
});
renderview.render()
Стандартною реалізацією render є no-op. Замініть цю функцію своїм кодом, який
візуалізує шаблон перегляду з даних моделі та оновлює this.el новим HTML. Хороша
угода полягає в тому, щоб return this в кінці візуалізації , щоб увімкнути
ланцюгові виклики.
var Bookmark = Backbone.View.extend({
template: _.template(...),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
Backbone не залежить від методу шаблонів HTML, якому ви віддаєте перевагу. Ваша
функція візуалізації може навіть об’єднати рядок HTML або використовувати
document.createElement для створення дерева DOM. Однак ми пропонуємо вибрати
хорошу бібліотеку шаблонів JavaScript. Moustache.js , Haml-js і Eco — чудові
альтернативи. Оскільки Underscore.js уже є на сторінці, _.template доступний і є
чудовим вибором, якщо ви віддаєте перевагу простим інтерпольованим шаблонам
стилю JavaScript.
Яку б стратегію створення шаблонів ви не використали, добре, якщо вам ніколи не
доведеться вставляти рядки HTML у ваш JavaScript. У DocumentCloud ми
використовуємо Jammit , щоб упакувати шаблони JavaScript, що зберігаються в
/app/views, як частину нашого основного пакету ресурсів core.js.
removeview.remove()
Вилучає представлення та його el з DOM і викликає stopListening, щоб видалити
будь-які прив’язані події, які представлення прослухало .
події Хеш подійview.events or view.events()
( або метод) можна використовувати для визначення набору подій DOM, які будуть
прив’язані до методів у вашому View through delegateEvents .
Backbone автоматично приєднує слухачів подій під час створення екземпляра,
безпосередньо перед викликом initialize .
var ENTER_KEY = 13;
var InputView = Backbone.View.extend({
tagName: 'input',
events: {
"keydown" : "keyAction",
},
render: function() { ... },
keyAction: function(e) {
if (e.which === ENTER_KEY) {
this.collection.add({text: this.$el.val()});
}
}
});
delegateEventsdelegateEvents([events])
Використовує функцію jQuery on для забезпечення декларативних зворотних викликів
для подій DOM у представленні. Якщо хеш events не передається безпосередньо,
використовує this.events як джерело. Події записуються у форматі {"selector
events": "callback"} . Зворотний виклик може бути або ім'ям методу в
представленні, або прямим тілом функції. Пропуск селектора призводить до того,
що подія буде прив’язана до кореневого елемента перегляду ( this.el ). За
замовчуванням delegateEvents викликається в конструкторі View, тому, якщо у вас
є простий хеш подій , усі ваші події DOM завжди будуть підключені, і вам ніколи
не доведеться викликати цю функцію самостійно.
Свойства events можна також визначити як функцію, яка повертає хеш events , щоб
полегшити програмне визначення ваших подій, а також успадкувати їх від
батьківських представлень.
Використання delegateEvents надає низку переваг порівняно з використанням jQuery
вручну для прив’язки подій до дочірніх елементів під час візуалізації . Усі
приєднані зворотні виклики прив’язуються до представлення перед тим, як їх
передати jQuery, тому, коли викликаються зворотні виклики, це продовжує
посилатися на об’єкт представлення. Коли delegateEvents запускається знову,
можливо, з іншим хешем events , усі зворотні виклики видаляються та делегуються
заново — корисно для представлень, які повинні поводитися по-різному в різних
режимах.
Версія delegateEvents для однієї події доступна як delegate . Насправді
delegateEvents — це просто обгортка кількох подій навколо delegate . Відповідник
undelegateEvents доступний як undelegate .
Подання, яке відображає документ у результатах пошуку, може виглядати приблизно
так:
var DocumentView = Backbone.View.extend({
events: {
"dblclick" : "open",
"click .icon.doc" : "select",
"contextmenu .icon.doc" : "showMenu",
"click .show_notes" : "toggleNotes",
"click .title .lock" : "editAccessLevel",
"mouseover .title .date" : "showTooltip"
},
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
},
open: function() {
window.open(this.model.get("viewer_url"));
},
select: function() {
this.model.set({selected: true});
},
...
});
undelegateEventsundelegateEvents()
Видаляє всі делеговані події перегляду. Корисно, якщо ви хочете тимчасово
вимкнути або видалити подання з DOM.
UTILITY - УТИЛІТА
Backbone.noConflictvar backbone = Backbone.noConflict();
Повертає об’єкт Backbone до початкового значення. Ви можете використовувати
значення, яке повертає Backbone.noConflict() , щоб зберегти локальне посилання
на Backbone. Корисно для вбудовування Backbone на веб-сайти сторонніх
розробників, де ви не хочете знищувати існуючу Backbone.
var localBackbone = Backbone.noConflict();
var model = localBackbone.Model.extend(...);
Backbone.$Backbone.$ = $;
Якщо у вас є кілька копій jQuery на сторінці або ви просто хочете вказати
Backbone використовувати певний об’єкт як бібліотеку DOM / Ajax, це властивість
для вас.
Backbone.$ = require('jquery');
debugInfodebugInfo();
У нещасливому випадку, коли вам потрібно буде надіслати звіт про помилку , ця
функція полегшить надання детальної інформації про ваші налаштування. Він друкує
об’єкт JSON з інформацією про версію Backbone і його залежностей через
console.debug . Він також повертає цей об’єкт на випадок, якщо ви хочете
перевірити його в коді.
debugInfo постачається в окремому модулі, який постачається з версією edge і
випускається пізніше 1.5.0. Він доступний у форматі UMD під тим самим префіксом,
що й backbone.js , але з назвою файлу debug-info.js . Він також експериментально
доступний у форматі модуля ES у розділі backbone/modules/ .
<!-- вбудовані браузери -->
<script src="some-path-or-url/backbone.js"></script>
<script src="some-path-or-url/debug-info.js"></script>
<сценарій>
Backbone.debugInfo();
</script>
// CommonJS
require('backbone/debug-info.js')();
// ESM
import debugInfo з 'backbone/modules/debug-info.js';
debugInfo();
FAQ
Навіщо використовувати Backbone, а не інший фреймворк?
Якщо ваше око ще не впали в очі адаптивністю та енергією, які демонструються в
наведеному вище списку прикладів , ми можемо бути більш конкретними: Backbone.js
має на меті забезпечити загальну основу, яка потрібна багатим на дані
веб-додаткам із амбіційними інтерфейсами — у той час як дуже свідомо уникає
заганяти вас у кут, приймаючи будь-які рішення, які ви краще підготовлені
приймати самостійно.
* Основна увага зосереджена на наданні вам корисних методів маніпулювання
вашими даними та запитів , а не на HTML-віджетах чи переосмисленні об’єктної
моделі JavaScript.
* Backbone не змушує вас використовувати один механізм шаблонів. Представлення
можна прив'язувати до HTML, створеного вашим улюбленим способом .
* Він менший. У вашому браузері чи телефоні менше кілобайтів для завантаження
та менша концептуальна площа. Ви можете прочитати та зрозуміти джерело за
півдня.
* Це не залежить від заповнення логіки програми у вашому HTML. Немає
вбудованого JavaScript, логіки шаблонів або зв’язувального коду підключення в
атрибутах data- або ng- , і немає необхідності винаходити власні теги HTML.
* Синхронні події використовуються як фундаментальний будівельний блок, а не
цикл запуску, який важко обґрунтувати, або постійне опитування та обхід ваших
структур даних для пошуку змін. І якщо ви хочете, щоб певна подія була
асинхронною та агрегованою, не проблема .
* Backbone добре масштабується, від вбудованих віджетів до великих програм .
* Backbone — це бібліотека, а не фреймворк, і добре поєднується з іншими. Ви
можете без проблем вставляти віджети Backbone у програми Dojo або
використовувати моделі Backbone як підтримку даних для візуалізацій D3 (щоб
вибрати два абсолютно випадкових приклади).
* Уникають "двостороннього зв'язування даних". Хоча це, безумовно, чудова
демонстрація та працює для найпростішого CRUD, це не дуже корисно у вашому
реальному додатку. Іноді потрібно оновлювати при кожному натисканні клавіші,
іноді під час розмиття, іноді, коли панель закрито, а іноді, коли натиснуто
кнопку «зберегти». Майже в усіх випадках проста серіалізація форми в JSON є
швидшою та легшою. Не дивлячись на це , якщо ваше серце налаштоване, дерзайте
.
* Немає вбудованого зниження продуктивності за вибір структурування коду за
допомогою Backbone. І якщо ви хочете оптимізувати далі, тонкі моделі та
шаблони з гнучкою деталізацією дозволяють легко вичавити до останньої краплі
потенційної продуктивності, скажімо, з IE8.
Існує більше, ніж один спосіб зробити це.
Зазвичай люди, які тільки починають, сприймають приклади, наведені на цій
сторінці, як певну євангельську істину. Насправді Backbone.js призначений для
того, щоб бути досить агностичним щодо багатьох поширених шаблонів у коді на
стороні клієнта. Наприклад...
Посилання між моделями та представленнями можна обробляти кількома способами.
Деякі люди люблять мати прямі покажчики, де представлення відповідають 1:1
моделям ( model.view і view.model ). Інші вважають за краще мати проміжні
об’єкти «контролера», які керують створенням і організацією переглядів в
ієрархію. Інші все ще віддають перевагу підходу з подіями та завжди запускають
події замість безпосереднього виклику методів. Усі ці стилі добре працюють.
Пакетні операції з моделями є звичайними, але часто краще обробляти їх
по-іншому, залежно від налаштувань сервера. Деякі люди не проти робити
індивідуальні запити Ajax. Інші створюють явні ресурси для пакетних операцій
RESTful: /notes/batch/destroy?ids=1,2,3,4 . Інші тунелюють REST поверх JSON зі
створенням запитів на набір змін:
{
"create": [array of models to create]
"update": [array of models to update]
"destroy": [array of model ids to destroy]
}
Не соромтеся визначати власні події. Backbone.Events розроблено таким чином, що
ви можете додавати його до будь-якого об’єкта чи прототипу JavaScript. Оскільки
ви можете використовувати будь-який рядок як подію, часто зручно прив’язувати та
запускати власні спеціальні події: model.on("selected:true") або
model.on("editing")
Відтворіть інтерфейс користувача так, як вважаєте за потрібне. Backbone не
залежить від того, чи використовуєте ви шаблони Underscore , Mustache.js , пряме
маніпулювання DOM, відтворені на сервері фрагменти HTML або jQuery UI у вашій
функції візуалізації . Іноді ви створюєте подання для кожної моделі... іноді ви
матимете подання, яке відображає тисячі моделей одночасно, у вузькому циклі.
Обидва можуть бути доречними в одній програмі, залежно від кількості залучених
даних і складності інтерфейсу користувача.
Вкладені моделі та колекції
Звичайним є вкладення колекцій у моделі за допомогою Backbone. Наприклад,
розглянемо модель поштової скриньки , яка містить багато моделей повідомлень .
Одним із чудових шаблонів для обробки цього є наявність колекції this.messages
для кожної поштової скриньки, яка дозволяє відкладене завантаження повідомлень,
коли поштова скринька відкривається вперше... можливо, з представленнями
MessageList , які прослуховують події «add» та «remove» .
var Mailbox = Backbone.Model.extend({
initialize: function() {
this.messages = new Messages;
this.messages.url = '/mailbox/' + this.id + '/messages';
this.messages.on("reset", this.updateCounts);
},
...
});
var inbox = new Mailbox;
// And then, when the Inbox is opened:
inbox.messages.fetch({reset: true});
Якщо ви шукаєте щось більш самовпевнене, у вікі є кілька плагінів Backbone, які
додають складні асоціації між моделями .
Backbone не включає пряму підтримку вкладених моделей і колекцій або «має
багато» асоціацій, оскільки існує низка хороших шаблонів для моделювання
структурованих даних на стороні клієнта, і Backbone має забезпечити основу для
реалізації будь-якого з них. Ви можете захотіти…
* Віддзеркалення структури бази даних SQL або структури бази даних NoSQL.
* Використовуйте моделі з масивами ідентифікаторів "зовнішнього ключа" та
приєднуйтесь до колекцій верхнього рівня (а-ля таблиці).
* Для численних асоціацій використовуйте діапазон ідентифікаторів замість
явного списку.
* Уникайте ідентифікаторів і використовуйте прямі посилання, створюючи
частковий графік об’єктів, що представляє ваш набір даних.
* Ліниве завантаження об’єднаних моделей із сервера або лінива десеріалізація
вкладених моделей із документів JSON.
Завантаження початкових моделей
Коли ваша програма вперше завантажується, зазвичай у вас є набір початкових
моделей, які, як ви знаєте, знадобляться для відтворення сторінки. Замість того,
щоб запускати додатковий запит AJAX для їх отримання , найкращим шаблоном є мати
їхні дані, які вже завантажуються на сторінку. Потім ви можете використовувати
скидання , щоб заповнити свої колекції початковими даними. У DocumentCloud у
шаблоні ERB для робочого простору ми робимо щось у такому стилі:
<сценарій>
var accounts = new Backbone.Collection;
accounts.reset(<%= @accounts.to_json %>);
var projects = new Backbone.Collection;
projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>
Ви повинні екранувати </ у рядку JSON, щоб запобігти атакам ін’єкції JavaScript.
Розширення магістралі
Багато бібліотек JavaScript створені як ізольовані та замкнуті, де ви
взаємодієте з ними, викликаючи їх загальнодоступний API, але ніколи не
заглядаєте всередину. Backbone.js не є такою бібліотекою.
Оскільки він служить основою для вашої програми, ви маєте розширювати та
покращувати її так, як вважаєте за потрібне — увесь вихідний код анотовано, щоб
полегшити це для вас. Ви побачите, що там дуже мало, окрім основних функцій, і
більшість із них можна замінити або розширити, якщо ви виявите потребу. Якщо ви
спіймали себе на тому, що додаєте методи до Backbone.Model.prototype або
створюєте власний базовий підклас, не хвилюйтеся — так все має працювати.
Яке відношення Backbone до «традиційного» MVC?
Різні реалізації шаблону Model-View-Controller, як правило, не згодні щодо
визначення контролера. Якщо це допоможе, у Backbone клас View також можна
розглядати як своєрідний контролер, який відправляє події, що походять від
інтерфейсу користувача, із шаблоном HTML, який служить справжнім переглядом. Ми
називаємо це представленням, тому що воно представляє логічну частину інтерфейсу
користувача, що відповідає за вміст одного елемента DOM.
Порівнюючи загальну структуру Backbone із структурою MVC на стороні сервера,
як-от Rails , елементи вишиковуються так:
* Backbone.Model – як модель Rails без методів класу. Обгортає рядок даних у
бізнес-логіці.
* Backbone.Collection – група моделей на стороні клієнта з логікою
сортування/фільтрування/агрегації.
* Backbone.Router – Rails routes.rb + дії контролера Rails. Зіставляє
URL-адреси на функції.
* Backbone.View – логічний шматок інтерфейсу користувача, який можна
багаторазово використовувати. Часто, але не завжди, асоціюється з моделлю.
* Клієнтські шаблони – представлення Rails .html.erb , які відображають частину
HTML.
Прив’язка «this»
Можливо, найпоширенішою проблемою JavaScript є те, що коли ви передаєте функцію
як зворотний виклик, її значення для this втрачається. Маючи справу з подіями та
зворотними викликами в Backbone, вам часто буде корисно покладатися на listenTo
або необов’язковий контекстний аргумент, який використовують багато методів
Underscore і Backbone, щоб вказати this , який використовуватиметься, коли
пізніше буде викликано зворотний виклик. (Див. _.each , _.map і object.on , щоб
назвати декілька). Події перегляду автоматично прив’язуються до контексту
перегляду. Ви також можете виявити корисним використання _.bind і _.bindAll з
Underscore.js.
var MessageList = Backbone.View.extend({
initialize: function() {
var messages = this.collection;
messages.on("reset", this.render, this);
messages.on("add", this.addMessage, this);
messages.on("remove", this.removeMessage, this);
messsages.each(this.addMessage, this);
}
});
// Later, in the app...
Inbox.messages.add(newMessage);
Робота з Rails
Backbone.js спочатку було отримано з програми Rails ; Коректна синхронізація
моделей на стороні клієнта (Backbone) з моделями на стороні сервера (Rails) є
безболісною, але є ще кілька речей, про які слід знати.
За замовчуванням версії Rails до 3.1 додають додатковий рівень обгортання
навколо представлення JSON моделей. Ви можете вимкнути це обтікання,
налаштувавши:
ActiveRecord::Base.include_root_in_json = false
... у вашій конфігурації. В іншому випадку перевизначте синтаксичний аналіз ,
щоб отримати атрибути моделі з оболонки. Подібним чином, Backbone PUT і POST
спрямовують JSON-представлення моделей, де за замовчуванням Rails очікує
атрибутів простору імен. Ви можете відфільтрувати атрибути контролерів
безпосередньо з params або перевизначити toJSON у Backbone, щоб додати додаткове
обгортання, яке очікує Rails.
ПРИКЛАДИ
Наведений нижче список прикладів, хоч і довгий, не є вичерпним і жодним чином не
актуальним. Якщо ви працювали над програмою, яка використовує Backbone, додайте
її на вікі-сторінку програм Backbone .
Jérôme Gravel-Niquet надав програму Todo List , яка включена в репозиторій як
приклад Backbone. Якщо вам цікаво, з чого взагалі почати роботу з Backbone,
знайдіть хвилинку, щоб прочитати анотований джерело . Програма використовує
адаптер LocalStorage , щоб прозоро зберігати всі ваші завдання у вашому
браузері, замість того, щоб надсилати їх на сервер. Jérôme також має версію,
розміщену на localtodos.com .
DOCUMENTCLOUD
Робочий простір DocumentCloud створено на основі Backbone.js із документами ,
проектами , нотатками та обліковими записами як базовими моделями та колекціями.
Якщо вас цікавить історія, Underscore.js і Backbone.js були спочатку витягнуті з
кодової бази DocumentCloud і упаковані в автономні бібліотеки JS.
США СЬОГОДНІ
USA Today використовує переваги модульності життєвого циклу даних/моделі
Backbone — що спрощує створення, успадкування, ізоляцію та зв’язування об’єктів
додатків — щоб зберегти кодову базу керованою та ефективною. На новому веб-сайті
також широко використовується магістральний маршрутизатор для керування
сторінкою як для браузерів, що підтримують pushState, так і для застарілих
браузерів. Нарешті, команда скористалася модулем подій Backbone, щоб створити
API PubSub, який дозволяє третім сторонам і пакетам аналітики підключитися до
серця програми.
RDIO
New Rdio було розроблено з нуля з компонентною платформою на основі Backbone.js.
Кожен компонент на екрані динамічно завантажується та відображається з даними,
які надає Rdio API . Коли вносяться зміни, кожен компонент може оновлюватися
самостійно, не перезавантажуючи сторінку та не перериваючи музику користувача.
Усе це залежить від представлень і моделей Backbone, а вся маршрутизація
URL-адрес обробляється маршрутизатором Backbone. Коли зміни даних надходять у
реальному часі, події Backbone сповіщають компоненти, зацікавлені в змінах
даних. Backbone утворює ядро нових динамічних веб-додатків Rdio і настільних
програм у реальному часі.
HULU
Hulu використовувала Backbone.js для створення свого онлайн-відео наступного
покоління. Взявши за основу Backbone, веб-інтерфейс було переписано з нуля, щоб
увесь вміст сторінки можна було завантажувати динамічно з плавними переходами
під час навігації. Backbone полегшує швидке переміщення програмою без
перезавантаження сценаріїв і вбудованих відео, а також пропонує моделі та
колекції для додаткової підтримки маніпулювання даними.
КВАРЦ
Quartz вважає себе джерелом цифрових новин для нової глобальної економіки.
Оскільки Quartz вірить у майбутнє відкритих міжплатформних веб-додатків, вони
вибрали Backbone і Underscore для отримання, сортування, зберігання та
відображення вмісту з власного API WordPress. Незважаючи на те, що qz.com
використовує адаптивний дизайн для браузерів телефонів, планшетів і настільних
комп’ютерів, він також використовує переваги подій і переглядів Backbone, щоб у
деяких випадках відтворювати шаблони для окремих пристроїв.
ЗЕМЛЯ
Earth.nullschool.net відображає погодні умови в реальному часі на інтерактивному
анімованому глобусі, а Backbone забезпечує основу, на якій будуються всі
компоненти сайту. Незважаючи на наявність кількох інших бібліотек JavaScript,
бездумний дизайн Backbone полегшив змішування функціональних можливостей подій ,
які використовуються для розподілу змін стану по всій сторінці. Коли було
прийнято рішення перейти на Backbone, великі блоки спеціальної логіки просто
зникли.
VOX
Vox Media, видавець SB Nation , The Verge , Polygon , Eater , Racked , Curbed і
Vox.com , використовує Backbone у Chorus , своїй домашній видавничій платформі.
Backbone підтримує платформу живого ведення блогу та систему коментарів , яка
використовується в усіх ресурсах Vox Media; Висвітлення, внутрішній
редакторський інструмент координації; SB Nation Live , трансляція подій у
прямому ефірі та інструмент чату; і Vox Cards , програма Vox.com, створена за
допомогою підсвічування та індексних карток для надання контексту про новини.
GAWKER MEDIA
Kinja — це видавнича платформа Gawker Media, створена для створення чудових
історій, руйнуючи межі між традиційними ролями творців контенту та споживачів.
Усі — редактори, читачі, маркетологи — мають доступ до тих самих інструментів,
щоб брати участь у пристрасному обговоренні та шукати правду в історії. Обмін,
рекомендації та стеження в екосистемі Kinja дозволяє покращити пошук інформації
на всіх сайтах.
Kinja — це платформа, на якій створені блоги Gawker , Gizmodo , Lifehacker , io9
та інші блоги Gawker Media. Backbone.js лежить в основі коду зовнішньої
програми, який забезпечує все, від автентифікації користувача до створення
публікацій, коментування та навіть показу реклами. Стек JavaScript включає
Underscore.js і jQuery з деякими плагінами, усі завантажені з RequireJS .
Шаблони закриття спільно використовуються Play! Додаток Scala на основі
фреймворку та представлення Backbone, а адаптивний макет створено за допомогою
фреймворку Foundation за допомогою SASS .
ПОТІК
MetaLab використовувала Backbone.js для створення Flow , програми керування
завданнями для команд. Робоча область покладається на Backbone.js для створення
переглядів завдань, дій, облікових записів, папок, проектів і тегів. Ви можете
побачити внутрішні елементи під window.Flow .
GILT GROUPE
Gilt Groupe використовує Backbone.js для створення кількох програм на своїх
сайтах. Мобільний веб-сайт Gilt використовує Backbone і Zepto.js , щоб створити
надзвичайно швидкий досвід покупок для користувачів у дорозі, а Gilt Live
поєднує Backbone із WebSockets для відображення товарів, які клієнти купують у
режимі реального часу. Пошукова функція Gilt також використовує Backbone для
ефективного фільтрування та сортування продуктів, переміщуючи ці дії на сторону
клієнта.
ЕНІГМА
Enigma — це портал, який збирає найбільшу колекцію публічних даних, створених
урядами, університетами, компаніями та організаціями. Enigma використовує базові
моделі та колекції для представлення складних структур даних; і Backbone's
Router надає користувачам Enigma унікальні URL-адреси для станів додатків,
дозволяючи їм швидко переміщатися по сайту, зберігаючи можливість додавати
сторінки в закладки та переходити вперед і назад у сеансі.
NEWSBLUR
NewsBlur — це програма для читання RSS-каналів і соціальна мережа новин із
швидким і чуйним інтерфейсом користувача, який виглядає як рідна програма для
настільних ПК. Backbone.js було обрано для значного переписування та переходу
від спагетті-коду через його потужний, але простий набір функцій, легку
інтеграцію та велику спільноту. Якщо ви хочете покопатися під капотом, NewsBlur
також є повністю відкритим кодом .
WORDPRESS.COM
WordPress.com — це версія WordPress за принципом «програмне забезпечення як
послуга» . Він використовує моделі, колекції та представлення Backbone.js у
своїй системі сповіщень . Backbone.js було обрано, тому що його легко вписати в
структуру програми, а не навпаки. Automattic (компанія, що стоїть за
WordPress.com) інтегрує Backbone.js у вкладку «Статистика» та інші функції на
домашній сторінці.
ЧОТИРИКУТНИК
Foursquare — це веселий маленький стартап, який допомагає вам зустрічатися з
друзями, відкривати нові місця та економити гроші. Основні моделі активно
використовуються в основному рівні JavaScript API, а представлення забезпечують
багато популярних функцій, таких як карта домашньої сторінки та списки .
БІТБАКЕТ
Bitbucket — це безкоштовна служба розміщення вихідного коду для Git і Mercurial.
Завдяки своїм моделям і колекціям Backbone.js довів свою цінність у підтримці
REST API Bitbucket , а також нових компонентів, таких як коментарі вбудованого
коду та схвалення для запитів на отримання. Шаблони Moustache забезпечують
рендеринг на стороні сервера та клієнта, а власний життєвий цикл віджетів,
натхненний Google Closure, дозволяє Bitbucket прикрашати існуючі дерева DOM і
вставляти нові.
DISQUS
Disqus вибрав Backbone.js для забезпечення останньої версії свого віджета
коментарів. Невеликі розміри та легка розширюваність Backbone зробили його
правильним вибором для розподіленої веб-програми Disqus, яка повністю розміщена
всередині iframe і обслуговується на тисячах великих веб-ресурсів, включаючи
IGN, Wired, CNN, MLB тощо.
СМАЧНО
Delicious — це платформа соціальних закладок, яка дозволяє легко зберігати,
сортувати та зберігати закладки з усього Інтернету. Delicious використовує
Chaplin.js , Backbone.js і AppCache для створення повнофункціональної
веб-програми MVC. Використання Backbone допомогло веб-сайту та мобільним
програмам використовувати єдину службу API, а повторне використання рівня моделі
значно полегшило обмін кодом під час нещодавнього редизайну Delicious.
АКАДЕМІЯ ХАНА
Khan Academy має на меті надати безкоштовну освіту світового класу будь-кому де
завгодно. З тисячами відео, сотнями вправ на основі JavaScript і великими
планами на майбутнє, Khan Academy використовує Backbone, щоб зберегти модульний
і організований зовнішній код. Профілі користувачів і встановлення цілей
реалізовано за допомогою Backbone, jQuery та Handlebars , і більшість нових
функцій переноситься на сторону клієнта, що значно підвищує якість API .
IRCCLOUD
IRCCloud — це постійно підключений клієнт IRC, який ви використовуєте у своєму
браузері, часто залишаючи його відкритим цілий день у вкладці. Елегантний
веб-інтерфейс спілкується з серверною частиною Erlang через веб-сокети та API
IRCCloud . Він активно використовує події, моделі, перегляди та маршрутизацію
Backbone.js, щоб ваші розмови IRC проходили в режимі реального часу.
ВИЛА
Pitchfork використовує Backbone.js для забезпечення свого загального
аудіопрогравача Pitchfork.tv , маршрутизації розташування, кешу фрагментів
сторінок із записом тощо. Backbone.js (та Underscore.js ) допомагає команді
створювати чисті та модульні компоненти, рухатися дуже швидко та зосереджуватися
на сайті, а не на спагетті.
СПІН
Spin завантажує останні новини зі свого внутрішнього API на свій сайт за
допомогою моделей і колекцій Backbone, а також спеціального методу синхронізації
. Оскільки музика ніколи не повинна припинятися, навіть коли ви переходите на
різні «сторінки», Spin використовує магістральний маршрутизатор для навігації по
сайту.
ZOCDOC
ZocDoc допомагає пацієнтам знаходити місцевих лікарів і стоматологів у мережі,
бачити їх доступність у реальному часі та миттєво записуватися на прийом. Щодо
загальнодоступної сторони, веб-додаток використовує Backbone.js для обробки
стану на стороні клієнта та відтворення на сторінках пошуку та в профілях
лікарів . Крім того, нова версія частини веб-сайту, призначеної для лікаря, є
великою односторінковою програмою, яка виграє від структури та модульності
Backbone. Класи ZocDoc Backbone тестуються за допомогою Jasmine і доставляються
кінцевому користувачеві за допомогою Cassette .
WALMART MOBILE
Walmart використовував Backbone.js для створення нової версії свого мобільного
веб-додатку та створив два нових фреймворки. Thorax надає міксини, успадковані
події, а також прив’язки моделей і колекцій, які безпосередньо інтегруються з
шаблонами Handlebars . Lumbar дозволяє розбивати програму на модулі, які можна
завантажувати на вимогу, і створює збірки для певної платформи для частин
веб-програми, які вбудовано у власні програми Walmart для Android та iOS.
GROUPON ЗАРАЗ!
Groupon зараз! допоможе вам знайти місцеві пропозиції, які ви можете купити та
використати прямо зараз. Під час першої розробки продукту команда вирішила, що
він буде важким для AJAX із плавними переходами між розділами замість повних
оновлень, але він все одно повинен мати повну можливість зв’язування та
спільного використання. Незважаючи на те, що я ніколи раніше не використовував
Backbone, навчання було неймовірно швидким — прототип був зламаний за півдня, і
команда змогла надіслати продукт за два тижні. Оскільки джерело є мінімальним і
зрозумілим, було легко додати кілька розширень Backbone для Groupon Now!:
змінити маршрутизатор для обробки URL-адрес із параметрами рядка запиту та
додати просте сховище в пам’яті для кешування повторних запитів тих самих даних.
БАЗОВИЙ ТАБІР
37Signals обрала Backbone.js для створення функції календаря свого популярного
програмного забезпечення для керування проектами Basecamp . Календар Basecamp
використовує моделі та представлення Backbone.js у поєднанні з системою шаблонів
Eco , щоб представити відшліфований високоінтерактивний інтерфейс групового
планування.
СЛІД РАБСТВА
Slavery Footprint дозволяє споживачам візуалізувати, як їхні звички споживання
пов’язані з сучасним рабством, і дає їм можливість глибше поговорити з
компаніями, які виробляють товари, які вони придбали. Команда Slavery Footprint,
розташована в Окленді, штат Каліфорнія, працює над залученням окремих осіб, груп
і компаній до підвищення обізнаності та створення ефективних дій проти
примусової праці, торгівлі людьми та сучасного рабства за допомогою
онлайн-інструментів, а також офлайн-спільноти освітні та мобілізаційні програми.
СМУЖКА
Stripe надає API для прийому кредитних карток в Інтернеті. Інтерфейс керування
Stripe нещодавно було переписано з нуля на CoffeeScript, використовуючи
Backbone.js як основну структуру, Eco для шаблонів, Sass для таблиць стилів і
Stitch , щоб упакувати все разом у модулі CommonJS . Нова програма використовує
безпосередньо API Stripe для більшості своїх дій; Моделі Backbone.js спростили
зіставлення моделей на стороні клієнта з відповідними ресурсами RESTful.
AIRBNB
Airbnb використовує Backbone у багатьох своїх продуктах. Все почалося з
мобільного веб-сайту Airbnb (створеного за шість тижнів командою з трьох осіб) і
згодом розрослося до списків бажань , відповідності , пошуку , спільнот,
платежів і внутрішніх інструментів.
SOUNDCLOUD MOBILE
SoundCloud є провідною платформою обміну звуком в Інтернеті, а Backbone.js
забезпечує основу для SoundCloud Mobile . Проект використовує загальнодоступний
API SoundCloud як джерело даних (каналізується через проксі-сервер nginx),
шаблони jQuery для візуалізації, Qunit і PhantomJS для набору тестів. Код JS,
шаблони та CSS створені для робочого розгортання за допомогою різних
інструментів Node.js, таких як ready.js , Jake , jsdom . Backbone.History було
змінено для підтримки HTML5 history.pushState . Backbone.sync було розширено
додатковим рівнем кешу на основі SessionStorage.
АРТ.СИ
Art.sy – це місце для відкриття мистецтва, яке вам сподобається. Art.sy
побудовано на Rails, використовуючи Grape для обслуговування надійного JSON API
. Основний сайт — це односторінкова програма, написана на CoffeeScript і
використовує Backbone для створення структури навколо цього API. Панель
адміністратора та партнерська CMS також були виділені у власні проекти Backbone,
що споживають API.
ПАНДОРА
Коли Pandora переробила свій сайт на HTML5, вони вибрали Backbone.js, щоб
допомогти керувати інтерфейсом користувача та взаємодією. Наприклад, є модель,
яка представляє «доріжку, що зараз відтворюється», і кілька переглядів, які
автоматично оновлюються, коли змінюється поточна доріжка. Список станцій — це
колекція, тому коли станції додаються або змінюються, інтерфейс користувача
залишається актуальним.
НАТЯКАЮЧИ
Inkling — це міжплатформний спосіб публікації інтерактивного навчального
контенту. Inkling for Web використовує Backbone.js, щоб зробити сотні складних
книг — від студентських підручників до путівників і посібників з програмування —
привабливими та доступними в Інтернеті. Inkling підтримує 3D-графіку з
підтримкою WebGL, інтерактивне оцінювання, обмін інформацією в соціальних
мережах і систему для виконання навчального коду прямо в книзі, і все це в одній
сторінці програми, керованої магістральною технологією. На початку команда
вирішила зберегти сайт легким, використовуючи лише Backbone.js і необроблений
JavaScript. Результат? Повний вихідний код вагою лише 350 Кб із рівномірністю
функцій для iPad, iPhone і веб-клієнтів. Спробуйте цей уривок із JavaScript: The
Definitive Guide .
ШКОЛА КОДУ
Курси Code School навчають людей різним темам програмування, таким як
CoffeeScript , CSS, Ruby on Rails тощо. Нова сторінка завдання курсу Code School
побудована з нуля на Backbone.js, використовуючи все, що він може запропонувати:
маршрутизатор, колекції, моделі та складну обробку подій. Раніше сторінка була
безладом маніпуляцій jQuery DOM і ручних викликів Ajax. Backbone.js допоміг
запровадити новий спосіб думати про розробку організованої інтерфейсної програми
на JavaScript.
CLOUDAPP
CloudApp — це простий обмін файлами та посиланнями для Mac. Backbone.js
підтримує веб-інструменти, які використовують документований API для керування
Drops. Дані витягуються вручну або надсилаються Pusher і передаються в шаблони
Moustache для рендерингу. Перегляньте анотований вихідний код , щоб побачити
магію.
SEATGEEK
Карти квитків на стадіони від SeatGeek спочатку були розроблені за допомогою
Prototype.js . Перехід на Backbone.js і jQuery допоміг організувати багато коду
інтерфейсу користувача, а розширена структура значно спростила додавання
функцій. SeatGeek також знаходиться в процесі створення мобільного інтерфейсу,
який буде Backbone.js зверху вниз.
МОЛЬБЕРТ
Easel — це високоточний інструмент для веб-дизайну, який інтегрується у ваш
процес проектування та розробки. Команда Easel використовує CoffeeScript,
Underscore.js і Backbone.js для свого багатофункціонального візуального
редактора , а також для інших функцій керування сайтом. Структура Backbone
дозволила команді розбити складну проблему побудови візуального редактора на
керовані компоненти та все одно рухатися швидко.
JOLICLOUD
Jolicloud — це відкрита та незалежна платформа та операційна система , яка
забезпечує відтворення музики, потокове відео, перегляд фотографій і редагування
документів, перетворюючи недорогі комп’ютери на чудові хмарні пристрої. Нова
програма Jolicloud HTML5 була створена з нуля за допомогою Backbone і взаємодіє
з платформою Jolicloud , яка базується на Node.js. Jolicloud працює в
автономному режимі, використовуючи HTML5 AppCache, розширює Backbone.sync для
зберігання даних в IndexedDB або localStorage і спілкується з ОС Joli через
WebSockets.
SALON.IO
Salon.io надає простір, де фотографи, художники та дизайнери вільно розміщують
своє візуальне мистецтво на віртуальних стінах. Salon.io працює на Rails , але
не використовує багато традиційного стеку, оскільки весь інтерфейс розроблено як
односторінковий веб-додаток із використанням Backbone.js, Brunch і CoffeeScript
.
TILEMILL
Наші переможці Knight Foundation News Challenge , MapBox , створили студію
дизайну карт з відкритим кодом за допомогою Backbone.js: TileMill . TileMill
дозволяє керувати шарами карти на основі шейп-файлів і растрів і редагувати їх
зовнішній вигляд безпосередньо в браузері за допомогою мови стилів Carto .
Зауважте, що чудова домашня сторінка MapBox також є програмою Backbone.js.
ЦВІТІННЯ
Blossom — це легкий інструмент управління проектами для економних команд.
Backbone.js широко використовується в поєднанні з CoffeeScript для забезпечення
плавної взаємодії. Додаток укомплектований бранчем . Сервер RESTful створено за
допомогою Flask на Google App Engine.
TRELLO
Trello — це інструмент для співпраці, який організовує ваші проекти в дошки. На
дошці Trello міститься багато списків карток, які можуть містити контрольні
списки, файли та розмови, за які можна голосувати та організовувати за допомогою
міток. Оновлення на дошці відбуваються в режимі реального часу. Сайт створено з
використанням Backbone.js для всіх моделей, переглядів і маршрутів.
ЦИГЛА
Крісті Балан та Ірина Думітраску створили Tzigla , програму для спільного
малювання, де художники створюють плитки, які з'єднуються одна з одною,
створюючи сюрреалістичні малюнки . Магістральні моделі допомагають упорядкувати
код, маршрутизатори надають глибокі посилання, які можна закладати , а перегляди
відображаються за допомогою haml.js і Zepto . Tzigla написана на Ruby ( Rails )
на серверній частині та CoffeeScript на зовнішній частині, а Jammit попередньо
запаковує статичні ресурси.
ЖУРНАЛ ЗМІН
1.6.0 — 5 лютого 2024 р. — Різниця — Документи
* Додано подію notfound до Backbone.history , коли жоден маршрутизатор не
відповідає поточній URL-адресі.
* Додано функцію debugInfo для полегшення звітів про помилки.
* Виправлено кутовий випадок, коли колекція двічі пересилала події помилок ,
якщо модель спочатку було додано через метод create із wait: true .
* Додано шаблони випусків та інші покращення документації.
1.5.0 — 28 липня 2023 р. — Різниця — Документи
* Додано параметр trailingSlash до методу Backbone.history.start . Якщо для
цього параметра встановлено значення true , кінцева коса риса кореня завжди
зберігається в маршруті, навіть якщо сегмент шляху поточної URL-адреси
порожній.
* Виправлено помилку, через які події додавання колекції включали невідповідний
options.index, якщо інші моделі були видалені під час того самого виклику
Collection.set .
* Виправлено кутовий випадок, коли колекція не пересилала подію error , якщо
Collection.create було викликано за допомогою {wait: true} .
* Адаптований тест моделі CoffeeScript до CoffeeScript версії 2.
* Додано політику безпеки та кодексу поведінки.
* До кореня проекту додано .editorconfig , щоб сприяти узгодженій обробці
пробілів у всіх редакторах.
* Багато пояснень, виправлень і уточнень до документації, а також деякі
коментарі до коду.
1.4.1 — 26 лютого 2022 р. — Різниця — Документи
* Покращена підтримка поліморфних колекцій, у яких два або більше типів моделей
можуть мати різні атрибути idAttribute . Перевизначення Collection.modelId()
тепер може використовувати той факт, що внутрішні методи передають
idAttribute як другий аргумент modelId .
* Виправлено тимчасову невідповідність внутрішнього адміністрування колекції
під час зміни моделі . Моделі (і, відповідно, колекції) тепер створюють
спеціальну подію changeId , коли ідентифікатор змінюється.
* Виправлено проблему, через який клас або метод об’єкта ES6 не можна було
використовувати як модель колекції через появи прототипу .
* Відновлено постійну інтеграцію за допомогою GitHub Actions і кросбраузерне
тестування за допомогою Sauce Labs.
* Кілька вдосконалень онлайн-документації.
* Завдяки оновленим інструментам розробки анотованих вихідних кодів прикладу
коду, а також вихідну карту мінімізованого комплекту змінили назви файлів.
Псевдоніми та перенаправлення в старих місцях зберігаються для задньої
сумісності.
1.4.0 — 19 лютого 2019 р. — Різниця — Документи
* Колекції тепер підтримують протокол ітератора Javascript!
* listenTo використовує метод publicна прослуханого об'єкта . Це підтримує
взаємодію між Backbone та іншими бібліотеками (включаючи Node.js).
* Додано підтримку встановлення властивостей екземпляра перед конструктором у
класах ES2015 за допомогою методу першої ініціалізації .
* Collection.get перевіряє, чи об’єкт є моделлю , щоб дозволити створювати
моделі за допомогою ключа `attributes`.
* Виправлено кілька проблем із хешуванням і аналізом URL-адреси маршрутизатора.
1.3.3 — 5 квітня 2016 р. — Різниця — Документи
* До колекції додано методи підкреслення findIndex і findLastIndex .
* Додано options.changes до події «оновлення колекції », яка включає додані,
об'єднані та видалені моделі.
* Додано підтримку Collection#mixin і Model#mixin .
* Забезпечено роботу Collection#reduce і Collection#reduceRight без початкового
значення накопичувача .
* Забезпечена колекція#_removeModels завжди повертає масив.
* Виправлено помилку, через яку Events.once із синтаксисом об'єкта не вдавалося
зв'язати контекст.
* Виправлена регресія Collection#_onModelEvent , коли ініціювання подій зміни
без model призводило до помилки.
* Виправлена регресія Collection#set , колианаліз повертає хибне значення.
* Виправлена регресія Model#id , колиідентифікатор був ненавмисно невизначеним
.
* Виправлена регресія _removeModels , яка за певних умов могла викликати
нескінченний цикл.
* Вилучено підтримку пакетів компонентів .
* Зверніть увагу, що у версії 1.3.3 виправлено кілька помилок у версіях 1.3.0 –
1.3.2. Негайно оновіть програму, якщо ви використовуєте одну з цих версій.
1.2.3 — 3 вересня 2015 р. — Різниця — Документи
* Виправлено незначну регресію в 1.2.2, яка спричинила помилку під час
додавання моделей до колекції з індексом поза межами.
1.2.2 — 19 серпня 2015 р. — Різниця — Документи
* Методи колекції find , filter , reject , every , some і partition тепер
можуть використовувати попередній стиль атрибутів моделі:
this.collection.reject({user: 'guybrush'}) .
* Backbone Events знову підтримує карти з кількома подіями ( obj.on({'error
change': action}) ). Це була раніше недокументована функція, випадково
видалена у версії 1.2.0.
* Додано Collection#includes як псевдонім Collection#contains і як заміну
Collection#include у Underscore.js >= 1.8.
1.2.1 — 4 червня 2015 р. — Різниця — Документи
* Collection#add тепер уникає спроби розібрати екземпляр моделі, коли передано
parse: false .
* Виправлено помилку в Collection#remove . Вилучені моделі тепер фактично
повернуті.
* Model#fetch більше не аналізує відповідь під час передачі parse: false .
* Виправлено помилку для історії на основі iframe під час використання з JSDOM.
* Виправлено помилку, коли Collection#invoke не приймає додаткових аргументів.
* Використовуючи із картою подій, тепер ви можете передати текст як другий
аргумент. Це була раніше недокументована функція, випадково видалена у версії
1.2.0.
1.2.0 — 13 травня 2015 р. — Різниця — Документи
* Додано нові хуки до Views, щоб вони могли працювати без jQuery. Перегляньте
вікі-сторінку для отримання додаткової інформації.
* Як побічний ефект, Backbone.History більше не використовує методи подій
jQuery для слухачів pushState і hashChange . Ми всі рідні.
* Також щодо jQuery: якщо ви використовуєте Backbone із CommonJS (node,
browserify, webpack), Backbone автоматично намагається завантажити jQuery для
вас.
* Представлення тепер завжди делегує ваші події в setElement . Ви більше не
можете змінити хеш подій або влади ел свого представлення в ініціалізації .
* Додано подію «update» , яка запускається після додавання чи видалення
будь-якої кількості моделей із колекції. Зручно повторно відтворювати списки
речей без усунення стрибків.
* Collection#at можна використовувати від'ємний індекс.
* До колекції додано modelId для створення унікальних ідентифікаторів у
поліморфних колекціях. Зручно для спілкування, коли ідентифікатори ваших
моделей інакше збігаються.
* Додано замінний _isModel для розширеного контролю того, що ваша колекція
оцінює модель.
* Зворотний виклик success , переданий у Model#destroy, тепер завжди змінюється
асинхронно.
* Router#execute повертає назву маршруту як третій аргумент.
* Скасуйте поточний перехід Router, повернувши false у Router#execute . Чудово
підходить для перевірки статусу входу або інших інших умов.
* До Backbone.History додано методи getSearch і getPath як кросбраузерні та
замінювані способи розділення URL-адреси.
* Додано делегування та скасування делегування як більш детальні версії
delegateEvents і undelegateEvents . Корисно для авторів плагінів для
використання узгодженого інтерфейсу подій у Backbone.
* Колекція запускаємо подію "sort", лише якщо її порядок дійсно оновлено, а не
для кожного набору .
* Усі передані options.attr тепер враховуються під час збереження моделі з
patch: true .
* Collection#clone тепер встановлює модель і функції порівняння клонованої
колекції на нову.
* Додавання моделей до вашої колекції під час визначення позиції тепер надсилає
фактичне положення вашої моделі в події додавання , а не лише ту, яку ви
передали.
* Collection#remove тепер повертаємо лише список моделей, які фактично було
видалено з колекції.
* Виправлено завантаження Backbone.js у строгих завантажувачах модулів ES2015.
1.1.2 — 20 лютого 2014 р. — Різниця — Документи
* Backbone більше не намагається вимагати jQuery в середовищі Node/CommonJS для
кращої сумісності з людьми, які задають Browserify. Якщо ви хочете, щоб
Backbone використовував jQuery з Node, вкажіть його так: Backbone.$ =
require('jquery');
* Виправлено помилку для параметрів маршруту з новими рядками в них.
1.1.1 — 13 лютого 2014 р. — Різниця — Документи
* Backbone тепер реєструється для AMD (Require.js), Bower і Component, а також
є модулем CommonJS і звичайним (Java) Script. Вау.
* До маршрутизатора додано підхоплення виконання , яке дозволяє підключати та
вибирати роз аргументи маршруту, наприклад рядки запиту.
* Точне налаштування продуктивності для Backbone Events.
* Краще відповідність Юнікоду в маршрутах у старих браузерах.
* Магістральні маршрутизатори тепер обробляють параметри запиту у фрагментах
маршруту, передаючи їх в обробник як останній аргумент. Маршруті, вказані як
рядки, більше не потрібно включати рядок запиту ( 'foo?:query' має бути 'foo'
).
1.1.0 — 10 жовтня 2013 р. — Різниця — Документи
* Зроблено більш корисними поверненнями значення колекції set , add , remove і
reset . Замість повернення цього , тепер вони повертають змінену (додану,
видалену або оновлену) модель або список моделей.
* Backbone Views більше не автоматично підключають параметри, передані
конструктору, пропускають this.options і Backbone Models більше не
підключають параметри url і urlRoot , але ви можете зробити це самостійно,
якщо хочете.
* Усі «недійсні події» тепер передають наступні аргументи. Спочатку спочатку
модель, потім об'єкт помилки, потім параметри.
* Вам більше не дозволено змінювати ідентифікатор вашої моделі під час аналізу
. Натомість використовуйте idAttribute .
* З іншого боку, аналіз тепер є чудовим місцем для вилучення та оживлення
вхідного вкладеного JSON у пов’язаній підмоделі.
* Багато налаштувань, оптимізації та виявлення помилок, пов'язаних із Backbone
1.0, включаючи перевизначення URL-адреси, мутацію параметрів, масове
впорядкування, кінцеві косі ризики, витоки прослуховувачів крайового реєстру,
аналіз вкладеної моделі...
1.0.0 — 20 березня 2013 р. — Різниця — Документи
* Перемінено «update» колекції на набір для паралелізму з подібним model.set()
і контрасту з reset . Тепер це стандартний механізм оновлення після отримання
. Якщо ви хочете й використовувати «reset», передайте {reset: true} .
* Зараз ваші обробники маршрутів отримують попередньо розкодовані параметри
URL-адреси.
* Додано listenToOnce як аналог once .
* До колекції додано метод findWhere , подібний до where .
* До базових моделей додано ключі , значення , пари , інвертування , вибір і
пропущення методів Underscore.js.
* Маршрути в карті маршрутів маршрутизатора тепер можуть бути функціональними
літерами, а не посиланнями на методи, якщо ви хочете.
* Властивості url і urlRoot тепер можна передавати як параметри під час
створення нової моделі.
09.10 — 15 січня 2013 р. — Різниця — Документи
* Подія "маршрут" запускається на маршрутизаторі в додатку до запуску
Backbone.history .
* Перевірка моделі тепер виконується лише за замовчуванням у Model#save і
більше не виконується за замовчуванням під час створення або в Model#set ,
якщо не передано параметр {validate:true} .
* View#make видалено. Вам потрібно буде використовувати $ разом для створення
елементів DOM.
* Передача {silent:true} під час зміни більше не затримуватиме окремі події
"change:attr" , натомість вони повністю припиняються.
* Метод Model#change видалено, після відкладених змін атрибутів більше не
доступно.
* Виправлено помилку зі зміною , коли порівняння атрибутів використовує !==
замість _.isEqual .
* Виправлено помилку, коли порожня відповідь сервера під час збереження не
викликала функцію успіху.
* parse тепер отримує параметри як другий аргумент.
* Перевірка моделі тепер запускає недійсну подію замість error .
09.09 — 13 грудня 2012 — Різниця — Документи
* Додано прослуховування та припинення прослуховування подій. Їх можна
використовувати як варіанти інверсії керування для входження та виділення для
зручного від'єднання всіх подій, які зараз прослуховують об'єкт.
view.remove() автоматично захист view.stopListening() .
* Під час використання додавання до передачі колекції {merge: true} тепер
призведе до того, що атрибути повторюваних моделей об'єднуються з існуючими
моделями замість того, щоб їх ігнорувати.
* Додано оновлення (яке також доступне як опція отримання ) для «розумного»
оновлення набору моделей.
* Підтримка HTTP PATCH узбережені шляхом передачі {patch: true} .
* Об’єкт Backbone тепер розширює події , щоб ви могли використовувати його як
глобальну шину подій, якщо хочете.
* До Backbone.sync додано подію "request" , яка запускається щоразу, коли запит
починає надходити до сервера. Природне доповнення до події "синхронізації" .
* URL-адреси маршрутизатора тепер підтримують необов’язкові частини за
допомогою круглих дужок без використання регулярного виразу.
* Події магістралі тепер підтримують одноразово , подібно до одноразового Node
або jQuery .
* Основні події тепер підтримують карти подій у стилі jQuery obj.on({click:
action}) .
* Під час прослуховування події скидання список попередніх моделей тепер
доступний у options.previousModels для зручності.
* Перевірка тепер відбувається навіть під час «тихих» змін. Ця зміна означає,
що метод isValid видалено. Невдалі перевірки також викликають помилку, навіть
якщо зворотний виклик помилки вказано в параметрах.
* Консолідовані події "sync" та "error" в Backbone.sync . Тепер вони
запускаються незалежно від наявності зворотних викликів success чи error .
* Для API змішаного режиму Backbone.sync тепер приймає emulateHTTP і
emulateJSON як вбудовані параметри.
* Колекції тепер також проксі псевдоніми імен методів підкреслення (collect,
inject, foldl, foldr, head, tail, take тощо...)
* GetByCid видалено з колекцій. collection.get тепер підтримує пошук як за id,
так і за cid .
* Після отримання моделі або колекції всі визначені функції аналізу будуть
запущені. Таким чином, вибірка колекції та повернення нових моделей може
призвести до того, що колекція розбере список, а потім кожна модель буде
розібрана по черзі, якщо у вас визначено обидві функції.
* Виправлення помилки для нормалізації початкової та кінцевої скісної риски у
визначеннях маршрутизатора. Їх наявність (чи відсутність) не повинно впливати
на поведінку.
* Під час оголошення представлення параметри , el , tagName , id і className
тепер можуть бути визначені як функції, якщо ви хочете, щоб їхні значення
визначалися під час виконання.
* Додано хук Backbone.ajax для більш зручного використання перевизначення для
замовчування $.ajax . Якщо AJAX занадто старий, встановіть для нього бажаний
метод зв'язку із сервером.
* Collection#sort тепер запускає подію sort замість події скидання .
* Виклик destroy для моделей тепер повертатиме false , якщо модель є New .
* Щоб встановити якусь бібліотеку Backbone, яка використовується для
маніпуляції DOM і викликів Ajax, використовуйте Backbone.$ = ... замість
setDomLibrary .
* Видалено допоміжний метод Backbone.wrapError . Перевизначення синхронізації
має працювати краще для цього конкретного використання.
* Щоб покращити продуктивність add , options.index більше не
встановлюватиметься у зворотному виклику події add .
collection.indexOf(model) можна використати для отримання індексу моделі для
потреби.
* З семантичних причин і з причин крос-браузерності маршрути тепер ігнорують
параметри пошуку. Такі маршрути, як search?query=…&page=3, мають стати
search/…/3 .
* Model#set більше не залишається іншу модель як аргумент. Ця проблема до
тонких проблем і легко замінюється на model.set(other.attributes) .
0.9.2 — 21 березня 2012 — Різниця — Документи
* Замість того, щоб видавати помилку під час додавання дублікатів моделей до
колекції, Backbone тепер мовчки їх пропускатиме.
* Додано push , pop , unshift і shift до колекції.
* Змінений хеш моделі тепер відкритий для легкого читання змінної частини
атрибута з часом останньої події «change» моделі .
* До колекції додано місце для простого фільтрування.
* Тепер ви можете використати один виклик off , щоб видалити всі зворотні
виклики, пов’язані з певним об’єктом.
* Виправлення помилок для вкладених окремих подій змін, деякі з яких можуть
бути «мовчазними».
* Виправлення помилок для кодування URL у фрагментах location.hash .
* Виправлено помилку перевірки на стороні перед викликом клієнта збереження за
допомогою {wait: true} .
* Оновлено/оновлено приклад програми Todo List .
01.09 — 2 лютого 2012 р. — Різниця — Документи
* Повернуто до поведінки 0.5.3 для перевірки моделей. Тіхі зміни більше не
запускають перевірку (що полегшує роботу з формами). Додана функція isValid ,
за допомогою якої можна перевірити модель у дійсному стані.
* Якщо на сторінці є кілька версій jQuery, тепер ви можете вказати Backbone,
яку з них використовувати, за допомогою Backbone.setDomLibrary .
* Виправляє регресії у версії 0.9.0 для маршрутизації з «root», збереження за
допомогою «wait» і «validate», а також порядок вкладених подій «change».
0.9.0 — 30 січня 2012 р. — Різниця — Документи
* Створення та знищення моделей за допомогою create і destroy тепер
оптимістичні за замовчуванням. Передайте {wait: true} як параметр, якщо ви
хочете, щоб вони чекали успішної відповіді сервера для продовження.
* Дві нові властивості у представленнях: $el — кешування посилання jQuery (або
Zepto) на елемент представлення та setElement , яке слід використовувати
замість ручного встановлення el представлення . Він правильно встановлює
view.el і view.$el , а також повторно делегує події в новому елементі DOM.
* Тепер ви можете одночасно прив'язувати та запускати декілька подій,
розділених пробілами. Наприклад: model.on("зміна:зміна імені:вік", ...)
* Якщо ви не знаєте ключ заздалегідь, виберіть model.set(key, value), а також
save .
* Кілька моделей з одним ідентифікатором більше не допускаються до однієї
колекції.
* Додано подію «синхронізації» , яка запускається щоразу, коли стан успішно
синхронізовано із сервером моделі (створення, збереження, знищення).
* bind і unbind були змінені на on і off для ясності, слідуючи прикладу jQuery.
Також підтримуються старі назви.
* Функцію порівняння колекції Backbone тепер можна викликати або як sortBy
(передає функцію, яка не пропускає один аргумент), або як сортування (
передає функцію порівняння, яка очікує два аргументи). Функція порівняння
також тепер замовчуванням прив'язана до колекції — тому ви можете посилатися
на це в ній.
* Хеш подій перегляду тепер також може надрукувати прямі значення функцій, а
також назви рядків існуючих методів перегляду.
* Перевірку було оновлено — перевірки моделі тепер запускаються навіть для тих
змін, і ви більше не зможете створити модель у початково недійсному стані.
* Додано перемішування та ініціали до колекції, проксі-сервер із підкреслення.
* Model#urlRoot тепер можна використовувати як функцію, а також як значення.
* View#attributes тепер можна використовувати як функцію, а також як значення.
* Виклик fetch для колекції тепер призведе до того, що всі отримані JSON будуть
проходити через функціюсинтаксичного аналізу моделі колекції , якщо таку
визначено.
* Ви можете вказати маршрутизатору navigate (fragment, {replace: true}) , який
використовуєте history.replaceState або location.hash.replace , щоб змінити
URL-адресу без додавання запису Тепер історії.
* У подіях додавання та видання колекції індекс моделі, що додається або
видаляється, тепер доступний як options.index .
* Додати додано undelegateEvents , що дозволяє вручну видалити всі налаштовані
подій делегування.
* Хоча ви ні в якому разі не повинні писати свої маршрути з ними — скісні
ризики ( / ) тепер видалені з маршрутів.
* Виклик клонування моделі тепер передає лише атрибути для дублювання, а не
посилання на саму модель.
* Виклик clear для моделі тепер видаляє атрибут id .
03.05 — 9 серпня 2011 р. — Різниця — Документи Властивість подій тепер можна
використовувати як функцію, а також як об’єктний літерал, що полегшує програмне
визначення та успадкування подій. groupBy тепер є проксі від Underscore як метод
у колекціях. Якщо сервер уже відобразив використання під час завантаження
сторінок, передайте Backbone.history.start({silent: true}) , щоб запобігти
запуску початкового маршруту. Виправлення помилки для pushState із закодованими
URL-адресами.
02.05 — 26 липня 2011 р. — Diff — Документи.
Функція bind тепер може використовувати необов'язковий третій аргумент, щоб
вказати цю функцію зворотного виклику. У колекції тепер дозволено кілька моделей
з одним ідентифікатором . Виправлено помилку, через який виклик
.fetch(jQueryOptions) міг призвести до серіалізації неправильної URL-адреси.
Виправлено короткий запуск додаткового маршруту перед перенаправленням під час
деградації з pushState .
01.05 — 5 липня 2011 р. — Різниця — Очищення документів
із випуску 0.5.0, зокрема: покращено перевірку оновлення URL-адреси на основі
хешу до pushState і навпаки. Виправлена невідповідність із передачею
немодифікованих атрибутів у Model#initialize . Скасовано зміну 0.5.0 , яка
видаляла початкові хеш-бенги з маршрутів. Додано містить як псевдонім для
include .
0.5.0 — 1 липня 2011 р. — Diff — Документи
Велика кількість дрібних налаштувань і мікровиправлень вад, які найкраще
переглядати, дивлячись на commit diff . Підтримка HTML5 pushState , активована
за допомогою: Backbone.history.start({pushState: true}) . Контролер було
перейменовано на Router для ясності. Collection#refresh було перейменовано на
Collection#reset , щоб підкреслити його здатність скидати колекцію з новими
моделями, а також очищати колекцію, якщо використовувати без параметрів.
saveLocation було замінено на navigate . Методи постійної RESTful (збереження,
вибірка тощо) тепер повертають відкладений об’єкт jQuery для подальшого ланцюжка
успіху/помілки та загальної зручності. Покращено екранування XSS для
Model#escape . Додано параметр urlRoot , щоб дозволити вказувати URL-адреси
RESTful без використання колекції. Якщо Backbone.history.start захиститься
кілька разів, видається помилка . Collection#create тепер перевіряє перед
ініціалізацією нової моделі. view.el тепер можна шукати рядок jQuery. Backbone
Views тепер також можуть використовувати атрибути . Model#defaults тепер можна
використовувати як функцію, так і літеральним атрибутом об’єкта.
3.03 — 1 грудня 2010 р. — Різниця — Docs
Backbone.js тепер підтримує Zepto разом із jQuery як структуру для роботи з DOM
і підтримку Ajax. Реалізовано Model#escape для ефективної обробки атрибутів,
призначених для інтерполяції HTML. Під час спроби зберегти модель невдалі запити
тепер ініціюють подію «помилка» . Усюдисущий аргумент параметрів тепер
передається як останній аргумент для всіх подій "змін" .
02.03 — 23 листопада 2010 р. — Різниця — Виправлення помилок документів
для IE7 + події "hashchange" на основі iframe. синхронізацію тепер можна
перевизначати для кожної моделі чи колекції. Виправлена помилка рекурсії під час
виклику збереження без змінених атрибутів у події "зміна" .
0.3.1 — 15 листопада 2010 р. — Різниця — Документи.
Усі події «add» та «remove» тепер надсилаються через модель, щоб перегляди могли
їх прослуховувати, не знаючи про колекцію. Додано метод видалення до
Backbone.View . toJSON більше не розкривається взагалі для запитів на читання та
видалення . Магістральні маршрути тепер можуть завантажувати поржні фрагменти
URL.
0.3.0 — 9 листопада 2010 р. — Різниця — Docs
Backbone тепер має контролери та історію для маршрутизації на стороні клієнта на
основі фрагментів URL-адреси. Додано emulateHTTP , щоб забезпечити підтримку
старих серверів, які не забезпечуються PUT і DELETE . Додано емуляцію JSON для
серверів, які не можуть використовувати запити при кодуванні application/json .
Додано Model#clear , який видаляє всі атрибути з моделі. Усі класи Backbone
тепер можуть безперешкодно успадковуватися класами CoffeeScript.
0.2.0 — 25 жовтня 2010 р. — Різниця — Документи
Замість того, щоб відповіді сервера розташувалися в просторі імені під ключ
model , тепер ви можете налаштувати власний метод синтаксичного аналізу для
перетворення відповідей на атрибути для моделей і колекцій. Стара функція
handleEvents тепер називається delegateEvents і автоматично запускається як
частина конструктора View. До колекції додано функцію toJSON . До колекції
додано ланцюжок підкреслення .
0.1.2 — 19 жовтня 2010 р. — Різниця — Документи
Додано метод Model#fetch для оновлення атрибутів однієї моделі з сервера.
Зворотний виклик error тепер може передаватися для встановлення та як збереження
опції, яка буде викликана, якщо перевірка не вдається, перевизначаючи підію
"помилку" . Тепер ви можете наказати магістралі використовувати хак _method
замість методів HTTP, встановивши Backbone.emulateHTTP = true . Існуючі дані
моделі та колекції більше не надсилаються без потреб із запитами GET і DELETE .
Додано завдання граблі ворсу . Backbone тепер опубліковано як модуль NPM .
0.1.1 — 14 жовтня 2010 р. — Різниця — Документи
Додано угоду про функції ініціалізації , які мають виключатися під час створення
екземпляра, якщо визначено. Налаштування документації.
0.1.0 — 13 жовтня 2010 р. — Початковий випуск Backbone для Документів .