Skip to content

T
todomvc
Commit 339af9f9 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Merge pull request #391 from BorisKozo/fix_marionette 

Fixed the remaining bugs in Marionette implementation
parents fb7f0094 f9fab087
Hide whitespace changes
Inline Side-by-side
Showing with 2872 additions and 1958 deletions
labs/architecture-examples/backbone_marionette/README.md
View file @ 339af9f9
# Backbone.Marionette TodoMVC app # Backbone.Marionette TodoMVC app
[Backbone.Marionette](http://marionettejs.com) is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications. It is a collection of common design and implementation patterns found in the applications that Derick Bailey has been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft's "Prism" framework. [Backbone.Marionette](http://marionettejs.com) is a composite
application library for Backbone.js that aims to simplify
the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns
found in the applications that I (Derick Bailey) have been building
with Backbone, and includes various pieces inspired by composite
application architectures, such as Microsoft's "Prism" framework.
This implementation of the application uses Marionette's module system. Variations using RequireJS and a more classic approach to JavaScript modules are also [available](https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette). ## Key Benefits
* Scale applications out with modular, event driven architecture
* Sensible defaults, such as using Underscore templates for view rendering
* Easy to modify to make it work with your applicaton's specific needs
* Reduce boilerplate for views, with specialized view types
* Build on a modular architecture with an Application and modules that attach to it
* Compose your application's visuals at runtime, with Region and Layout
* Nested views and layouts within visual regions
* Built-in memory management and zombie killing in views, regions and layouts
* Built-in event clean up with the EventBinder
* Event-driven architecture with the EventAggregator
* Flexible, "as-needed" architecture allowing you to pick and choose what you need
* And much, much more
This implementation of the application uses Marionette's module system.
Variations using RequireJS and a more classic approach to JavaScript modules
[are also available here](https://github.com/marionettejs/backbone.marionette/wiki/Projects-and-websites-using-marionette).
\ No newline at end of file
labs/architecture-examples/backbone_marionette/index.html
View file @ 339af9f9
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<script src="../../../assets/ie.js"></script> <script src="../../../assets/ie.js"></script>
<![endif]--> <![endif]-->
<script type="text/html" id="template-footer"> <script type="text/html" id="template-footer">
<span id="todo-count"><strong></strong> items left</span> <span id="todo-count"><strong></strong><span></span></span>
<ul id="filters"> <ul id="filters">
<li> <li>
<a href="#">All</a> <a href="#">All</a>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<a href="#completed">Completed</a> <a href="#completed">Completed</a>
</li> </li>
</ul> </ul>
<button id="clear-completed">Clear completed</button> <button id="clear-completed"></button>
</script> </script>
<script type="text/html" id="template-header"> <script type="text/html" id="template-header">
<h1>todos</h1> <h1>todos</h1>
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<script src="../../../assets/jquery.min.js"></script> <script src="../../../assets/jquery.min.js"></script>
<script src="../../../assets/lodash.min.js"></script> <script src="../../../assets/lodash.min.js"></script>
<script src="js/lib/backbone.js"></script> <script src="js/lib/backbone.js"></script>
<script src="js/lib/backbone-localStorage.js"></script> <script src="js/lib/backbone.localStorage.js"></script>
<script src="js/lib/backbone.marionette.js"></script> <script src="js/lib/backbone.marionette.js"></script>
<!-- application --> <!-- application -->
<script src="js/TodoMVC.js"></script> <script src="js/TodoMVC.js"></script>
......
labs/architecture-examples/backbone_marionette/js/TodoMVC.Layout.js
View file @ 339af9f9
TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) { /*global TodoMVC */
'use strict';
TodoMVC.module('Layout', function (Layout, App, Backbone) {
// Layout Header View // Layout Header View
// ------------------ // ------------------
...@@ -12,15 +15,15 @@ TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) { ...@@ -12,15 +15,15 @@ TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) {
input: '#new-todo' input: '#new-todo'
}, },
events : { events: {
'keypress #new-todo': 'onInputKeypress' 'keypress #new-todo': 'onInputKeypress'
}, },
onInputKeypress: function(e) { onInputKeypress: function (e) {
var ENTER_KEY = 13; var ENTER_KEY = 13,
var todoText = this.ui.input.val().trim(); todoText = this.ui.input.val().trim();
if ( e.which === ENTER_KEY && todoText ) { if (e.which === ENTER_KEY && todoText) {
this.collection.create({ this.collection.create({
title: todoText title: todoText
}); });
...@@ -39,36 +42,50 @@ TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) { ...@@ -39,36 +42,50 @@ TodoMVC.module('Layout', function(Layout, App, Backbone, Marionette, $, _) {
// point to jQuery selected objects // point to jQuery selected objects
ui: { ui: {
count: '#todo-count strong', count: '#todo-count strong',
filters: '#filters a' itemsString: '#todo-count span',
filters: '#filters a',
clearCompleted: '#clear-completed'
}, },
events: { events: {
'click #clear-completed': 'onClearClick' 'click #clear-completed': 'onClearClick'
}, },
initialize : function() { initialize: function () {
this.bindTo(App.vent, 'todoList:filter', this.updateFilterSelection, this); this.listenTo(App.vent, 'todoList:filter', this.updateFilterSelection, this);
this.bindTo(this.collection, 'all', this.updateCount, this); this.listenTo(this.collection, 'all', this.updateCount, this);
}, },
onRender: function() { onRender: function () {
this.updateCount(); this.updateCount();
}, },
updateCount: function() { updateCount: function () {
var count = this.collection.getActive().length; var count = this.collection.getActive().length,
length = this.collection.length,
completed = length - count;
this.ui.count.html(count); this.ui.count.html(count);
this.$el.parent().toggle(count > 0); this.ui.itemsString.html(' ' + (count === 1 ? 'item' : 'items') + ' left');
this.$el.parent().toggle(length > 0);
if (completed > 0) {
this.ui.clearCompleted.show();
this.ui.clearCompleted.html('Clear completed (' + completed + ')');
} else {
this.ui.clearCompleted.hide();
}
}, },
updateFilterSelection : function(filter) { updateFilterSelection: function (filter) {
this.ui.filters this.ui.filters
.removeClass('selected') .removeClass('selected')
.filter('[href="#' + filter + '"]') .filter('[href="#' + filter + '"]')
.addClass('selected'); .addClass('selected');
}, },
onClearClick: function() { onClearClick: function () {
var completed = this.collection.getCompleted(); var completed = this.collection.getCompleted();
completed.forEach(function destroy(todo) { completed.forEach(function destroy(todo) {
todo.destroy(); todo.destroy();
......
labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.Views.js
View file @ 339af9f9
TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _) { /*global TodoMVC */
'use strict';
TodoMVC.module('TodoList.Views', function (Views, App, Backbone, Marionette, $) {
// Todo List Item View // Todo List Item View
// ------------------- // -------------------
...@@ -8,55 +11,70 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _ ...@@ -8,55 +11,70 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _
Views.ItemView = Marionette.ItemView.extend({ Views.ItemView = Marionette.ItemView.extend({
tagName: 'li', tagName: 'li',
template: '#template-todoItemView', template: '#template-todoItemView',
ui: { ui: {
edit: '.edit' edit: '.edit'
}, },
events : { events: {
'click .destroy': 'destroy', 'click .destroy': 'destroy',
'dblclick label': 'onEditClick', 'dblclick label': 'onEditClick',
'keypress .edit': 'onEditKeypress', 'keydown .edit': 'onEditKeypress',
'click .toggle' : 'toggle' 'focusout .edit': 'onEditFocusout',
}, 'click .toggle': 'toggle'
},
initialize: function() {
this.bindTo(this.model, 'change', this.render, this); initialize: function () {
}, this.listenTo(this.model, 'change', this.render, this);
},
onRender: function() {
this.$el.removeClass('active completed'); onRender: function () {
this.$el.removeClass('active completed');
if (this.model.get('completed')) {
this.$el.addClass('completed'); if (this.model.get('completed')) {
} else { this.$el.addClass('completed');
this.$el.addClass('active'); } else {
} this.$el.addClass('active');
}, }
},
destroy: function() {
this.model.destroy(); destroy: function () {
}, this.model.destroy();
},
toggle: function() {
this.model.toggle().save(); toggle: function () {
}, this.model.toggle().save();
},
onEditClick: function() {
this.$el.addClass('editing'); onEditClick: function () {
this.ui.edit.focus(); this.$el.addClass('editing');
}, this.ui.edit.focus();
this.ui.edit.val(this.ui.edit.val());
onEditKeypress: function(e) { },
var ENTER_KEY = 13;
var todoText = this.ui.edit.val().trim(); onEditFocusout: function () {
var todoText = this.ui.edit.val().trim();
if ( e.which === ENTER_KEY && todoText ) { if (todoText) {
this.model.set('title', todoText).save(); this.model.set('title', todoText).save();
this.$el.removeClass('editing'); this.$el.removeClass('editing');
} } else {
this.destroy();
}
},
onEditKeypress: function (e) {
var ENTER_KEY = 13, ESC_KEY = 27;
if (e.which === ENTER_KEY) {
this.onEditFocusout();
return;
} }
if (e.which === ESC_KEY) {
this.$el.removeClass('editing');
}
}
}); });
// Item List View // Item List View
...@@ -67,43 +85,43 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _ ...@@ -67,43 +85,43 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _
Views.ListView = Backbone.Marionette.CompositeView.extend({ Views.ListView = Backbone.Marionette.CompositeView.extend({
template: '#template-todoListCompositeView', template: '#template-todoListCompositeView',
itemView: Views.ItemView, itemView: Views.ItemView,
itemViewContainer: '#todo-list', itemViewContainer: '#todo-list',
ui: { ui: {
toggle: '#toggle-all' toggle: '#toggle-all'
}, },
events : { events: {
'click #toggle-all': 'onToggleAllClick' 'click #toggle-all': 'onToggleAllClick'
}, },
initialize: function() { initialize: function () {
this.bindTo(this.collection, 'all', this.update, this); this.listenTo(this.collection, 'all', this.update, this);
}, },
onRender: function() { onRender: function () {
this.update(); this.update();
}, },
update: function() { update: function () {
function reduceCompleted(left, right) { function reduceCompleted(left, right) {
return left && right.get('completed'); return left && right.get('completed');
} }
var allCompleted = this.collection.reduce(reduceCompleted,true); var allCompleted = this.collection.reduce(reduceCompleted, true);
this.ui.toggle.prop('checked', allCompleted); this.ui.toggle.prop('checked', allCompleted);
this.$el.parent().toggle(!!this.collection.length); this.$el.parent().toggle(!!this.collection.length);
}, },
onToggleAllClick: function(e) { onToggleAllClick: function (e) {
var isChecked = e.currentTarget.checked; var isChecked = e.currentTarget.checked;
this.collection.each(function(todo){ this.collection.each(function (todo) {
todo.save({'completed': isChecked}); todo.save({ 'completed': isChecked });
}); });
} }
}); });
// Application Event Handlers // Application Event Handlers
...@@ -112,7 +130,7 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _ ...@@ -112,7 +130,7 @@ TodoMVC.module('TodoList.Views', function(Views, App, Backbone, Marionette, $, _
// Handler for filtering the list of items by showing and // Handler for filtering the list of items by showing and
// hiding through the use of various CSS classes // hiding through the use of various CSS classes
App.vent.on('todoList:filter', function(filter) { App.vent.on('todoList:filter', function (filter) {
filter = filter || 'all'; filter = filter || 'all';
$('#todoapp').attr('class', 'filter-' + filter); $('#todoapp').attr('class', 'filter-' + filter);
}); });
......
labs/architecture-examples/backbone_marionette/js/TodoMVC.TodoList.js
View file @ 339af9f9
TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) { /*global TodoMVC */
'use strict';
TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette, $, _) {
// TodoList Router // TodoList Router
// --------------- // ---------------
...@@ -17,7 +20,7 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) { ...@@ -17,7 +20,7 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) {
// Control the workflow and logic that exists at the application // Control the workflow and logic that exists at the application
// level, above the implementation detail of views and models // level, above the implementation detail of views and models
TodoList.Controller = function() { TodoList.Controller = function () {
this.todoList = new App.Todos.TodoList(); this.todoList = new App.Todos.TodoList();
}; };
...@@ -25,7 +28,7 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) { ...@@ -25,7 +28,7 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) {
// Start the app by showing the appropriate views // Start the app by showing the appropriate views
// and fetching the list of todo items, if there are any // and fetching the list of todo items, if there are any
start: function(){ start: function () {
this.showHeader(this.todoList); this.showHeader(this.todoList);
this.showFooter(this.todoList); this.showFooter(this.todoList);
this.showTodoList(this.todoList); this.showTodoList(this.todoList);
...@@ -33,28 +36,28 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) { ...@@ -33,28 +36,28 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) {
this.todoList.fetch(); this.todoList.fetch();
}, },
showHeader: function(todoList) { showHeader: function (todoList) {
var header = new App.Layout.Header({ var header = new App.Layout.Header({
collection: todoList collection: todoList
}); });
App.header.show(header); App.header.show(header);
}, },
showFooter: function(todoList) { showFooter: function (todoList) {
var footer = new App.Layout.Footer({ var footer = new App.Layout.Footer({
collection: todoList collection: todoList
}); });
App.footer.show(footer); App.footer.show(footer);
}, },
showTodoList: function(todoList) { showTodoList: function (todoList) {
App.main.show(new TodoList.Views.ListView({ App.main.show(new TodoList.Views.ListView({
collection : todoList collection: todoList
})); }));
}, },
// Set the filter to show complete or all items // Set the filter to show complete or all items
filterItems: function(filter) { filterItems: function (filter) {
App.vent.trigger('todoList:filter', filter.trim() || ''); App.vent.trigger('todoList:filter', filter.trim() || '');
} }
}); });
...@@ -66,9 +69,9 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) { ...@@ -66,9 +69,9 @@ TodoMVC.module('TodoList', function(TodoList, App, Backbone, Marionette, $, _) {
// when the the application is started, pulling in all of the // when the the application is started, pulling in all of the
// existing Todo items and displaying them. // existing Todo items and displaying them.
TodoList.addInitializer(function() { TodoList.addInitializer(function () {
var controller = new TodoList.Controller(); var controller = new TodoList.Controller();
new TodoList.Router({ controller.router = new TodoList.Router({
controller: controller controller: controller
}); });
......
labs/architecture-examples/backbone_marionette/js/TodoMVC.Todos.js
View file @ 339af9f9
TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) { /*global TodoMVC */
'use strict';
TodoMVC.module('Todos', function (Todos, App, Backbone) {
// Todo Model // Todo Model
// ---------- // ----------
Todos.Todo = Backbone.Model.extend({ Todos.Todo = Backbone.Model.extend({
localStorage: new Backbone.LocalStorage('todos-backbone-marionettejs'),
defaults: { defaults: {
title: '', title: '',
...@@ -12,17 +14,17 @@ TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) { ...@@ -12,17 +14,17 @@ TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) {
created: 0 created: 0
}, },
initialize: function() { initialize: function () {
if (this.isNew()) { if (this.isNew()) {
this.set('created', Date.now()); this.set('created', Date.now());
} }
}, },
toggle: function() { toggle: function () {
return this.set('completed', !this.isCompleted()); return this.set('completed', !this.isCompleted());
}, },
isCompleted: function() { isCompleted: function () {
return this.get('completed'); return this.get('completed');
} }
}); });
...@@ -33,21 +35,21 @@ TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) { ...@@ -33,21 +35,21 @@ TodoMVC.module('Todos', function(Todos, App, Backbone, Marionette, $, _) {
Todos.TodoList = Backbone.Collection.extend({ Todos.TodoList = Backbone.Collection.extend({
model: Todos.Todo, model: Todos.Todo,
localStorage: new Backbone.LocalStorage('todos-backbone'), localStorage: new Backbone.LocalStorage('todos-backbone-marionette'),
getCompleted: function() { getCompleted: function () {
return this.filter(this._isCompleted); return this.filter(this._isCompleted);
}, },
getActive: function() { getActive: function () {
return this.reject(this._isCompleted); return this.reject(this._isCompleted);
}, },
comparator: function(todo) { comparator: function (todo) {
return todo.get('created'); return todo.get('created');
}, },
_isCompleted: function(todo){ _isCompleted: function (todo) {
return todo.isCompleted(); return todo.isCompleted();
} }
}); });
......
labs/architecture-examples/backbone_marionette/js/TodoMVC.js
View file @ 339af9f9
/*global Backbone */
'use strict';
var TodoMVC = new Backbone.Marionette.Application(); var TodoMVC = new Backbone.Marionette.Application();
TodoMVC.addRegions({ TodoMVC.addRegions({
...@@ -6,6 +9,6 @@ TodoMVC.addRegions({ ...@@ -6,6 +9,6 @@ TodoMVC.addRegions({
footer: '#footer' footer: '#footer'
}); });
TodoMVC.on('initialize:after', function() { TodoMVC.on('initialize:after', function () {
Backbone.history.start(); Backbone.history.start();
}); });
labs/architecture-examples/backbone_marionette/js/lib/backbone-localStorage.js deleted 100644 → 0
View file @ fb7f0094
/**
* Backbone localStorage Adapter
* https://github.com/jeromegn/Backbone.localStorage
*/
(function() {
// A simple module to replace `Backbone.sync` with *localStorage*-based
// persistence. Models are given GUIDS, and saved into a JSON object. Simple
// as that.
// Hold reference to Underscore.js and Backbone.js in the closure in order
// to make things work even if they are removed from the global namespace
var _ = this._;
var Backbone = this.Backbone;
// Generate four random hex digits.
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
// Generate a pseudo-GUID by concatenating random hexadecimal.
function guid() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
};
// Our Store is represented by a single JS object in *localStorage*. Create it
// with a meaningful name, like the name you'd give a table.
// window.Store is deprectated, use Backbone.LocalStorage instead
Backbone.LocalStorage = window.Store = function(name) {
this.name = name;
var store = this.localStorage().getItem(this.name);
this.records = (store && store.split(",")) || [];
};
_.extend(Backbone.LocalStorage.prototype, {
// Save the current state of the **Store** to *localStorage*.
save: function() {
this.localStorage().setItem(this.name, this.records.join(","));
},
// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function(model) {
if (!model.id) {
model.id = guid();
model.set(model.idAttribute, model.id);
}
this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
this.records.push(model.id.toString());
this.save();
return model.toJSON();
},
// Update a model by replacing its copy in `this.data`.
update: function(model) {
this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
if (!_.include(this.records, model.id.toString())) this.records.push(model.id.toString()); this.save();
return model.toJSON();
},
// Retrieve a model from `this.data` by id.
find: function(model) {
return JSON.parse(this.localStorage().getItem(this.name+"-"+model.id));
},
// Return the array of all models currently in storage.
findAll: function() {
return _(this.records).chain()
.map(function(id){return JSON.parse(this.localStorage().getItem(this.name+"-"+id));}, this)
.compact()
.value();
},
// Delete a model from `this.data`, returning it.
destroy: function(model) {
this.localStorage().removeItem(this.name+"-"+model.id);
this.records = _.reject(this.records, function(record_id){return record_id == model.id.toString();});
this.save();
return model;
},
localStorage: function() {
return localStorage;
}
});
// localSync delegate to the model or collection's
// *localStorage* property, which should be an instance of `Store`.
// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options, error) {
var store = model.localStorage || model.collection.localStorage;
// Backwards compatibility with Backbone <= 0.3.3
if (typeof options == 'function') {
options = {
success: options,
error: error
};
}
var resp;
switch (method) {
case "read": resp = model.id != undefined ? store.find(model) : store.findAll(); break;
case "create": resp = store.create(model); break;
case "update": resp = store.update(model); break;
case "delete": resp = store.destroy(model); break;
}
if (resp) {
options.success(resp);
} else {
options.error("Record not found");
}
};
Backbone.ajaxSync = Backbone.sync;
Backbone.getSyncMethod = function(model) {
if(model.localStorage || (model.collection && model.collection.localStorage))
{
return Backbone.localSync;
}
return Backbone.ajaxSync;
};
// Override 'Backbone.sync' to default to localSync,
// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
Backbone.sync = function(method, model, options, error) {
return Backbone.getSyncMethod(model).apply(this, [method, model, options, error]);
};
})();
labs/architecture-examples/backbone_marionette/js/lib/backbone.js
View file @ 339af9f9
// Backbone.js 0.9.2 // Backbone.js 0.9.10
// (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
// Backbone may be freely distributed under the MIT license. // Backbone may be freely distributed under the MIT license.
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
// Initial Setup // Initial Setup
// ------------- // -------------
// Save a reference to the global object (`window` in the browser, `global` // Save a reference to the global object (`window` in the browser, `exports`
// on the server). // on the server).
var root = this; var root = this;
...@@ -18,9 +18,11 @@ ...@@ -18,9 +18,11 @@
// restored later on, if `noConflict` is used. // restored later on, if `noConflict` is used.
var previousBackbone = root.Backbone; var previousBackbone = root.Backbone;
// Create a local reference to slice/splice. // Create a local reference to array methods.
var slice = Array.prototype.slice; var array = [];
var splice = Array.prototype.splice; var push = array.push;
var slice = array.slice;
var splice = array.splice;
// The top-level namespace. All public Backbone classes and modules will // The top-level namespace. All public Backbone classes and modules will
// be attached to this. Exported for both CommonJS and the browser. // be attached to this. Exported for both CommonJS and the browser.
...@@ -32,23 +34,14 @@ ...@@ -32,23 +34,14 @@
} }
// Current version of the library. Keep in sync with `package.json`. // Current version of the library. Keep in sync with `package.json`.
Backbone.VERSION = '0.9.2'; Backbone.VERSION = '0.9.10';
// Require Underscore, if we're on the server, and it's not already present. // Require Underscore, if we're on the server, and it's not already present.
var _ = root._; var _ = root._;
if (!_ && (typeof require !== 'undefined')) _ = require('underscore'); if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
// For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable. // For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable.
var $ = root.jQuery || root.Zepto || root.ender; Backbone.$ = root.jQuery || root.Zepto || root.ender;
// Set the JavaScript library that will be used for DOM manipulation and
// Ajax calls (a.k.a. the `$` variable). By default Backbone will use: jQuery,
// Zepto, or Ender; but the `setDomLibrary()` method lets you inject an
// alternate JavaScript library (or a mock library for testing your views
// outside of a browser).
Backbone.setDomLibrary = function(lib) {
$ = lib;
};
// Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
// to its previous owner. Returns a reference to this Backbone object. // to its previous owner. Returns a reference to this Backbone object.
...@@ -69,14 +62,51 @@ ...@@ -69,14 +62,51 @@
Backbone.emulateJSON = false; Backbone.emulateJSON = false;
// Backbone.Events // Backbone.Events
// ----------------- // ---------------
// Regular expression used to split event strings // Regular expression used to split event strings.
var eventSplitter = /\s+/; var eventSplitter = /\s+/;
// Implement fancy features of the Events API such as multiple event
// names `"change blur"` and jQuery-style event maps `{change: action}`
// in terms of the existing API.
var eventsApi = function(obj, action, name, rest) {
if (!name) return true;
if (typeof name === 'object') {
for (var key in name) {
obj[action].apply(obj, [key, name[key]].concat(rest));
}
} else if (eventSplitter.test(name)) {
var names = name.split(eventSplitter);
for (var i = 0, l = names.length; i < l; i++) {
obj[action].apply(obj, [names[i]].concat(rest));
}
} else {
return true;
}
};
// Optimized internal dispatch function for triggering events. Tries to
// keep the usual cases speedy (most Backbone events have 3 arguments).
var triggerEvents = function(events, args) {
var ev, i = -1, l = events.length;
switch (args.length) {
case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx);
return;
case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0]);
return;
case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0], args[1]);
return;
case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, args[0], args[1], args[2]);
return;
default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
}
};
// A module that can be mixed in to *any object* in order to provide it with // A module that can be mixed in to *any object* in order to provide it with
// custom events. You may bind with `on` or remove with `off` callback functions // custom events. You may bind with `on` or remove with `off` callback
// to an event; trigger`-ing an event fires all callbacks in succession. // functions to an event; `trigger`-ing an event fires all callbacks in
// succession.
// //
// var object = {}; // var object = {};
// _.extend(object, Backbone.Events); // _.extend(object, Backbone.Events);
...@@ -85,58 +115,59 @@ ...@@ -85,58 +115,59 @@
// //
var Events = Backbone.Events = { var Events = Backbone.Events = {
// Bind one or more space separated events, `events`, to a `callback` // Bind one or more space separated events, or an events map,
// function. Passing `"all"` will bind the callback to all events fired. // to a `callback` function. Passing `"all"` will bind the callback to
on: function(events, callback, context) { // all events fired.
on: function(name, callback, context) {
var calls, event, node, tail, list; if (!(eventsApi(this, 'on', name, [callback, context]) && callback)) return this;
if (!callback) return this; this._events || (this._events = {});
events = events.split(eventSplitter); var list = this._events[name] || (this._events[name] = []);
calls = this._callbacks || (this._callbacks = {}); list.push({callback: callback, context: context, ctx: context || this});
// Create an immutable callback list, allowing traversal during
// modification. The tail is an empty object that will always be used
// as the next node.
while (event = events.shift()) {
list = calls[event];
node = list ? list.tail : {};
node.next = tail = {};
node.context = context;
node.callback = callback;
calls[event] = {tail: tail, next: list ? list.next : node};
}
return this; return this;
}, },
// Remove one or many callbacks. If `context` is null, removes all callbacks // Bind events to only be triggered a single time. After the first time
// with that function. If `callback` is null, removes all callbacks for the // the callback is invoked, it will be removed.
// event. If `events` is null, removes all bound callbacks for all events. once: function(name, callback, context) {
off: function(events, callback, context) { if (!(eventsApi(this, 'once', name, [callback, context]) && callback)) return this;
var event, calls, node, tail, cb, ctx; var self = this;
var once = _.once(function() {
self.off(name, once);
callback.apply(this, arguments);
});
once._callback = callback;
this.on(name, once, context);
return this;
},
// No events, or removing *all* events. // Remove one or many callbacks. If `context` is null, removes all
if (!(calls = this._callbacks)) return; // callbacks with that function. If `callback` is null, removes all
if (!(events || callback || context)) { // callbacks for the event. If `name` is null, removes all bound
delete this._callbacks; // callbacks for all events.
off: function(name, callback, context) {
var list, ev, events, names, i, l, j, k;
if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
if (!name && !callback && !context) {
this._events = {};
return this; return this;
} }
// Loop through the listed events and contexts, splicing them out of the names = name ? [name] : _.keys(this._events);
// linked list of callbacks if appropriate. for (i = 0, l = names.length; i < l; i++) {
events = events ? events.split(eventSplitter) : _.keys(calls); name = names[i];
while (event = events.shift()) { if (list = this._events[name]) {
node = calls[event]; events = [];
delete calls[event]; if (callback || context) {
if (!node || !(callback || context)) continue; for (j = 0, k = list.length; j < k; j++) {
// Create a new list, omitting the indicated callbacks. ev = list[j];
tail = node.tail; if ((callback && callback !== ev.callback &&
while ((node = node.next) !== tail) { callback !== ev.callback._callback) ||
cb = node.callback; (context && context !== ev.context)) {
ctx = node.context; events.push(ev);
if ((callback && cb !== callback) || (context && ctx !== context)) { }
this.on(event, cb, ctx); }
} }
this._events[name] = events;
} }
} }
...@@ -147,40 +178,54 @@ ...@@ -147,40 +178,54 @@
// passed the same arguments as `trigger` is, apart from the event name // passed the same arguments as `trigger` is, apart from the event name
// (unless you're listening on `"all"`, which will cause your callback to // (unless you're listening on `"all"`, which will cause your callback to
// receive the true name of the event as the first argument). // receive the true name of the event as the first argument).
trigger: function(events) { trigger: function(name) {
var event, node, calls, tail, args, all, rest; if (!this._events) return this;
if (!(calls = this._callbacks)) return this; var args = slice.call(arguments, 1);
all = calls.all; if (!eventsApi(this, 'trigger', name, args)) return this;
events = events.split(eventSplitter); var events = this._events[name];
rest = slice.call(arguments, 1); var allEvents = this._events.all;
if (events) triggerEvents(events, args);
// For each event, walk through the linked list of callbacks twice, if (allEvents) triggerEvents(allEvents, arguments);
// first to trigger the event, then to trigger any `"all"` callbacks. return this;
while (event = events.shift()) { },
if (node = calls[event]) {
tail = node.tail; // An inversion-of-control version of `on`. Tell *this* object to listen to
while ((node = node.next) !== tail) { // an event in another object ... keeping track of what it's listening to.
node.callback.apply(node.context || this, rest); listenTo: function(obj, name, callback) {
} var listeners = this._listeners || (this._listeners = {});
} var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
if (node = all) { listeners[id] = obj;
tail = node.tail; obj.on(name, typeof name === 'object' ? this : callback, this);
args = [event].concat(rest); return this;
while ((node = node.next) !== tail) { },
node.callback.apply(node.context || this, args);
} // Tell this object to stop listening to either specific events ... or
// to every object it's currently listening to.
stopListening: function(obj, name, callback) {
var listeners = this._listeners;
if (!listeners) return;
if (obj) {
obj.off(name, typeof name === 'object' ? this : callback, this);
if (!name && !callback) delete listeners[obj._listenerId];
} else {
if (typeof name === 'object') callback = this;
for (var id in listeners) {
listeners[id].off(name, callback, this);
} }
this._listeners = {};
} }
return this; return this;
} }
}; };
// Aliases for backwards compatibility. // Aliases for backwards compatibility.
Events.bind = Events.on; Events.bind = Events.on;
Events.unbind = Events.off; Events.unbind = Events.off;
// Allow the `Backbone` object to serve as a global event bus, for folks who
// want global "pubsub" in a convenient place.
_.extend(Backbone, Events);
// Backbone.Model // Backbone.Model
// -------------- // --------------
...@@ -188,24 +233,16 @@ ...@@ -188,24 +233,16 @@
// is automatically generated and assigned for you. // is automatically generated and assigned for you.
var Model = Backbone.Model = function(attributes, options) { var Model = Backbone.Model = function(attributes, options) {
var defaults; var defaults;
attributes || (attributes = {}); var attrs = attributes || {};
if (options && options.parse) attributes = this.parse(attributes);
if (defaults = getValue(this, 'defaults')) {
attributes = _.extend({}, defaults, attributes);
}
if (options && options.collection) this.collection = options.collection;
this.attributes = {};
this._escapedAttributes = {};
this.cid = _.uniqueId('c'); this.cid = _.uniqueId('c');
this.attributes = {};
if (options && options.collection) this.collection = options.collection;
if (options && options.parse) attrs = this.parse(attrs, options) || {};
if (defaults = _.result(this, 'defaults')) {
attrs = _.defaults({}, attrs, defaults);
}
this.set(attrs, options);
this.changed = {}; this.changed = {};
this._silent = {};
this._pending = {};
this.set(attributes, {silent: true});
// Reset change tracking.
this.changed = {};
this._silent = {};
this._pending = {};
this._previousAttributes = _.clone(this.attributes);
this.initialize.apply(this, arguments); this.initialize.apply(this, arguments);
}; };
...@@ -215,14 +252,6 @@ ...@@ -215,14 +252,6 @@
// A hash of attributes whose current and previous value differ. // A hash of attributes whose current and previous value differ.
changed: null, changed: null,
// A hash of attributes that have silently changed since the last time
// `change` was called. Will become pending attributes on the next call.
_silent: null,
// A hash of attributes that have changed since the last `'change'` event
// began.
_pending: null,
// The default name for the JSON `id` attribute is `"id"`. MongoDB and // The default name for the JSON `id` attribute is `"id"`. MongoDB and
// CouchDB users may want to set this to `"_id"`. // CouchDB users may want to set this to `"_id"`.
idAttribute: 'id', idAttribute: 'id',
...@@ -236,6 +265,11 @@ ...@@ -236,6 +265,11 @@
return _.clone(this.attributes); return _.clone(this.attributes);
}, },
// Proxy `Backbone.sync` by default.
sync: function() {
return Backbone.sync.apply(this, arguments);
},
// Get the value of an attribute. // Get the value of an attribute.
get: function(attr) { get: function(attr) {
return this.attributes[attr]; return this.attributes[attr];
...@@ -243,10 +277,7 @@ ...@@ -243,10 +277,7 @@
// Get the HTML-escaped value of an attribute. // Get the HTML-escaped value of an attribute.
escape: function(attr) { escape: function(attr) {
var html; return _.escape(this.get(attr));
if (html = this._escapedAttributes[attr]) return html;
var val = this.get(attr);
return this._escapedAttributes[attr] = _.escape(val == null ? '' : '' + val);
}, },
// Returns `true` if the attribute contains a value that is not null // Returns `true` if the attribute contains a value that is not null
...@@ -255,146 +286,192 @@ ...@@ -255,146 +286,192 @@
return this.get(attr) != null; return this.get(attr) != null;
}, },
// ----------------------------------------------------------------------
// Set a hash of model attributes on the object, firing `"change"` unless // Set a hash of model attributes on the object, firing `"change"` unless
// you choose to silence it. // you choose to silence it.
set: function(key, value, options) { set: function(key, val, options) {
var attrs, attr, val; var attr, attrs, unset, changes, silent, changing, prev, current;
if (key == null) return this;
// Handle both `"key", value` and `{key: value}` -style arguments. // Handle both `"key", value` and `{key: value}` -style arguments.
if (_.isObject(key) || key == null) { if (typeof key === 'object') {
attrs = key; attrs = key;
options = value; options = val;
} else { } else {
attrs = {}; (attrs = {})[key] = val;
attrs[key] = value;
} }
// Extract attributes and options.
options || (options = {}); options || (options = {});
if (!attrs) return this;
if (attrs instanceof Model) attrs = attrs.attributes;
if (options.unset) for (attr in attrs) attrs[attr] = void 0;
// Run validation. // Run validation.
if (!this._validate(attrs, options)) return false; if (!this._validate(attrs, options)) return false;
// Extract attributes and options.
unset = options.unset;
silent = options.silent;
changes = [];
changing = this._changing;
this._changing = true;
if (!changing) {
this._previousAttributes = _.clone(this.attributes);
this.changed = {};
}
current = this.attributes, prev = this._previousAttributes;
// Check for changes of `id`. // Check for changes of `id`.
if (this.idAttribute in attrs) this.id = attrs[this.idAttribute]; if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
var changes = options.changes = {}; // For each `set` attribute, update or delete the current value.
var now = this.attributes;
var escaped = this._escapedAttributes;
var prev = this._previousAttributes || {};
// For each `set` attribute...
for (attr in attrs) { for (attr in attrs) {
val = attrs[attr]; val = attrs[attr];
if (!_.isEqual(current[attr], val)) changes.push(attr);
// If the new and current value differ, record the change. if (!_.isEqual(prev[attr], val)) {
if (!_.isEqual(now[attr], val) || (options.unset && _.has(now, attr))) {
delete escaped[attr];
(options.silent ? this._silent : changes)[attr] = true;
}
// Update or delete the current value.
options.unset ? delete now[attr] : now[attr] = val;
// If the new and previous value differ, record the change. If not,
// then remove changes for this attribute.
if (!_.isEqual(prev[attr], val) || (_.has(now, attr) != _.has(prev, attr))) {
this.changed[attr] = val; this.changed[attr] = val;
if (!options.silent) this._pending[attr] = true;
} else { } else {
delete this.changed[attr]; delete this.changed[attr];
delete this._pending[attr]; }
unset ? delete current[attr] : current[attr] = val;
}
// Trigger all relevant attribute changes.
if (!silent) {
if (changes.length) this._pending = true;
for (var i = 0, l = changes.length; i < l; i++) {
this.trigger('change:' + changes[i], this, current[changes[i]], options);
} }
} }
// Fire the `"change"` events. if (changing) return this;
if (!options.silent) this.change(options); if (!silent) {
while (this._pending) {
this._pending = false;
this.trigger('change', this, options);
}
}
this._pending = false;
this._changing = false;
return this; return this;
}, },
// Remove an attribute from the model, firing `"change"` unless you choose // Remove an attribute from the model, firing `"change"` unless you choose
// to silence it. `unset` is a noop if the attribute doesn't exist. // to silence it. `unset` is a noop if the attribute doesn't exist.
unset: function(attr, options) { unset: function(attr, options) {
(options || (options = {})).unset = true; return this.set(attr, void 0, _.extend({}, options, {unset: true}));
return this.set(attr, null, options);
}, },
// Clear all attributes on the model, firing `"change"` unless you choose // Clear all attributes on the model, firing `"change"` unless you choose
// to silence it. // to silence it.
clear: function(options) { clear: function(options) {
(options || (options = {})).unset = true; var attrs = {};
return this.set(_.clone(this.attributes), options); for (var key in this.attributes) attrs[key] = void 0;
return this.set(attrs, _.extend({}, options, {unset: true}));
},
// Determine if the model has changed since the last `"change"` event.
// If you specify an attribute name, determine if that attribute has changed.
hasChanged: function(attr) {
if (attr == null) return !_.isEmpty(this.changed);
return _.has(this.changed, attr);
},
// Return an object containing all the attributes that have changed, or
// false if there are no changed attributes. Useful for determining what
// parts of a view need to be updated and/or what attributes need to be
// persisted to the server. Unset attributes will be set to undefined.
// You can also pass an attributes object to diff against the model,
// determining if there *would be* a change.
changedAttributes: function(diff) {
if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
var val, changed = false;
var old = this._changing ? this._previousAttributes : this.attributes;
for (var attr in diff) {
if (_.isEqual(old[attr], (val = diff[attr]))) continue;
(changed || (changed = {}))[attr] = val;
}
return changed;
}, },
// Get the previous value of an attribute, recorded at the time the last
// `"change"` event was fired.
previous: function(attr) {
if (attr == null || !this._previousAttributes) return null;
return this._previousAttributes[attr];
},
// Get all of the attributes of the model at the time of the previous
// `"change"` event.
previousAttributes: function() {
return _.clone(this._previousAttributes);
},
// ---------------------------------------------------------------------
// Fetch the model from the server. If the server's representation of the // Fetch the model from the server. If the server's representation of the
// model differs from its current attributes, they will be overriden, // model differs from its current attributes, they will be overriden,
// triggering a `"change"` event. // triggering a `"change"` event.
fetch: function(options) { fetch: function(options) {
options = options ? _.clone(options) : {}; options = options ? _.clone(options) : {};
var model = this; if (options.parse === void 0) options.parse = true;
var success = options.success; var success = options.success;
options.success = function(resp, status, xhr) { options.success = function(model, resp, options) {
if (!model.set(model.parse(resp, xhr), options)) return false; if (!model.set(model.parse(resp, options), options)) return false;
if (success) success(model, resp); if (success) success(model, resp, options);
}; };
options.error = Backbone.wrapError(options.error, model, options); return this.sync('read', this, options);
return (this.sync || Backbone.sync).call(this, 'read', this, options);
}, },
// Set a hash of model attributes, and sync the model to the server. // Set a hash of model attributes, and sync the model to the server.
// If the server returns an attributes hash that differs, the model's // If the server returns an attributes hash that differs, the model's
// state will be `set` again. // state will be `set` again.
save: function(key, value, options) { save: function(key, val, options) {
var attrs, current; var attrs, success, method, xhr, attributes = this.attributes;
// Handle both `("key", value)` and `({key: value})` -style calls. // Handle both `"key", value` and `{key: value}` -style arguments.
if (_.isObject(key) || key == null) { if (key == null || typeof key === 'object') {
attrs = key; attrs = key;
options = value; options = val;
} else { } else {
attrs = {}; (attrs = {})[key] = val;
attrs[key] = value;
} }
options = options ? _.clone(options) : {};
// If we're "wait"-ing to set changed attributes, validate early. // If we're not waiting and attributes exist, save acts as `set(attr).save(null, opts)`.
if (options.wait) { if (attrs && (!options || !options.wait) && !this.set(attrs, options)) return false;
if (!this._validate(attrs, options)) return false;
current = _.clone(this.attributes);
}
// Regular saves `set` attributes before persisting to the server. options = _.extend({validate: true}, options);
var silentOptions = _.extend({}, options, {silent: true});
if (attrs && !this.set(attrs, options.wait ? silentOptions : options)) { // Do not persist invalid models.
return false; if (!this._validate(attrs, options)) return false;
// Set temporary attributes if `{wait: true}`.
if (attrs && options.wait) {
this.attributes = _.extend({}, attributes, attrs);
} }
// After a successful server-side save, the client is (optionally) // After a successful server-side save, the client is (optionally)
// updated with the server-side state. // updated with the server-side state.
var model = this; if (options.parse === void 0) options.parse = true;
var success = options.success; success = options.success;
options.success = function(resp, status, xhr) { options.success = function(model, resp, options) {
var serverAttrs = model.parse(resp, xhr); // Ensure attributes are restored during synchronous saves.
if (options.wait) { model.attributes = attributes;
delete options.wait; var serverAttrs = model.parse(resp, options);
serverAttrs = _.extend(attrs || {}, serverAttrs); if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
} if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
if (!model.set(serverAttrs, options)) return false; return false;
if (success) {
success(model, resp);
} else {
model.trigger('sync', model, resp, options);
} }
if (success) success(model, resp, options);
}; };
// Finish configuring and sending the Ajax request. // Finish configuring and sending the Ajax request.
options.error = Backbone.wrapError(options.error, model, options); method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
var method = this.isNew() ? 'create' : 'update'; if (method === 'patch') options.attrs = attrs;
var xhr = (this.sync || Backbone.sync).call(this, method, this, options); xhr = this.sync(method, this, options);
if (options.wait) this.set(current, silentOptions);
// Restore attributes.
if (attrs && options.wait) this.attributes = attributes;
return xhr; return xhr;
}, },
...@@ -406,27 +483,22 @@ ...@@ -406,27 +483,22 @@
var model = this; var model = this;
var success = options.success; var success = options.success;
var triggerDestroy = function() { var destroy = function() {
model.trigger('destroy', model, model.collection, options); model.trigger('destroy', model, model.collection, options);
}; };
options.success = function(model, resp, options) {
if (options.wait || model.isNew()) destroy();
if (success) success(model, resp, options);
};
if (this.isNew()) { if (this.isNew()) {
triggerDestroy(); options.success(this, null, options);
return false; return false;
} }
options.success = function(resp) { var xhr = this.sync('delete', this, options);
if (options.wait) triggerDestroy(); if (!options.wait) destroy();
if (success) {
success(model, resp);
} else {
model.trigger('sync', model, resp, options);
}
};
options.error = Backbone.wrapError(options.error, model, options);
var xhr = (this.sync || Backbone.sync).call(this, 'delete', this, options);
if (!options.wait) triggerDestroy();
return xhr; return xhr;
}, },
...@@ -434,14 +506,14 @@ ...@@ -434,14 +506,14 @@
// using Backbone's restful methods, override this to change the endpoint // using Backbone's restful methods, override this to change the endpoint
// that will be called. // that will be called.
url: function() { url: function() {
var base = getValue(this, 'urlRoot') || getValue(this.collection, 'url') || urlError(); var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError();
if (this.isNew()) return base; if (this.isNew()) return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + encodeURIComponent(this.id); return base + (base.charAt(base.length - 1) === '/' ? '' : '/') + encodeURIComponent(this.id);
}, },
// **parse** converts a response into the hash of attributes to be `set` on // **parse** converts a response into the hash of attributes to be `set` on
// the model. The default implementation is just to pass the response along. // the model. The default implementation is just to pass the response along.
parse: function(resp, xhr) { parse: function(resp, options) {
return resp; return resp;
}, },
...@@ -455,96 +527,20 @@ ...@@ -455,96 +527,20 @@
return this.id == null; return this.id == null;
}, },
// Call this method to manually fire a `"change"` event for this model and // Check if the model is currently in a valid state.
// a `"change:attribute"` event for each changed attribute. isValid: function(options) {
// Calling this will cause all objects observing the model to update. return !this.validate || !this.validate(this.attributes, options);
change: function(options) {
options || (options = {});
var changing = this._changing;
this._changing = true;
// Silent changes become pending changes.
for (var attr in this._silent) this._pending[attr] = true;
// Silent changes are triggered.
var changes = _.extend({}, options.changes, this._silent);
this._silent = {};
for (var attr in changes) {
this.trigger('change:' + attr, this, this.get(attr), options);
}
if (changing) return this;
// Continue firing `"change"` events while there are pending changes.
while (!_.isEmpty(this._pending)) {
this._pending = {};
this.trigger('change', this, options);
// Pending and silent changes still remain.
for (var attr in this.changed) {
if (this._pending[attr] || this._silent[attr]) continue;
delete this.changed[attr];
}
this._previousAttributes = _.clone(this.attributes);
}
this._changing = false;
return this;
},
// Determine if the model has changed since the last `"change"` event.
// If you specify an attribute name, determine if that attribute has changed.
hasChanged: function(attr) {
if (!arguments.length) return !_.isEmpty(this.changed);
return _.has(this.changed, attr);
},
// Return an object containing all the attributes that have changed, or
// false if there are no changed attributes. Useful for determining what
// parts of a view need to be updated and/or what attributes need to be
// persisted to the server. Unset attributes will be set to undefined.
// You can also pass an attributes object to diff against the model,
// determining if there *would be* a change.
changedAttributes: function(diff) {
if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
var val, changed = false, old = this._previousAttributes;
for (var attr in diff) {
if (_.isEqual(old[attr], (val = diff[attr]))) continue;
(changed || (changed = {}))[attr] = val;
}
return changed;
},
// Get the previous value of an attribute, recorded at the time the last
// `"change"` event was fired.
previous: function(attr) {
if (!arguments.length || !this._previousAttributes) return null;
return this._previousAttributes[attr];
},
// Get all of the attributes of the model at the time of the previous
// `"change"` event.
previousAttributes: function() {
return _.clone(this._previousAttributes);
},
// Check if the model is currently in a valid state. It's only possible to
// get into an *invalid* state if you're using silent changes.
isValid: function() {
return !this.validate(this.attributes);
}, },
// Run validation against the next complete set of model attributes, // Run validation against the next complete set of model attributes,
// returning `true` if all is well. If a specific `error` callback has // returning `true` if all is well. Otherwise, fire a general
// been passed, call that instead of firing the general `"error"` event. // `"error"` event and call the error callback, if specified.
_validate: function(attrs, options) { _validate: function(attrs, options) {
if (options.silent || !this.validate) return true; if (!options.validate || !this.validate) return true;
attrs = _.extend({}, this.attributes, attrs); attrs = _.extend({}, this.attributes, attrs);
var error = this.validate(attrs, options); var error = this.validationError = this.validate(attrs, options) || null;
if (!error) return true; if (!error) return true;
if (options && options.error) { this.trigger('invalid', this, error, options || {});
options.error(this, error, options);
} else {
this.trigger('error', this, error, options);
}
return false; return false;
} }
...@@ -559,10 +555,11 @@ ...@@ -559,10 +555,11 @@
var Collection = Backbone.Collection = function(models, options) { var Collection = Backbone.Collection = function(models, options) {
options || (options = {}); options || (options = {});
if (options.model) this.model = options.model; if (options.model) this.model = options.model;
if (options.comparator) this.comparator = options.comparator; if (options.comparator !== void 0) this.comparator = options.comparator;
this.models = [];
this._reset(); this._reset();
this.initialize.apply(this, arguments); this.initialize.apply(this, arguments);
if (models) this.reset(models, {silent: true, parse: options.parse}); if (models) this.reset(models, _.extend({silent: true}, options));
}; };
// Define the Collection's inheritable methods. // Define the Collection's inheritable methods.
...@@ -582,68 +579,86 @@ ...@@ -582,68 +579,86 @@
return this.map(function(model){ return model.toJSON(options); }); return this.map(function(model){ return model.toJSON(options); });
}, },
// Add a model, or list of models to the set. Pass **silent** to avoid // Proxy `Backbone.sync` by default.
// firing the `add` event for every new model. sync: function() {
return Backbone.sync.apply(this, arguments);
},
// Add a model, or list of models to the set.
add: function(models, options) { add: function(models, options) {
var i, index, length, model, cid, id, cids = {}, ids = {}, dups = [];
options || (options = {});
models = _.isArray(models) ? models.slice() : [models]; models = _.isArray(models) ? models.slice() : [models];
options || (options = {});
// Begin by turning bare objects into model references, and preventing var i, l, model, attrs, existing, doSort, add, at, sort, sortAttr;
// invalid models or duplicate models from being added. add = [];
for (i = 0, length = models.length; i < length; i++) { at = options.at;
if (!(model = models[i] = this._prepareModel(models[i], options))) { sort = this.comparator && (at == null) && options.sort != false;
throw new Error("Can't add an invalid model to a collection"); sortAttr = _.isString(this.comparator) ? this.comparator : null;
// Turn bare objects into model references, and prevent invalid models
// from being added.
for (i = 0, l = models.length; i < l; i++) {
if (!(model = this._prepareModel(attrs = models[i], options))) {
this.trigger('invalid', this, attrs, options);
continue;
} }
cid = model.cid;
id = model.id; // If a duplicate is found, prevent it from being added and
if (cids[cid] || this._byCid[cid] || ((id != null) && (ids[id] || this._byId[id]))) { // optionally merge it into the existing model.
dups.push(i); if (existing = this.get(model)) {
if (options.merge) {
existing.set(attrs === model ? model.attributes : attrs, options);
if (sort && !doSort && existing.hasChanged(sortAttr)) doSort = true;
}
continue; continue;
} }
cids[cid] = ids[id] = model;
}
// Remove duplicates. // This is a new model, push it to the `add` list.
i = dups.length; add.push(model);
while (i--) {
models.splice(dups[i], 1);
}
// Listen to added models' events, and index models for lookup by // Listen to added models' events, and index models for lookup by
// `id` and by `cid`. // `id` and by `cid`.
for (i = 0, length = models.length; i < length; i++) { model.on('all', this._onModelEvent, this);
(model = models[i]).on('all', this._onModelEvent, this); this._byId[model.cid] = model;
this._byCid[model.cid] = model;
if (model.id != null) this._byId[model.id] = model; if (model.id != null) this._byId[model.id] = model;
} }
// Insert models into the collection, re-sorting if needed, and triggering // See if sorting is needed, update `length` and splice in new models.
// `add` events unless silenced. if (add.length) {
this.length += length; if (sort) doSort = true;
index = options.at != null ? options.at : this.models.length; this.length += add.length;
splice.apply(this.models, [index, 0].concat(models)); if (at != null) {
if (this.comparator) this.sort({silent: true}); splice.apply(this.models, [at, 0].concat(add));
} else {
push.apply(this.models, add);
}
}
// Silently sort the collection if appropriate.
if (doSort) this.sort({silent: true});
if (options.silent) return this; if (options.silent) return this;
for (i = 0, length = this.models.length; i < length; i++) {
if (!cids[(model = this.models[i]).cid]) continue; // Trigger `add` events.
options.index = i; for (i = 0, l = add.length; i < l; i++) {
model.trigger('add', model, this, options); (model = add[i]).trigger('add', model, this, options);
} }
// Trigger `sort` if the collection was sorted.
if (doSort) this.trigger('sort', this, options);
return this; return this;
}, },
// Remove a model, or a list of models from the set. Pass silent to avoid // Remove a model, or a list of models from the set.
// firing the `remove` event for every model removed.
remove: function(models, options) { remove: function(models, options) {
var i, l, index, model;
options || (options = {});
models = _.isArray(models) ? models.slice() : [models]; models = _.isArray(models) ? models.slice() : [models];
options || (options = {});
var i, l, index, model;
for (i = 0, l = models.length; i < l; i++) { for (i = 0, l = models.length; i < l; i++) {
model = this.getByCid(models[i]) || this.get(models[i]); model = this.get(models[i]);
if (!model) continue; if (!model) continue;
delete this._byId[model.id]; delete this._byId[model.id];
delete this._byCid[model.cid]; delete this._byId[model.cid];
index = this.indexOf(model); index = this.indexOf(model);
this.models.splice(index, 1); this.models.splice(index, 1);
this.length--; this.length--;
...@@ -659,7 +674,7 @@ ...@@ -659,7 +674,7 @@
// Add a model to the end of the collection. // Add a model to the end of the collection.
push: function(model, options) { push: function(model, options) {
model = this._prepareModel(model, options); model = this._prepareModel(model, options);
this.add(model, options); this.add(model, _.extend({at: this.length}, options));
return model; return model;
}, },
...@@ -684,15 +699,16 @@ ...@@ -684,15 +699,16 @@
return model; return model;
}, },
// Get a model from the set by id. // Slice out a sub-array of models from the collection.
get: function(id) { slice: function(begin, end) {
if (id == null) return void 0; return this.models.slice(begin, end);
return this._byId[id.id != null ? id.id : id];
}, },
// Get a model from the set by client id. // Get a model from the set by id.
getByCid: function(cid) { get: function(obj) {
return cid && this._byCid[cid.cid || cid]; if (obj == null) return void 0;
this._idAttr || (this._idAttr = this.model.prototype.idAttribute);
return this._byId[obj.id || obj.cid || obj[this._idAttr] || obj];
}, },
// Get the model at the given index. // Get the model at the given index.
...@@ -715,71 +731,106 @@ ...@@ -715,71 +731,106 @@
// normal circumstances, as the set will maintain sort order as each item // normal circumstances, as the set will maintain sort order as each item
// is added. // is added.
sort: function(options) { sort: function(options) {
if (!this.comparator) {
throw new Error('Cannot sort a set without a comparator');
}
options || (options = {}); options || (options = {});
if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
var boundComparator = _.bind(this.comparator, this); // Run sort based on type of `comparator`.
if (this.comparator.length == 1) { if (_.isString(this.comparator) || this.comparator.length === 1) {
this.models = this.sortBy(boundComparator); this.models = this.sortBy(this.comparator, this);
} else { } else {
this.models.sort(boundComparator); this.models.sort(_.bind(this.comparator, this));
} }
if (!options.silent) this.trigger('reset', this, options);
if (!options.silent) this.trigger('sort', this, options);
return this; return this;
}, },
// Pluck an attribute from each model in the collection. // Pluck an attribute from each model in the collection.
pluck: function(attr) { pluck: function(attr) {
return _.map(this.models, function(model){ return model.get(attr); }); return _.invoke(this.models, 'get', attr);
},
// Smartly update a collection with a change set of models, adding,
// removing, and merging as necessary.
update: function(models, options) {
options = _.extend({add: true, merge: true, remove: true}, options);
if (options.parse) models = this.parse(models, options);
var model, i, l, existing;
var add = [], remove = [], modelMap = {};
// Allow a single model (or no argument) to be passed.
if (!_.isArray(models)) models = models ? [models] : [];
// Proxy to `add` for this case, no need to iterate...
if (options.add && !options.remove) return this.add(models, options);
// Determine which models to add and merge, and which to remove.
for (i = 0, l = models.length; i < l; i++) {
model = models[i];
existing = this.get(model);
if (options.remove && existing) modelMap[existing.cid] = true;
if ((options.add && !existing) || (options.merge && existing)) {
add.push(model);
}
}
if (options.remove) {
for (i = 0, l = this.models.length; i < l; i++) {
model = this.models[i];
if (!modelMap[model.cid]) remove.push(model);
}
}
// Remove models (if applicable) before we add and merge the rest.
if (remove.length) this.remove(remove, options);
if (add.length) this.add(add, options);
return this;
}, },
// When you have more items than you want to add or remove individually, // When you have more items than you want to add or remove individually,
// you can reset the entire set with a new list of models, without firing // you can reset the entire set with a new list of models, without firing
// any `add` or `remove` events. Fires `reset` when finished. // any `add` or `remove` events. Fires `reset` when finished.
reset: function(models, options) { reset: function(models, options) {
models || (models = []);
options || (options = {}); options || (options = {});
if (options.parse) models = this.parse(models, options);
for (var i = 0, l = this.models.length; i < l; i++) { for (var i = 0, l = this.models.length; i < l; i++) {
this._removeReference(this.models[i]); this._removeReference(this.models[i]);
} }
options.previousModels = this.models.slice();
this._reset(); this._reset();
this.add(models, _.extend({silent: true}, options)); if (models) this.add(models, _.extend({silent: true}, options));
if (!options.silent) this.trigger('reset', this, options); if (!options.silent) this.trigger('reset', this, options);
return this; return this;
}, },
// Fetch the default set of models for this collection, resetting the // Fetch the default set of models for this collection, resetting the
// collection when they arrive. If `add: true` is passed, appends the // collection when they arrive. If `update: true` is passed, the response
// models to the collection instead of resetting. // data will be passed through the `update` method instead of `reset`.
fetch: function(options) { fetch: function(options) {
options = options ? _.clone(options) : {}; options = options ? _.clone(options) : {};
if (options.parse === undefined) options.parse = true; if (options.parse === void 0) options.parse = true;
var collection = this;
var success = options.success; var success = options.success;
options.success = function(resp, status, xhr) { options.success = function(collection, resp, options) {
collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); var method = options.update ? 'update' : 'reset';
if (success) success(collection, resp); collection[method](resp, options);
if (success) success(collection, resp, options);
}; };
options.error = Backbone.wrapError(options.error, collection, options); return this.sync('read', this, options);
return (this.sync || Backbone.sync).call(this, 'read', this, options);
}, },
// Create a new instance of a model in this collection. Add the model to the // Create a new instance of a model in this collection. Add the model to the
// collection immediately, unless `wait: true` is passed, in which case we // collection immediately, unless `wait: true` is passed, in which case we
// wait for the server to agree. // wait for the server to agree.
create: function(model, options) { create: function(model, options) {
var coll = this;
options = options ? _.clone(options) : {}; options = options ? _.clone(options) : {};
model = this._prepareModel(model, options); if (!(model = this._prepareModel(model, options))) return false;
if (!model) return false; if (!options.wait) this.add(model, options);
if (!options.wait) coll.add(model, options); var collection = this;
var success = options.success; var success = options.success;
options.success = function(nextModel, resp, xhr) { options.success = function(model, resp, options) {
if (options.wait) coll.add(nextModel, options); if (options.wait) collection.add(model, options);
if (success) { if (success) success(model, resp, options);
success(nextModel, resp);
} else {
nextModel.trigger('sync', model, resp, options);
}
}; };
model.save(null, options); model.save(null, options);
return model; return model;
...@@ -787,44 +838,38 @@ ...@@ -787,44 +838,38 @@
// **parse** converts a response into a list of models to be added to the // **parse** converts a response into a list of models to be added to the
// collection. The default implementation is just to pass it through. // collection. The default implementation is just to pass it through.
parse: function(resp, xhr) { parse: function(resp, options) {
return resp; return resp;
}, },
// Proxy to _'s chain. Can't be proxied the same way the rest of the // Create a new collection with an identical list of models as this one.
// underscore methods are proxied because it relies on the underscore clone: function() {
// constructor. return new this.constructor(this.models);
chain: function () {
return _(this.models).chain();
}, },
// Reset all internal state. Called when the collection is reset. // Reset all internal state. Called when the collection is reset.
_reset: function(options) { _reset: function() {
this.length = 0; this.length = 0;
this.models = []; this.models.length = 0;
this._byId = {}; this._byId = {};
this._byCid = {};
}, },
// Prepare a model or hash of attributes to be added to this collection. // Prepare a model or hash of attributes to be added to this collection.
_prepareModel: function(model, options) { _prepareModel: function(attrs, options) {
options || (options = {}); if (attrs instanceof Model) {
if (!(model instanceof Model)) { if (!attrs.collection) attrs.collection = this;
var attrs = model; return attrs;
options.collection = this;
model = new this.model(attrs, options);
if (!model._validate(model.attributes, options)) model = false;
} else if (!model.collection) {
model.collection = this;
} }
options || (options = {});
options.collection = this;
var model = new this.model(attrs, options);
if (!model._validate(attrs, options)) return false;
return model; return model;
}, },
// Internal method to remove a model's ties to a collection. // Internal method to remove a model's ties to a collection.
_removeReference: function(model) { _removeReference: function(model) {
if (this == model.collection) { if (this === model.collection) delete model.collection;
delete model.collection;
}
model.off('all', this._onModelEvent, this); model.off('all', this._onModelEvent, this);
}, },
...@@ -833,35 +878,57 @@ ...@@ -833,35 +878,57 @@
// events simply proxy through. "add" and "remove" events that originate // events simply proxy through. "add" and "remove" events that originate
// in other collections are ignored. // in other collections are ignored.
_onModelEvent: function(event, model, collection, options) { _onModelEvent: function(event, model, collection, options) {
if ((event == 'add' || event == 'remove') && collection != this) return; if ((event === 'add' || event === 'remove') && collection !== this) return;
if (event == 'destroy') { if (event === 'destroy') this.remove(model, options);
this.remove(model, options);
}
if (model && event === 'change:' + model.idAttribute) { if (model && event === 'change:' + model.idAttribute) {
delete this._byId[model.previous(model.idAttribute)]; delete this._byId[model.previous(model.idAttribute)];
this._byId[model.id] = model; if (model.id != null) this._byId[model.id] = model;
} }
this.trigger.apply(this, arguments); this.trigger.apply(this, arguments);
},
sortedIndex: function (model, value, context) {
value || (value = this.comparator);
var iterator = _.isFunction(value) ? value : function(model) {
return model.get(value);
};
return _.sortedIndex(this.models, model, iterator, context);
} }
}); });
// Underscore methods that we want to implement on the Collection. // Underscore methods that we want to implement on the Collection.
var methods = ['forEach', 'each', 'map', 'reduce', 'reduceRight', 'find', var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
'detect', 'filter', 'select', 'reject', 'every', 'all', 'some', 'any', 'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
'include', 'contains', 'invoke', 'max', 'min', 'sortBy', 'sortedIndex', 'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
'toArray', 'size', 'first', 'initial', 'rest', 'last', 'without', 'indexOf', 'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest',
'shuffle', 'lastIndexOf', 'isEmpty', 'groupBy']; 'tail', 'drop', 'last', 'without', 'indexOf', 'shuffle', 'lastIndexOf',
'isEmpty', 'chain'];
// Mix in each Underscore method as a proxy to `Collection#models`. // Mix in each Underscore method as a proxy to `Collection#models`.
_.each(methods, function(method) { _.each(methods, function(method) {
Collection.prototype[method] = function() { Collection.prototype[method] = function() {
return _[method].apply(_, [this.models].concat(_.toArray(arguments))); var args = slice.call(arguments);
args.unshift(this.models);
return _[method].apply(_, args);
};
});
// Underscore methods that take a property name as an argument.
var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
// Use attributes instead of properties.
_.each(attributeMethods, function(method) {
Collection.prototype[method] = function(value, context) {
var iterator = _.isFunction(value) ? value : function(model) {
return model.get(value);
};
return _[method](this.models, iterator, context);
}; };
}); });
// Backbone.Router // Backbone.Router
// ------------------- // ---------------
// Routers map faux-URLs to actions, and fire events when routes are // Routers map faux-URLs to actions, and fire events when routes are
// matched. Creating a new one sets its `routes` hash, if not set statically. // matched. Creating a new one sets its `routes` hash, if not set statically.
...@@ -874,9 +941,10 @@ ...@@ -874,9 +941,10 @@
// Cached regular expressions for matching named param parts and splatted // Cached regular expressions for matching named param parts and splatted
// parts of route strings. // parts of route strings.
var namedParam = /:\w+/g; var optionalParam = /\((.*?)\)/g;
var namedParam = /(\(\?)?:\w+/g;
var splatParam = /\*\w+/g; var splatParam = /\*\w+/g;
var escapeRegExp = /[-[\]{}()+?.,\\^$|#\s]/g; var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;
// Set up all inheritable **Backbone.Router** properties and methods. // Set up all inheritable **Backbone.Router** properties and methods.
_.extend(Router.prototype, Events, { _.extend(Router.prototype, Events, {
...@@ -892,13 +960,13 @@ ...@@ -892,13 +960,13 @@
// }); // });
// //
route: function(route, name, callback) { route: function(route, name, callback) {
Backbone.history || (Backbone.history = new History);
if (!_.isRegExp(route)) route = this._routeToRegExp(route); if (!_.isRegExp(route)) route = this._routeToRegExp(route);
if (!callback) callback = this[name]; if (!callback) callback = this[name];
Backbone.history.route(route, _.bind(function(fragment) { Backbone.history.route(route, _.bind(function(fragment) {
var args = this._extractParameters(route, fragment); var args = this._extractParameters(route, fragment);
callback && callback.apply(this, args); callback && callback.apply(this, args);
this.trigger.apply(this, ['route:' + name].concat(args)); this.trigger.apply(this, ['route:' + name].concat(args));
this.trigger('route', name, args);
Backbone.history.trigger('route', this, name, args); Backbone.history.trigger('route', this, name, args);
}, this)); }, this));
return this; return this;
...@@ -907,6 +975,7 @@ ...@@ -907,6 +975,7 @@
// Simple proxy to `Backbone.history` to save a fragment into the history. // Simple proxy to `Backbone.history` to save a fragment into the history.
navigate: function(fragment, options) { navigate: function(fragment, options) {
Backbone.history.navigate(fragment, options); Backbone.history.navigate(fragment, options);
return this;
}, },
// Bind all defined routes to `Backbone.history`. We have to reverse the // Bind all defined routes to `Backbone.history`. We have to reverse the
...@@ -914,12 +983,9 @@ ...@@ -914,12 +983,9 @@
// routes can be defined at the bottom of the route map. // routes can be defined at the bottom of the route map.
_bindRoutes: function() { _bindRoutes: function() {
if (!this.routes) return; if (!this.routes) return;
var routes = []; var route, routes = _.keys(this.routes);
for (var route in this.routes) { while ((route = routes.pop()) != null) {
routes.unshift([route, this.routes[route]]); this.route(route, this.routes[route]);
}
for (var i = 0, l = routes.length; i < l; i++) {
this.route(routes[i][0], routes[i][1], this[routes[i][1]]);
} }
}, },
...@@ -927,8 +993,11 @@ ...@@ -927,8 +993,11 @@
// against the current location hash. // against the current location hash.
_routeToRegExp: function(route) { _routeToRegExp: function(route) {
route = route.replace(escapeRegExp, '\\$&') route = route.replace(escapeRegExp, '\\$&')
.replace(namedParam, '([^\/]+)') .replace(optionalParam, '(?:$1)?')
.replace(splatParam, '(.*?)'); .replace(namedParam, function(match, optional){
return optional ? match : '([^\/]+)';
})
.replace(splatParam, '(.*?)');
return new RegExp('^' + route + '$'); return new RegExp('^' + route + '$');
}, },
...@@ -948,14 +1017,26 @@ ...@@ -948,14 +1017,26 @@
var History = Backbone.History = function() { var History = Backbone.History = function() {
this.handlers = []; this.handlers = [];
_.bindAll(this, 'checkUrl'); _.bindAll(this, 'checkUrl');
// Ensure that `History` can be used outside of the browser.
if (typeof window !== 'undefined') {
this.location = window.location;
this.history = window.history;
}
}; };
// Cached regex for cleaning leading hashes and slashes . // Cached regex for stripping a leading hash/slash and trailing space.
var routeStripper = /^[#\/]/; var routeStripper = /^[#\/]|\s+$/g;
// Cached regex for stripping leading and trailing slashes.
var rootStripper = /^\/+|\/+$/g;
// Cached regex for detecting MSIE. // Cached regex for detecting MSIE.
var isExplorer = /msie [\w.]+/; var isExplorer = /msie [\w.]+/;
// Cached regex for removing a trailing slash.
var trailingSlash = /\/$/;
// Has the history handling already been started? // Has the history handling already been started?
History.started = false; History.started = false;
...@@ -968,9 +1049,8 @@ ...@@ -968,9 +1049,8 @@
// Gets the true hash value. Cannot use location.hash directly due to bug // Gets the true hash value. Cannot use location.hash directly due to bug
// in Firefox where location.hash will always be decoded. // in Firefox where location.hash will always be decoded.
getHash: function(windowOverride) { getHash: function(window) {
var loc = windowOverride ? windowOverride.location : window.location; var match = (window || this).location.href.match(/#(.*)$/);
var match = loc.href.match(/#(.*)$/);
return match ? match[1] : ''; return match ? match[1] : '';
}, },
...@@ -978,15 +1058,14 @@ ...@@ -978,15 +1058,14 @@
// the hash, or the override. // the hash, or the override.
getFragment: function(fragment, forcePushState) { getFragment: function(fragment, forcePushState) {
if (fragment == null) { if (fragment == null) {
if (this._hasPushState || forcePushState) { if (this._hasPushState || !this._wantsHashChange || forcePushState) {
fragment = window.location.pathname; fragment = this.location.pathname;
var search = window.location.search; var root = this.root.replace(trailingSlash, '');
if (search) fragment += search; if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
} else { } else {
fragment = this.getHash(); fragment = this.getHash();
} }
} }
if (!fragment.indexOf(this.options.root)) fragment = fragment.substr(this.options.root.length);
return fragment.replace(routeStripper, ''); return fragment.replace(routeStripper, '');
}, },
...@@ -999,24 +1078,28 @@ ...@@ -999,24 +1078,28 @@
// Figure out the initial configuration. Do we need an iframe? // Figure out the initial configuration. Do we need an iframe?
// Is pushState desired ... is it available? // Is pushState desired ... is it available?
this.options = _.extend({}, {root: '/'}, this.options, options); this.options = _.extend({}, {root: '/'}, this.options, options);
this.root = this.options.root;
this._wantsHashChange = this.options.hashChange !== false; this._wantsHashChange = this.options.hashChange !== false;
this._wantsPushState = !!this.options.pushState; this._wantsPushState = !!this.options.pushState;
this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState); this._hasPushState = !!(this.options.pushState && this.history && this.history.pushState);
var fragment = this.getFragment(); var fragment = this.getFragment();
var docMode = document.documentMode; var docMode = document.documentMode;
var oldIE = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7)); var oldIE = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));
if (oldIE) { // Normalize root to always include a leading and trailing slash.
this.iframe = $('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow; this.root = ('/' + this.root + '/').replace(rootStripper, '/');
if (oldIE && this._wantsHashChange) {
this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
this.navigate(fragment); this.navigate(fragment);
} }
// Depending on whether we're using pushState or hashes, and whether // Depending on whether we're using pushState or hashes, and whether
// 'onhashchange' is supported, determine how we check the URL state. // 'onhashchange' is supported, determine how we check the URL state.
if (this._hasPushState) { if (this._hasPushState) {
$(window).bind('popstate', this.checkUrl); Backbone.$(window).on('popstate', this.checkUrl);
} else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) { } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
$(window).bind('hashchange', this.checkUrl); Backbone.$(window).on('hashchange', this.checkUrl);
} else if (this._wantsHashChange) { } else if (this._wantsHashChange) {
this._checkUrlInterval = setInterval(this.checkUrl, this.interval); this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
} }
...@@ -1024,33 +1107,31 @@ ...@@ -1024,33 +1107,31 @@
// Determine if we need to change the base url, for a pushState link // Determine if we need to change the base url, for a pushState link
// opened by a non-pushState browser. // opened by a non-pushState browser.
this.fragment = fragment; this.fragment = fragment;
var loc = window.location; var loc = this.location;
var atRoot = loc.pathname == this.options.root; var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;
// If we've started off with a route from a `pushState`-enabled browser, // If we've started off with a route from a `pushState`-enabled browser,
// but we're currently in a browser that doesn't support it... // but we're currently in a browser that doesn't support it...
if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) { if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
this.fragment = this.getFragment(null, true); this.fragment = this.getFragment(null, true);
window.location.replace(this.options.root + '#' + this.fragment); this.location.replace(this.root + this.location.search + '#' + this.fragment);
// Return immediately as browser will do redirect to new url // Return immediately as browser will do redirect to new url
return true; return true;
// Or if we've started out with a hash-based route, but we're currently // Or if we've started out with a hash-based route, but we're currently
// in a browser where it could be `pushState`-based instead... // in a browser where it could be `pushState`-based instead...
} else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) { } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
this.fragment = this.getHash().replace(routeStripper, ''); this.fragment = this.getHash().replace(routeStripper, '');
window.history.replaceState({}, document.title, loc.protocol + '//' + loc.host + this.options.root + this.fragment); this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
} }
if (!this.options.silent) { if (!this.options.silent) return this.loadUrl();
return this.loadUrl();
}
}, },
// Disable Backbone.history, perhaps temporarily. Not useful in a real app, // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers. // but possibly useful for unit testing Routers.
stop: function() { stop: function() {
$(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl); Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
clearInterval(this._checkUrlInterval); clearInterval(this._checkUrlInterval);
History.started = false; History.started = false;
}, },
...@@ -1065,8 +1146,10 @@ ...@@ -1065,8 +1146,10 @@
// calls `loadUrl`, normalizing across the hidden iframe. // calls `loadUrl`, normalizing across the hidden iframe.
checkUrl: function(e) { checkUrl: function(e) {
var current = this.getFragment(); var current = this.getFragment();
if (current == this.fragment && this.iframe) current = this.getFragment(this.getHash(this.iframe)); if (current === this.fragment && this.iframe) {
if (current == this.fragment) return false; current = this.getFragment(this.getHash(this.iframe));
}
if (current === this.fragment) return false;
if (this.iframe) this.navigate(current); if (this.iframe) this.navigate(current);
this.loadUrl() || this.loadUrl(this.getHash()); this.loadUrl() || this.loadUrl(this.getHash());
}, },
...@@ -1095,31 +1178,31 @@ ...@@ -1095,31 +1178,31 @@
navigate: function(fragment, options) { navigate: function(fragment, options) {
if (!History.started) return false; if (!History.started) return false;
if (!options || options === true) options = {trigger: options}; if (!options || options === true) options = {trigger: options};
var frag = (fragment || '').replace(routeStripper, ''); fragment = this.getFragment(fragment || '');
if (this.fragment == frag) return; if (this.fragment === fragment) return;
this.fragment = fragment;
var url = this.root + fragment;
// If pushState is available, we use it to set the fragment as a real URL. // If pushState is available, we use it to set the fragment as a real URL.
if (this._hasPushState) { if (this._hasPushState) {
if (frag.indexOf(this.options.root) != 0) frag = this.options.root + frag; this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);
this.fragment = frag;
window.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, frag);
// If hash changes haven't been explicitly disabled, update the hash // If hash changes haven't been explicitly disabled, update the hash
// fragment to store history. // fragment to store history.
} else if (this._wantsHashChange) { } else if (this._wantsHashChange) {
this.fragment = frag; this._updateHash(this.location, fragment, options.replace);
this._updateHash(window.location, frag, options.replace); if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
if (this.iframe && (frag != this.getFragment(this.getHash(this.iframe)))) { // Opening and closing the iframe tricks IE7 and earlier to push a
// Opening and closing the iframe tricks IE7 and earlier to push a history entry on hash-tag change. // history entry on hash-tag change. When replace is true, we don't
// When replace is true, we don't want this. // want this.
if(!options.replace) this.iframe.document.open().close(); if(!options.replace) this.iframe.document.open().close();
this._updateHash(this.iframe.location, frag, options.replace); this._updateHash(this.iframe.location, fragment, options.replace);
} }
// If you've told us that you explicitly don't want fallback hashchange- // If you've told us that you explicitly don't want fallback hashchange-
// based history, then `navigate` becomes a page refresh. // based history, then `navigate` becomes a page refresh.
} else { } else {
window.location.assign(this.options.root + fragment); return this.location.assign(url);
} }
if (options.trigger) this.loadUrl(fragment); if (options.trigger) this.loadUrl(fragment);
}, },
...@@ -1128,13 +1211,19 @@ ...@@ -1128,13 +1211,19 @@
// a new one to the browser history. // a new one to the browser history.
_updateHash: function(location, fragment, replace) { _updateHash: function(location, fragment, replace) {
if (replace) { if (replace) {
location.replace(location.toString().replace(/(javascript:|#).*$/, '') + '#' + fragment); var href = location.href.replace(/(javascript:|#).*$/, '');
location.replace(href + '#' + fragment);
} else { } else {
location.hash = fragment; // Some browsers require that `hash` contains a leading #.
location.hash = '#' + fragment;
} }
} }
}); });
// Create the default Backbone.history.
Backbone.history = new History;
// Backbone.View // Backbone.View
// ------------- // -------------
...@@ -1152,7 +1241,7 @@ ...@@ -1152,7 +1241,7 @@
var delegateEventSplitter = /^(\S+)\s*(.*)$/; var delegateEventSplitter = /^(\S+)\s*(.*)$/;
// List of view options to be merged as properties. // List of view options to be merged as properties.
var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName']; var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
// Set up all inheritable **Backbone.View** properties and methods. // Set up all inheritable **Backbone.View** properties and methods.
_.extend(View.prototype, Events, { _.extend(View.prototype, Events, {
...@@ -1177,30 +1266,19 @@ ...@@ -1177,30 +1266,19 @@
return this; return this;
}, },
// Remove this view from the DOM. Note that the view isn't present in the // Remove this view by taking the element out of the DOM, and removing any
// DOM by default, so calling this method may be a no-op. // applicable Backbone.Events listeners.
remove: function() { remove: function() {
this.$el.remove(); this.$el.remove();
this.stopListening();
return this; return this;
}, },
// For small amounts of DOM Elements, where a full-blown template isn't
// needed, use **make** to manufacture elements, one at a time.
//
// var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
//
make: function(tagName, attributes, content) {
var el = document.createElement(tagName);
if (attributes) $(el).attr(attributes);
if (content) $(el).html(content);
return el;
},
// Change the view's element (`this.el` property), including event // Change the view's element (`this.el` property), including event
// re-delegation. // re-delegation.
setElement: function(element, delegate) { setElement: function(element, delegate) {
if (this.$el) this.undelegateEvents(); if (this.$el) this.undelegateEvents();
this.$el = (element instanceof $) ? element : $(element); this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
this.el = this.$el[0]; this.el = this.$el[0];
if (delegate !== false) this.delegateEvents(); if (delegate !== false) this.delegateEvents();
return this; return this;
...@@ -1222,7 +1300,7 @@ ...@@ -1222,7 +1300,7 @@
// This only works for delegate-able events: not `focus`, `blur`, and // This only works for delegate-able events: not `focus`, `blur`, and
// not `change`, `submit`, and `reset` in Internet Explorer. // not `change`, `submit`, and `reset` in Internet Explorer.
delegateEvents: function(events) { delegateEvents: function(events) {
if (!(events || (events = getValue(this, 'events')))) return; if (!(events || (events = _.result(this, 'events')))) return;
this.undelegateEvents(); this.undelegateEvents();
for (var key in events) { for (var key in events) {
var method = events[key]; var method = events[key];
...@@ -1233,9 +1311,9 @@ ...@@ -1233,9 +1311,9 @@
method = _.bind(method, this); method = _.bind(method, this);
eventName += '.delegateEvents' + this.cid; eventName += '.delegateEvents' + this.cid;
if (selector === '') { if (selector === '') {
this.$el.bind(eventName, method); this.$el.on(eventName, method);
} else { } else {
this.$el.delegate(selector, eventName, method); this.$el.on(eventName, selector, method);
} }
} }
}, },
...@@ -1244,18 +1322,15 @@ ...@@ -1244,18 +1322,15 @@
// You usually don't need to use this, but may wish to if you have multiple // You usually don't need to use this, but may wish to if you have multiple
// Backbone views attached to the same DOM element. // Backbone views attached to the same DOM element.
undelegateEvents: function() { undelegateEvents: function() {
this.$el.unbind('.delegateEvents' + this.cid); this.$el.off('.delegateEvents' + this.cid);
}, },
// Performs the initial configuration of a View with a set of options. // Performs the initial configuration of a View with a set of options.
// Keys with special meaning *(model, collection, id, className)*, are // Keys with special meaning *(model, collection, id, className)*, are
// attached directly to the view. // attached directly to the view.
_configure: function(options) { _configure: function(options) {
if (this.options) options = _.extend({}, this.options, options); if (this.options) options = _.extend({}, _.result(this, 'options'), options);
for (var i = 0, l = viewOptions.length; i < l; i++) { _.extend(this, _.pick(options, viewOptions));
var attr = viewOptions[i];
if (options[attr]) this[attr] = options[attr];
}
this.options = options; this.options = options;
}, },
...@@ -1265,27 +1340,18 @@ ...@@ -1265,27 +1340,18 @@
// an element from the `id`, `className` and `tagName` properties. // an element from the `id`, `className` and `tagName` properties.
_ensureElement: function() { _ensureElement: function() {
if (!this.el) { if (!this.el) {
var attrs = getValue(this, 'attributes') || {}; var attrs = _.extend({}, _.result(this, 'attributes'));
if (this.id) attrs.id = this.id; if (this.id) attrs.id = _.result(this, 'id');
if (this.className) attrs['class'] = this.className; if (this.className) attrs['class'] = _.result(this, 'className');
this.setElement(this.make(this.tagName, attrs), false); var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
this.setElement($el, false);
} else { } else {
this.setElement(this.el, false); this.setElement(_.result(this, 'el'), false);
} }
} }
}); });
// The self-propagating extend function that Backbone classes use.
var extend = function (protoProps, classProps) {
var child = inherits(this, protoProps, classProps);
child.extend = this.extend;
return child;
};
// Set up inheritance for the model, collection, and view.
Model.extend = Collection.extend = Router.extend = View.extend = extend;
// Backbone.sync // Backbone.sync
// ------------- // -------------
...@@ -1293,6 +1359,7 @@ ...@@ -1293,6 +1359,7 @@
var methodMap = { var methodMap = {
'create': 'POST', 'create': 'POST',
'update': 'PUT', 'update': 'PUT',
'patch': 'PATCH',
'delete': 'DELETE', 'delete': 'DELETE',
'read': 'GET' 'read': 'GET'
}; };
...@@ -1316,112 +1383,112 @@ ...@@ -1316,112 +1383,112 @@
var type = methodMap[method]; var type = methodMap[method];
// Default options, unless specified. // Default options, unless specified.
options || (options = {}); _.defaults(options || (options = {}), {
emulateHTTP: Backbone.emulateHTTP,
emulateJSON: Backbone.emulateJSON
});
// Default JSON-request options. // Default JSON-request options.
var params = {type: type, dataType: 'json'}; var params = {type: type, dataType: 'json'};
// Ensure that we have a URL. // Ensure that we have a URL.
if (!options.url) { if (!options.url) {
params.url = getValue(model, 'url') || urlError(); params.url = _.result(model, 'url') || urlError();
} }
// Ensure that we have the appropriate request data. // Ensure that we have the appropriate request data.
if (!options.data && model && (method == 'create' || method == 'update')) { if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
params.contentType = 'application/json'; params.contentType = 'application/json';
params.data = JSON.stringify(model.toJSON()); params.data = JSON.stringify(options.attrs || model.toJSON(options));
} }
// For older servers, emulate JSON by encoding the request into an HTML-form. // For older servers, emulate JSON by encoding the request into an HTML-form.
if (Backbone.emulateJSON) { if (options.emulateJSON) {
params.contentType = 'application/x-www-form-urlencoded'; params.contentType = 'application/x-www-form-urlencoded';
params.data = params.data ? {model: params.data} : {}; params.data = params.data ? {model: params.data} : {};
} }
// For older servers, emulate HTTP by mimicking the HTTP method with `_method` // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
// And an `X-HTTP-Method-Override` header. // And an `X-HTTP-Method-Override` header.
if (Backbone.emulateHTTP) { if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
if (type === 'PUT' || type === 'DELETE') { params.type = 'POST';
if (Backbone.emulateJSON) params.data._method = type; if (options.emulateJSON) params.data._method = type;
params.type = 'POST'; var beforeSend = options.beforeSend;
params.beforeSend = function(xhr) { options.beforeSend = function(xhr) {
xhr.setRequestHeader('X-HTTP-Method-Override', type); xhr.setRequestHeader('X-HTTP-Method-Override', type);
}; if (beforeSend) return beforeSend.apply(this, arguments);
} };
} }
// Don't process data on a non-GET request. // Don't process data on a non-GET request.
if (params.type !== 'GET' && !Backbone.emulateJSON) { if (params.type !== 'GET' && !options.emulateJSON) {
params.processData = false; params.processData = false;
} }
var success = options.success;
options.success = function(resp) {
if (success) success(model, resp, options);
model.trigger('sync', model, resp, options);
};
var error = options.error;
options.error = function(xhr) {
if (error) error(model, xhr, options);
model.trigger('error', model, xhr, options);
};
// Make the request, allowing the user to override any Ajax options. // Make the request, allowing the user to override any Ajax options.
return $.ajax(_.extend(params, options)); var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
model.trigger('request', model, xhr, options);
return xhr;
}; };
// Wrap an optional error callback with a fallback error event. // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
Backbone.wrapError = function(onError, originalModel, options) { Backbone.ajax = function() {
return function(model, resp) { return Backbone.$.ajax.apply(Backbone.$, arguments);
resp = model === originalModel ? resp : model;
if (onError) {
onError(originalModel, resp, options);
} else {
originalModel.trigger('error', originalModel, resp, options);
}
};
}; };
// Helpers // Helpers
// ------- // -------
// Shared empty constructor function to aid in prototype-chain creation.
var ctor = function(){};
// Helper function to correctly set up the prototype chain, for subclasses. // Helper function to correctly set up the prototype chain, for subclasses.
// Similar to `goog.inherits`, but uses a hash of prototype properties and // Similar to `goog.inherits`, but uses a hash of prototype properties and
// class properties to be extended. // class properties to be extended.
var inherits = function(parent, protoProps, staticProps) { var extend = function(protoProps, staticProps) {
var parent = this;
var child; var child;
// The constructor function for the new subclass is either defined by you // The constructor function for the new subclass is either defined by you
// (the "constructor" property in your `extend` definition), or defaulted // (the "constructor" property in your `extend` definition), or defaulted
// by us to simply call the parent's constructor. // by us to simply call the parent's constructor.
if (protoProps && protoProps.hasOwnProperty('constructor')) { if (protoProps && _.has(protoProps, 'constructor')) {
child = protoProps.constructor; child = protoProps.constructor;
} else { } else {
child = function(){ parent.apply(this, arguments); }; child = function(){ return parent.apply(this, arguments); };
} }
// Inherit class (static) properties from parent. // Add static properties to the constructor function, if supplied.
_.extend(child, parent); _.extend(child, parent, staticProps);
// Set the prototype chain to inherit from `parent`, without calling // Set the prototype chain to inherit from `parent`, without calling
// `parent`'s constructor function. // `parent`'s constructor function.
ctor.prototype = parent.prototype; var Surrogate = function(){ this.constructor = child; };
child.prototype = new ctor(); Surrogate.prototype = parent.prototype;
child.prototype = new Surrogate;
// Add prototype properties (instance properties) to the subclass, // Add prototype properties (instance properties) to the subclass,
// if supplied. // if supplied.
if (protoProps) _.extend(child.prototype, protoProps); if (protoProps) _.extend(child.prototype, protoProps);
// Add static properties to the constructor function, if supplied. // Set a convenience property in case the parent's prototype is needed
if (staticProps) _.extend(child, staticProps); // later.
// Correctly set child's `prototype.constructor`.
child.prototype.constructor = child;
// Set a convenience property in case the parent's prototype is needed later.
child.__super__ = parent.prototype; child.__super__ = parent.prototype;
return child; return child;
}; };
// Helper function to get a value from a Backbone object as a property // Set up inheritance for the model, collection, router, view and history.
// or as a function. Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
var getValue = function(object, prop) {
if (!(object && object[prop])) return null;
return _.isFunction(object[prop]) ? object[prop]() : object[prop];
};
// Throw an error when a URL is needed, and none is supplied. // Throw an error when a URL is needed, and none is supplied.
var urlError = function() { var urlError = function() {
......
labs/architecture-examples/backbone_marionette/js/lib/backbone.localStorage.js 0 → 100644
View file @ 339af9f9
/**
* Backbone localStorage Adapter
* Version 1.1.0
*
* https://github.com/jeromegn/Backbone.localStorage
*/
(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["underscore", "backbone"], function (_, Backbone) {
// Use global variables if the locals are undefined.
return factory(_ || root._, Backbone || root.Backbone);
});
} else {
// RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags
factory(_, Backbone);
}
}(this, function (_, Backbone) {
// A simple module to replace `Backbone.sync` with *localStorage*-based
// persistence. Models are given GUIDS, and saved into a JSON object. Simple
// as that.
// Hold reference to Underscore.js and Backbone.js in the closure in order
// to make things work even if they are removed from the global namespace
// Generate four random hex digits.
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
// Generate a pseudo-GUID by concatenating random hexadecimal.
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
};
// Our Store is represented by a single JS object in *localStorage*. Create it
// with a meaningful name, like the name you'd give a table.
// window.Store is deprectated, use Backbone.LocalStorage instead
Backbone.LocalStorage = window.Store = function (name) {
this.name = name;
var store = this.localStorage().getItem(this.name);
this.records = (store && store.split(",")) || [];
};
_.extend(Backbone.LocalStorage.prototype, {
// Save the current state of the **Store** to *localStorage*.
save: function () {
this.localStorage().setItem(this.name, this.records.join(","));
},
// Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
// have an id of it's own.
create: function (model) {
if (!model.id) {
model.id = guid();
model.set(model.idAttribute, model.id);
}
this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
this.records.push(model.id.toString());
this.save();
return this.find(model);
},
// Update a model by replacing its copy in `this.data`.
update: function (model) {
this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
if (!_.include(this.records, model.id.toString()))
this.records.push(model.id.toString()); this.save();
return this.find(model);
},
// Retrieve a model from `this.data` by id.
find: function (model) {
return this.jsonData(this.localStorage().getItem(this.name + "-" + model.id));
},
// Return the array of all models currently in storage.
findAll: function () {
return _(this.records).chain()
.map(function (id) {
return this.jsonData(this.localStorage().getItem(this.name + "-" + id));
}, this)
.compact()
.value();
},
// Delete a model from `this.data`, returning it.
destroy: function (model) {
if (model.isNew())
return false
this.localStorage().removeItem(this.name + "-" + model.id);
this.records = _.reject(this.records, function (id) {
return id === model.id.toString();
});
this.save();
return model;
},
localStorage: function () {
return localStorage;
},
// fix for "illegal access" error on Android when JSON.parse is passed null
jsonData: function (data) {
return data && JSON.parse(data);
}
});
// localSync delegate to the model or collection's
// *localStorage* property, which should be an instance of `Store`.
// window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function (method, model, options) {
var store = model.localStorage || model.collection.localStorage;
var resp, errorMessage, syncDfd = $.Deferred && $.Deferred(); //If $ is having Deferred - use it.
try {
switch (method) {
case "read":
resp = model.id != undefined ? store.find(model) : store.findAll();
break;
case "create":
resp = store.create(model);
break;
case "update":
resp = store.update(model);
break;
case "delete":
resp = store.destroy(model);
break;
}
} catch (error) {
if (error.code === DOMException.QUOTA_EXCEEDED_ERR && window.localStorage.length === 0)
errorMessage = "Private browsing is unsupported";
else
errorMessage = error.message;
}
if (resp) {
model.trigger("sync", model, resp, options);
if (options && options.success)
if (Backbone.VERSION === "0.9.10") {
options.success(model, resp, options);
} else {
options.success(resp);
}
if (syncDfd)
syncDfd.resolve(resp);
} else {
errorMessage = errorMessage ? errorMessage
: "Record Not Found";
model.trigger("error", model, errorMessage, options);
if (options && options.error)
if (Backbone.VERSION === "0.9.10") {
options.error(model, errorMessage, options);
} else {
options.error(errorMessage);
}
if (syncDfd)
syncDfd.reject(errorMessage);
}
// add compatibility with $.ajax
// always execute callback for success and error
if (options && options.complete) options.complete(resp);
return syncDfd && syncDfd.promise();
};
Backbone.ajaxSync = Backbone.sync;
Backbone.getSyncMethod = function (model) {
if (model.localStorage || (model.collection && model.collection.localStorage)) {
return Backbone.localSync;
}
return Backbone.ajaxSync;
};
// Override 'Backbone.sync' to default to localSync,
// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
Backbone.sync = function (method, model, options) {
return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
};
return Backbone.LocalStorage;
}));
\ No newline at end of file
labs/architecture-examples/backbone_marionette/js/lib/backbone.marionette.js
View file @ 339af9f9
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7