[Pkg-javascript-commits] [backbone] 23/97: Imported Upstream version 0.5.3
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:55:56 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to branch master
in repository backbone.
commit 041c2b78a50af3fe0da8dcd19db50f064b57cc51
Author: Jonas Smedegaard <dr at jones.dk>
Date: Sat Aug 13 13:54:41 2011 +0200
Imported Upstream version 0.5.3
---
backbone.js | 41 ++++--
docs/backbone.html | 102 ++++++-------
docs/images/baroque.jpg | Bin 0 -> 85125 bytes
docs/images/blossom.png | Bin 0 -> 120101 bytes
docs/images/groupon.png | Bin 0 -> 241260 bytes
docs/images/hotel-tonight.png | Bin 0 -> 188145 bytes
docs/images/pandora.png | Bin 0 -> 130766 bytes
docs/images/seatgeek.png | Bin 0 -> 271958 bytes
docs/images/test-kitchen.png | Bin 0 -> 178632 bytes
docs/images/trajectory.png | Bin 0 -> 175451 bytes
docs/images/trapit.png | Bin 0 -> 274573 bytes
docs/todos.html | 74 +++++-----
examples/todos/todos.js | 25 +---
index.html | 329 +++++++++++++++++++++++++++++++++++++-----
package.json | 2 +-
test/collection.js | 9 +-
test/events.js | 16 ++
test/model.js | 2 +
test/view.js | 4 +-
19 files changed, 435 insertions(+), 169 deletions(-)
diff --git a/backbone.js b/backbone.js
index 18d4843..b2e4932 100644
--- a/backbone.js
+++ b/backbone.js
@@ -1,4 +1,4 @@
-// Backbone.js 0.5.1
+// Backbone.js 0.5.3
// (c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
// Backbone may be freely distributed under the MIT license.
// For all details and documentation:
@@ -25,7 +25,7 @@
}
// Current version of the library. Keep in sync with `package.json`.
- Backbone.VERSION = '0.5.1';
+ Backbone.VERSION = '0.5.3';
// Require Underscore, if we're on the server, and it's not already present.
var _ = root._;
@@ -41,7 +41,7 @@
return this;
};
- // Turn on `emulateHTTP` to use support legacy HTTP servers. Setting this option will
+ // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option will
// fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and set a
// `X-Http-Method-Override` header.
Backbone.emulateHTTP = false;
@@ -68,10 +68,10 @@
// Bind an event, specified by a string name, `ev`, to a `callback` function.
// Passing `"all"` will bind the callback to all events fired.
- bind : function(ev, callback) {
+ bind : function(ev, callback, context) {
var calls = this._callbacks || (this._callbacks = {});
var list = calls[ev] || (calls[ev] = []);
- list.push(callback);
+ list.push([callback, context]);
return this;
},
@@ -89,7 +89,7 @@
var list = calls[ev];
if (!list) return this;
for (var i = 0, l = list.length; i < l; i++) {
- if (callback === list[i]) {
+ if (list[i] && callback === list[i][0]) {
list[i] = null;
break;
}
@@ -114,7 +114,7 @@
list.splice(i, 1); i--; l--;
} else {
args = both ? Array.prototype.slice.call(arguments, 1) : arguments;
- callback.apply(this, args);
+ callback[0].apply(callback[1] || this, args);
}
}
}
@@ -133,7 +133,7 @@
var defaults;
attributes || (attributes = {});
if (defaults = this.defaults) {
- if (_.isFunction(defaults)) defaults = defaults();
+ if (_.isFunction(defaults)) defaults = defaults.call(this);
attributes = _.extend({}, defaults, attributes);
}
this.attributes = {};
@@ -582,7 +582,7 @@
options || (options = {});
model = this._prepareModel(model, options);
if (!model) return false;
- var already = this.getByCid(model) || this.get(model);
+ var already = this.getByCid(model);
if (already) throw new Error(["Can't add the same model to a set twice", already.id]);
this._byId[model.id] = model;
this._byCid[model.cid] = model;
@@ -641,7 +641,7 @@
var methods = ['forEach', 'each', 'map', 'reduce', 'reduceRight', 'find', 'detect',
'filter', 'select', 'reject', 'every', 'all', 'some', 'any', 'include',
'contains', 'invoke', 'max', 'min', 'sortBy', 'sortedIndex', 'toArray', 'size',
- 'first', 'rest', 'last', 'without', 'indexOf', 'lastIndexOf', 'isEmpty'];
+ 'first', 'rest', 'last', 'without', 'indexOf', 'lastIndexOf', 'isEmpty', 'groupBy'];
// Mix in each Underscore method as a proxy to `Collection#models`.
_.each(methods, function(method) {
@@ -766,7 +766,7 @@
fragment = window.location.hash;
}
}
- return fragment.replace(hashStrip, '');
+ return decodeURIComponent(fragment.replace(hashStrip, ''));
},
// Start the hash change handling, returning `true` if the current URL matches
@@ -806,11 +806,16 @@
if (this._wantsPushState && !this._hasPushState && !atRoot) {
this.fragment = this.getFragment(null, true);
window.location.replace(this.options.root + '#' + this.fragment);
+ // Return immediately as browser will do redirect to new url
+ return true;
} else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
this.fragment = loc.hash.replace(hashStrip, '');
window.history.replaceState({}, document.title, loc.protocol + '//' + loc.host + this.options.root + this.fragment);
}
- return this.loadUrl();
+
+ if (!this.options.silent) {
+ return this.loadUrl();
+ }
},
// Add a route to be tested when the fragment changes. Routes added later may
@@ -947,6 +952,7 @@
// not `change`, `submit`, and `reset` in Internet Explorer.
delegateEvents : function(events) {
if (!(events || (events = this.events))) return;
+ if (_.isFunction(events)) events = events.call(this);
$(this.el).unbind('.delegateEvents' + this.cid);
for (var key in events) {
var method = this[events[key]];
@@ -1035,8 +1041,7 @@
// Default JSON-request options.
var params = _.extend({
type: type,
- dataType: 'json',
- processData: false
+ dataType: 'json'
}, options);
// Ensure that we have a URL.
@@ -1053,7 +1058,6 @@
// For older servers, emulate JSON by encoding the request into an HTML-form.
if (Backbone.emulateJSON) {
params.contentType = 'application/x-www-form-urlencoded';
- params.processData = true;
params.data = params.data ? {model : params.data} : {};
}
@@ -1069,6 +1073,11 @@
}
}
+ // Don't process data on a non-GET request.
+ if (params.type !== 'GET' && !Backbone.emulateJSON) {
+ params.processData = false;
+ }
+
// Make the request.
return $.ajax(params);
};
@@ -1143,7 +1152,7 @@
// Helper function to escape a string for HTML rendering.
var escapeHTML = function(string) {
- return string.replace(/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
+ return string.replace(/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
};
}).call(this);
diff --git a/docs/backbone.html b/docs/backbone.html
index 3ee0e99..19a883a 100644
--- a/docs/backbone.html
+++ b/docs/backbone.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html> <html> <head> <title>backbone.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.js </h1> </th> <th class="code"> </th> </ [...]
+<!DOCTYPE html> <html> <head> <title>backbone.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.js </h1> </th> <th class="code"> </th> </ [...]
(c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
Backbone may be freely distributed under the MIT license.
For all details and documentation:
@@ -9,12 +9,12 @@ be attached to this. Exported for both CommonJS and the browser.</p>
<span class="nx">Backbone</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">Backbone</span> <span class="o">=</span> <span class="nx">root</span><span class="p">.</span><span class="nx">Backbone</span> <span class="o">=</span> <span class="p">{};</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Current version of the library. Keep in sync with <code>package.json</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</s [...]
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Current version of the library. Keep in sync with <code>package.json</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</s [...]
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span> <span class="o">&&</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">require</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">))</span> <span class="nx">_</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'underscore'</span><span class="p">).</span [...]
to its previous owner. Returns a reference to this Backbone object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">noConflict</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">root</span><span class="p">.</span><span class="nx">Backbone</span> <span class="o">=</span> <span class="nx">previousBackbone</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Turn on <code>emulateHTTP</code> to use support legacy HTTP servers. Setting this option will
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Turn on <code>emulateHTTP</code> to support legacy HTTP servers. Setting this option will
fake <code>"PUT"</code> and <code>"DELETE"</code> requests via the <code>_method</code> parameter and set a
<code>X-Http-Method-Override</code> header.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">emulateHTTP</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a [...]
<code>application/json</code> requests ... will encode the body as
@@ -28,10 +28,10 @@ _.extend(object, Backbone.Events);
object.bind('expand', function(){ alert('expanded'); });
object.trigger('expand');
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Events</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> [...]
-Passing <code>"all"</code> will bind the callback to all events fired.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">bind</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
+Passing <code>"all"</code> will bind the callback to all events fired.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">bind</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ev</span><span class="p">,</span> <span class="nx">callback</span><span class="p">,</span> <span class="nx">context</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">calls</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_callbacks</span> <span class="o">=</span> <span class="p">{});</span>
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nx">calls</span><span class="p">[</span><span class="nx">ev</span><span class="p">]</span> <span class="o">||</span> <span class="p">(</span><span class="nx">calls</span><span class="p">[</span><span class="nx">ev</span><span class="p">]</span> <span class="o">=</span> <span class="p">[]);</span>
- <span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">callback</span><span class="p">);</span>
+ <span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">callback</span><span class="p">,</span> <span class="nx">context</span><span class="p">]);</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Remove one or many callbacks. If <code>callback</code> is null, removes all
callbacks for the event. If <code>ev</code> is null, removes all bound callbacks
@@ -46,7 +46,7 @@ for all events.</p> </td> <td class="code">
<span class="kd">var</span> <span class="nx">list</span> <span class="o">=</span> <span class="nx">calls</span><span class="p">[</span><span class="nx">ev</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">list</span><span class="p">)</span> <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">l</span><span class="p">;</span> <span class="nx">i</span><span class="o" [...]
- <span class="k">if</span> <span class="p">(</span><span class="nx">callback</span> <span class="o">===</span> <span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">&&</span> <span class="nx">callback</span> <span class="o">===</span> <span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">][</span><span class="mi">0</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">list</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
@@ -68,7 +68,7 @@ Listening for <code>"all"</code> passes the true event name as the first argumen
<span class="nx">list</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span> <span class="nx">i</span><span class="o">--</span><span class="p">;</span> <span class="nx">l</span><span class="o">--</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">args</span> <span class="o">=</span> <span class="nx">both</span> <span class="o">?</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">1</span><span class="p">)</span> <span class="o">:</span> <span class="nx">argum [...]
- <span class="nx">callback</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
+ <span class="nx">callback</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">apply</span><span class="p">(</span><span class="nx">callback</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">||</span> <span class="k">this</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@@ -81,7 +81,7 @@ is automatically generated and assigned for you.</p> </td>
<span class="kd">var</span> <span class="nx">defaults</span><span class="p">;</span>
<span class="nx">attributes</span> <span class="o">||</span> <span class="p">(</span><span class="nx">attributes</span> <span class="o">=</span> <span class="p">{});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">defaults</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">defaults</span><span class="p">)</span> <span class="p">{</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">defaults</span><span class="p">))</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">();</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">defaults</span><span class="p">))</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="nx">attributes</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({},</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">attributes</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">attributes</span> <span class="o">=</span> <span class="p">{};</span>
@@ -365,7 +365,7 @@ Returns the model, or 'false' if validation on a new model fails.</p>
<span class="nx">options</span> <span class="o">||</span> <span class="p">(</span><span class="nx">options</span> <span class="o">=</span> <span class="p">{});</span>
<span class="nx">model</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_prepareModel</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">model</span><span class="p">)</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">already</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getByCid</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
+ <span class="kd">var</span> <span class="nx">already</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getByCid</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">already</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">([</span><span class="s2">"Can't add the same model to a set twice"</span><span class="p">,</span> <span class="nx">already</span><span class="p">.</span><span class="nx">id</span><span class="p">]);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_byId</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">model</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_byCid</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">cid</span><span class="p">]</span> <span class="o">=</span> <span class="nx">model</span><span class="p">;</span>
@@ -412,7 +412,7 @@ in other collections are ignored.</p> </td> <td class="c
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-77"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-77">¶</a> </div> <p>Underscore methods that we want to implement on the Collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span cla [...]
<span class="s1">'filter'</span><span class="p">,</span> <span class="s1">'select'</span><span class="p">,</span> <span class="s1">'reject'</span><span class="p">,</span> <span class="s1">'every'</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="s1">'some'</span><span class="p">,</span> <span class="s1">'any'</span><span class="p">,</span> <span class="s1">'include'</span>< [...]
<span class="s1">'contains'</span><span class="p">,</span> <span class="s1">'invoke'</span><span class="p">,</span> <span class="s1">'max'</span><span class="p">,</span> <span class="s1">'min'</span><span class="p">,</span> <span class="s1">'sortBy'</span><span class="p">,</span> <span class="s1">'sortedIndex'</span><span class="p">,</span> <span class="s1">'toArray'</span><span class="p">,</span> <span class="s1">'size' [...]
- <span class="s1">'first'</span><span class="p">,</span> <span class="s1">'rest'</span><span class="p">,</span> <span class="s1">'last'</span><span class="p">,</span> <span class="s1">'without'</span><span class="p">,</span> <span class="s1">'indexOf'</span><span class="p">,</span> <span class="s1">'lastIndexOf'</span><span class="p">,</span> <span class="s1">'isEmpty'</span><span class="p">];</span></pre></div> </td> [...]
+ <span class="s1">'first'</span><span class="p">,</span> <span class="s1">'rest'</span><span class="p">,</span> <span class="s1">'last'</span><span class="p">,</span> <span class="s1">'without'</span><span class="p">,</span> <span class="s1">'indexOf'</span><span class="p">,</span> <span class="s1">'lastIndexOf'</span><span class="p">,</span> <span class="s1">'isEmpty'</span><span class="p">,</span> <span class="s1">'groupBy& [...]
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">prototype</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_</span><span class="p">[</span><span class="nx">method</span><span class="p">].</span><span class="nx">apply</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx" [...]
<span class="p">};</span>
@@ -480,7 +480,7 @@ the hash, or the override.</p> </td> <td class="code">
<span class="nx">fragment</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
- <span class="k">return</span> <span class="nx">fragment</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">hashStrip</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
+ <span class="k">return</span> <span class="nb">decodeURIComponent</span><span class="p">(</span><span class="nx">fragment</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">hashStrip</span><span class="p">,</span> <span class="s1">''</span><span class="p">));</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-97"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-97">¶</a> </div> <p>Start the hash change handling, returning <code>true</code> if the current URL matches
an existing route, and <code>false</code> otherwise.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">start</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-98"> <td class="docs"> <div cla [...]
Is pushState desired ... is it available?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">historyStarted</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">"Backbone.history has already been started"</span><span class="p">);</span>
@@ -507,23 +507,26 @@ opened by a non-pushState browser.</p> </td> <td class="
<span class="kd">var</span> <span class="nx">atRoot</span> <span class="o">=</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">pathname</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">root</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_wantsPushState</span> <span class="o">&&</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_hasPushState</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">atRoot</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fragment</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFragment</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
- <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">root</span> <span class="o">+</span> <span class="s1">'#'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">fragment</span><span class="p" [...]
+ <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">root</span> <span class="o">+</span> <span class="s1">'#'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">fragment</span><span class="p" [...]
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_wantsPushState</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_hasPushState</span> <span class="o">&&</span> <span class="nx">atRoot</span> <span class="o">&&</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">ha [...]
<span class="k">this</span><span class="p">.</span><span class="nx">fragment</span> <span class="o">=</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">hashStrip</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">replaceState</span><span class="p">({},</span> <span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="nx">loc</span><span class="p">.</span><span class="nx">protocol</span> <span class="o">+</span> <span class="s1">'//'</span> <span class="o">+</span> <span class="nx">loc</span><sp [...]
<span class="p">}</span>
- <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadUrl</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-101"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-101">¶</a> </div> <p>Add a route to be tested when the fragment changes. Routes added later may
+
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="p">{</span>
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadUrl</span><span class="p">();</span>
+ <span class="p">}</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-102"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-102">¶</a> </div> <p>Add a route to be tested when the fragment changes. Routes added later may
override previous routes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">route</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">route</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handlers</span><span class="p">.</span><span class="nx">unshift</span><span class="p">({</span><span class="nx">route</span> <span class="o">:</span> <span class="nx">route</span><span class="p">,</span> <span class="nx">callback</span> <span class="o">:</span> <span class="nx">callback</span><span class="p">});</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-102"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-102">¶</a> </div> <p>Checks the current URL to see if it has changed, and if it has,
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-103"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-103">¶</a> </div> <p>Checks the current URL to see if it has changed, and if it has,
calls <code>loadUrl</code>, normalizing across the hidden iframe.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">checkUrl</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFragment</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">fragment</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">iframe</span><span class="p">)</span> <span class="nx">current</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFragment</span><span class [...]
<span class="k">if</span> <span class="p">(</span><span class="nx">current</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">fragment</span> <span class="o">||</span> <span class="nx">current</span> <span class="o">==</span> <span class="nb">decodeURIComponent</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fragment</span><span class="p">))</span> <span class="k">return</span> <span [...]
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">iframe</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">current</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">loadUrl</span><span class="p">()</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-103"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-103">¶</a> </div> <p>Attempt to load the current URL fragment. If a route succeeds with a
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-104"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-104">¶</a> </div> <p>Attempt to load the current URL fragment. If a route succeeds with a
match, returns <code>true</code>. If no defined routes matches the fragment,
returns <code>false</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">loadUrl</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fragmentOverride</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fragment</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fragment</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFragment</span><span class="p">(</span><span class="nx">fragmentOverride</span><span class="p">);</span>
@@ -534,7 +537,7 @@ returns <code>false</code>.</p> </td> <td class="code">
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">matched</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-104"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-104">¶</a> </div> <p>Save a fragment into the hash history. You are responsible for properly
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-105"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-105">¶</a> </div> <p>Save a fragment into the hash history. You are responsible for properly
URL-encoding the fragment in advance. This does not trigger
a <code>hashchange</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">navigate</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fragment</span><span class="p">,</span> <span class="nx">triggerRoute</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">frag</span> <span class="o">=</span> <span class="p">(</span><span class="nx">fragment</span> <span class="o">||</span> <span class="s1">''</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="nx">hashStrip</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
@@ -554,27 +557,27 @@ a <code>hashchange</code> event.</p> </td> <td class="co
<span class="k">if</span> <span class="p">(</span><span class="nx">triggerRoute</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadUrl</span><span class="p">(</span><span class="nx">fragment</span><span class="p">);</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-105"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-105">¶</a> </div> <h2>Backbone.View</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id=" [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-106"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-106">¶</a> </div> <h2>Backbone.View</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id=" [...]
if an existing element is not provided...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">cid</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">uniqueId</span><span class="p">(</span><span class="s1">'view'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_configure</span><span class="p">(</span><span class="nx">options</span> <span class="o">||</span> <span class="p">{});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_ensureElement</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">delegateEvents</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">initialize</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-107"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-107">¶</a> </div> <p>Element lookup, scoped to DOM elements within the current view.
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-108"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-108">¶</a> </div> <p>Element lookup, scoped to DOM elements within the current view.
This should be prefered to global lookups, if you're dealing with
a specific view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">selectorDelegate</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">selector</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-108"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-108">¶</a> </div> <p>Cached regex to split keys for <code>delegate</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">e [...]
-initialization logic.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){},</span></pre></div> </td> </tr> <tr id="section-114"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-114">¶</a> </div> [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-109"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-109">¶</a> </div> <p>Cached regex to split keys for <code>delegate</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">e [...]
+initialization logic.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(){},</span></pre></div> </td> </tr> <tr id="section-115"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-115">¶</a> </div> [...]
to populate its element (<code>this.el</code>), with the appropriate HTML. The
convention is for <strong>render</strong> to always return <code>this</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-115"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-115">¶</a> </div> <p>Remove this view from the DOM. Note that the view isn't present in the
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-116"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-116">¶</a> </div> <p>Remove this view from the DOM. Note that the view isn't present in the
DOM by default, so calling this method may be a no-op.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remove</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-116"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-116">¶</a> </div> <p>For small amounts of DOM Elements, where a full-blown template isn't
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-117"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-117">¶</a> </div> <p>For small amounts of DOM Elements, where a full-blown template isn't
needed, use <strong>make</strong> to manufacture elements, one at a time.</p>
<pre><code>var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
@@ -583,7 +586,7 @@ needed, use <strong>make</strong> to manufacture elements, one at a time.</p>
<span class="k">if</span> <span class="p">(</span><span class="nx">attributes</span><span class="p">)</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="nx">attributes</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">content</span><span class="p">)</span> <span class="nx">$</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">el</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-117"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-117">¶</a> </div> <p>Set callbacks, where <code>this.callbacks</code> is a hash of</p>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-118"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-118">¶</a> </div> <p>Set callbacks, where <code>this.callbacks</code> is a hash of</p>
<p><em>{"event selector": "callback"}</em></p>
@@ -599,6 +602,7 @@ Omitting the selector binds the event to <code>this.el</code>.
This only works for delegate-able events: not <code>focus</code>, <code>blur</code>, and
not <code>change</code>, <code>submit</code>, and <code>reset</code> in Internet Explorer.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">delegateEvents</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">events</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">events</span> <span class="o">||</span> <span class="p">(</span><span class="nx">events</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">events</span><span class="p">)))</span> <span class="k">return</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">events</span><span class="p">))</span> <span class="nx">events</span> <span class="o">=</span> <span class="nx">events</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">'.delegateEvents'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">cid</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">events</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">method</span> <span class="o">=</span> <span class="k">this</span><span class="p">[</span><span class="nx">events</span><span class="p">[</span><span class="nx">key</span><span class="p">]];</span>
@@ -613,7 +617,7 @@ not <code>change</code>, <code>submit</code>, and <code>reset</code> in Internet
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">delegate</span><span class="p">(</span><span class="nx">selector</span><span class="p">,</span> <span class="nx">eventName</span><span class="p">,</span> <span class="nx">method</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-118"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-118">¶</a> </div> <p>Performs the initial configuration of a View with a set of options.
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-119"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-119">¶</a> </div> <p>Performs the initial configuration of a View with a set of options.
Keys with special meaning <em>(model, collection, id, className)</em>, are
attached directly to the view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_configure</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">)</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({},</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
@@ -622,7 +626,7 @@ attached directly to the view.</p> </td> <td class="code
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">[</span><span class="nx">attr</span><span class="p">])</span> <span class="k">this</span><span class="p">[</span><span class="nx">attr</span><span class="p">]</span> <span class="o">=</span> <span class="nx">options</span><span class="p">[</span><span class="nx">attr</span><span class="p">];</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-119"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-119">¶</a> </div> <p>Ensure that the View has a DOM element to render into.
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-120"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-120">¶</a> </div> <p>Ensure that the View has a DOM element to render into.
If <code>this.el</code> is a string, pass it through <code>$()</code>, take the first
matching element, and re-assign it to <code>el</code>. Otherwise, create
an element from the <code>id</code>, <code>className</code> and <code>tagName</code> proeprties.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_ensureElement</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -636,17 +640,17 @@ an element from the <code>id</code>, <code>className</code> and <code>tagName</c
<span class="p">}</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-120"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-120">¶</a> </div> <p>The self-propagating extend function that Backbone classes use.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span c [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-121"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-121">¶</a> </div> <p>The self-propagating extend function that Backbone classes use.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span c [...]
<span class="kd">var</span> <span class="nx">child</span> <span class="o">=</span> <span class="nx">inherits</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">protoProps</span><span class="p">,</span> <span class="nx">classProps</span><span class="p">);</span>
<span class="nx">child</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">extend</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">child</span><span class="p">;</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-121"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-121">¶</a> </div> <p>Set up inheritance for the model, collection, and view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class= [...]
- <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-122"> [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-122"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-122">¶</a> </div> <p>Set up inheritance for the model, collection, and view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class= [...]
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-123"> [...]
<span class="s1">'create'</span><span class="o">:</span> <span class="s1">'POST'</span><span class="p">,</span>
<span class="s1">'update'</span><span class="o">:</span> <span class="s1">'PUT'</span><span class="p">,</span>
<span class="s1">'delete'</span><span class="o">:</span> <span class="s1">'DELETE'</span><span class="p">,</span>
<span class="s1">'read'</span> <span class="o">:</span> <span class="s1">'GET'</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-123"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-123">¶</a> </div> <h2>Backbone.sync</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="s [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-124"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-124">¶</a> </div> <h2>Backbone.sync</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="s [...]
models to the server. You will be passed the type of request, and the
model in question. By default, uses makes a RESTful Ajax request
to the model's <code>url()</code>. Some possible customizations could be:</p>
@@ -663,20 +667,18 @@ as well as all requests with the body as <code>application/x-www-form-urlencoded
<code>application/json</code> with the model in a param named <code>model</code>.
Useful when interfacing with server-side languages like <strong>PHP</strong> that make
it difficult to read the body of <code>PUT</code> requests.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span [...]
- <span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">methodMap</span><span class="p">[</span><span class="nx">method</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-125"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-125">¶</a> </div> <p>Default JSON-request opti [...]
+ <span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">methodMap</span><span class="p">[</span><span class="nx">method</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-126"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-126">¶</a> </div> <p>Default JSON-request opti [...]
<span class="nx">type</span><span class="o">:</span> <span class="nx">type</span><span class="p">,</span>
- <span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
- <span class="nx">processData</span><span class="o">:</span> <span class="kc">false</span>
- <span class="p">},</span> <span class="nx">options</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-126"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-126">¶</a> </div> <p>Ensure that we have a URL.</p> </td> <td class="code"> <div class="highlight"><pre> <span class= [...]
+ <span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span>
+ <span class="p">},</span> <span class="nx">options</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-127"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-127">¶</a> </div> <p>Ensure that we have a URL.</p> </td> <td class="code"> <div class="highlight"><pre> <span class= [...]
<span class="nx">params</span><span class="p">.</span><span class="nx">url</span> <span class="o">=</span> <span class="nx">getUrl</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="o">||</span> <span class="nx">urlError</span><span class="p">();</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-127"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-127">¶</a> </div> <p>Ensure that we have the appropriate request data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</sp [...]
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-128"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-128">¶</a> </div> <p>Ensure that we have the appropriate request data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</sp [...]
<span class="nx">params</span><span class="p">.</span><span class="nx">contentType</span> <span class="o">=</span> <span class="s1">'application/json'</span><span class="p">;</span>
<span class="nx">params</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-128"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-128">¶</a> </div> <p>For older servers, emulate JSON by encoding the request into an HTML-form.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</sp [...]
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-129"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-129">¶</a> </div> <p>For older servers, emulate JSON by encoding the request into an HTML-form.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</sp [...]
<span class="nx">params</span><span class="p">.</span><span class="nx">contentType</span> <span class="o">=</span> <span class="s1">'application/x-www-form-urlencoded'</span><span class="p">;</span>
- <span class="nx">params</span><span class="p">.</span><span class="nx">processData</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">params</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="nx">params</span><span class="p">.</span><span class="nx">data</span> <span class="o">?</span> <span class="p">{</span><span class="nx">model</span> <span class="o">:</span> <span class="nx">params</span><span class="p">.</span><span class="nx">data</span><span class="p">}</span> <span class="o">:</span> <span class="p">{};</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-129"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-129">¶</a> </div> <p>For older servers, emulate HTTP by mimicking the HTTP method with <code>_method</code>
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-130"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-130">¶</a> </div> <p>For older servers, emulate HTTP by mimicking the HTTP method with <code>_method</code>
And an <code>X-HTTP-Method-Override</code> header.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">Backbone</span><span class="p">.</span><span class="nx">emulateHTTP</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">'PUT'</span> <span class="o">||</span> <span class="nx">type</span> <span class="o">===</span> <span class="s1">'DELETE'</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">Backbone</span><span class="p">.</span><span class="nx">emulateJSON</span><span class="p">)</span> <span class="nx">params</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">_method</span> <span class="o">=</span> <span class="nx">type</span><span class="p">;</span>
@@ -685,29 +687,31 @@ And an <code>X-HTTP-Method-Override</code> header.</p> </td>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">setRequestHeader</span><span class="p">(</span><span class="s1">'X-HTTP-Method-Override'</span><span class="p">,</span> <span class="nx">type</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-130"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-130">¶</a> </div> <p>Make the request.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">$</span><span class="p">.</span> [...]
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-131"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-131">¶</a> </div> <h2>Helpers</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section [...]
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-131"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-131">¶</a> </div> <p>Don't process data on a non-GET request.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span [...]
+ <span class="nx">params</span><span class="p">.</span><span class="nx">processData</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-132"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-132">¶</a> </div> <p>Make the request.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">$</span><span class="p">.</span> [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-133"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-133">¶</a> </div> <h2>Helpers</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section [...]
Similar to <code>goog.inherits</code>, but uses a hash of prototype properties and
class properties to be extended.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">inherits</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">parent</span><span class="p">,</span> <span class="nx">protoProps</span><span class="p">,</span> <span class="nx">staticProps</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">child</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-134"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-134">¶</a> </div> <p>The constructor function for the new subclass is either defined by you
+ <span class="kd">var</span> <span class="nx">child</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-136"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-136">¶</a> </div> <p>The constructor function for the new subclass is either defined by you
(the "constructor" property in your <code>extend</code> definition), or defaulted
by us to simply call <code>super()</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">protoProps</span> <span class="o">&&</span> <span class="nx">protoProps</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">'constructor'</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">child</span> <span class="o">=</span> <span class="nx">protoProps</span><span class="p">.</span><span class="nx">constructor</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">child</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> <span class="k">return</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span> <span class="p">};</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-135"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-135">¶</a> </div> <p>Inherit class (static) properties from parent.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span>< [...]
+ <span class="p">}</span></pre></div> </td> </tr> <tr id="section-137"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-137">¶</a> </div> <p>Inherit class (static) properties from parent.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span>< [...]
<code>parent</code>'s constructor function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ctor</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">parent</span><span class="p">.</span><span class="nx">prototype</span><span class="p">;</span>
- <span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ctor</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-137"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-137">¶</a> </div> <p>Add prototype properties ( [...]
-if supplied.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">protoProps</span><span class="p">)</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="nx">protoProps</span><span class="p">);</span [...]
+ <span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">ctor</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-139"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-139">¶</a> </div> <p>Add prototype properties ( [...]
+if supplied.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">protoProps</span><span class="p">)</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">child</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="nx">protoProps</span><span class="p">);</span [...]
<span class="k">return</span> <span class="nx">child</span><span class="p">;</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-141"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-141">¶</a> </div> <p>Helper function to get a URL from a Model or Collection as a property
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-143"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-143">¶</a> </div> <p>Helper function to get a URL from a Model or Collection as a property
or as a function.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">getUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">object</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">object</span> <span class="o">&&</span> <span class="nx">object</span><span class="p">.</span><span class="nx">url</span><span class="p">))</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isFunction</span><span class="p">(</span><span class="nx">object</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> <span class="o">?</span> <span class="nx">object</span><span class="p">.</span><span class="nx">url</span><span class="p">()</span> <span class="o">:</span> <span class="nx">object</span><span class="p">.</span><span class="nx">url</span><span c [...]
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-142"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-142">¶</a> </div> <p>Throw an error when a URL is needed, and none is supplied.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class=" [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-144"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-144">¶</a> </div> <p>Throw an error when a URL is needed, and none is supplied.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class=" [...]
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'A "url" property or function must be specified'</span><span class="p">);</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-143"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-143">¶</a> </div> <p>Wrap an optional error callback with a fallback error event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-145"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-145">¶</a> </div> <p>Wrap an optional error callback with a fallback error event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class [...]
<span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">onError</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">onError</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">resp</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
@@ -715,8 +719,8 @@ or as a function.</p> </td> <td class="code">
<span class="nx">model</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'error'</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">resp</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-144"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-144">¶</a> </div> <p>Helper function to escape a string for HTML rendering.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx"> [...]
- <span class="k">return</span> <span class="nx">string</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi</span><span class="p">,</span> <span class="s1">'&'</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</g</span><span class="p">,</span> <span class="s1">'<'</span><span class="p">).</span><span class="nx">re [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-146"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-146">¶</a> </div> <p>Helper function to escape a string for HTML rendering.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx"> [...]
+ <span class="k">return</span> <span class="nx">string</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&(?!\w+;|#\d+;|#x[\da-f]+;)/gi</span><span class="p">,</span> <span class="s1">'&'</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/</g</span><span class="p">,</span> <span class="s1">'<'</span><span class="p">).</span><span class="nx">re [...]
<span class="p">};</span>
<span class="p">}).</span><span class="nx">call</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
diff --git a/docs/images/baroque.jpg b/docs/images/baroque.jpg
new file mode 100644
index 0000000..69318b9
Binary files /dev/null and b/docs/images/baroque.jpg differ
diff --git a/docs/images/blossom.png b/docs/images/blossom.png
new file mode 100644
index 0000000..709e4dd
Binary files /dev/null and b/docs/images/blossom.png differ
diff --git a/docs/images/groupon.png b/docs/images/groupon.png
new file mode 100644
index 0000000..c8c50a8
Binary files /dev/null and b/docs/images/groupon.png differ
diff --git a/docs/images/hotel-tonight.png b/docs/images/hotel-tonight.png
new file mode 100644
index 0000000..24d2f1c
Binary files /dev/null and b/docs/images/hotel-tonight.png differ
diff --git a/docs/images/pandora.png b/docs/images/pandora.png
new file mode 100644
index 0000000..ef577eb
Binary files /dev/null and b/docs/images/pandora.png differ
diff --git a/docs/images/seatgeek.png b/docs/images/seatgeek.png
new file mode 100644
index 0000000..ba0dd5e
Binary files /dev/null and b/docs/images/seatgeek.png differ
diff --git a/docs/images/test-kitchen.png b/docs/images/test-kitchen.png
new file mode 100644
index 0000000..11969ee
Binary files /dev/null and b/docs/images/test-kitchen.png differ
diff --git a/docs/images/trajectory.png b/docs/images/trajectory.png
new file mode 100644
index 0000000..939206d
Binary files /dev/null and b/docs/images/trajectory.png differ
diff --git a/docs/images/trapit.png b/docs/images/trapit.png
new file mode 100644
index 0000000..1530d3a
Binary files /dev/null and b/docs/images/trapit.png differ
diff --git a/docs/todos.html b/docs/todos.html
index b36fda7..f884d62 100644
--- a/docs/todos.html
+++ b/docs/todos.html
@@ -10,107 +10,101 @@ to persist Backbone models within your browser.</p> </td>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Toggle the <code>done</code> state of this todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggle</span><span class="o"> [...]
<span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">done</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"done"</span><span class="p">)});</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Remove this Todo from <em>localStorage</em> and delete its view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h2>Todo Collection</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
-server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">TodoList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-11"> [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>Todo Collection</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
+server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">TodoList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-10"> [...]
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span> <span class="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'done'</span><span class="p">);</span> <span class="p">});</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Filter down the list to only todo items that are still not finished.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remaining</s [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Filter down the list to only todo items that are still not finished.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remaining</s [...]
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">without</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">done</span><span class="p">());</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>We keep the Todos in sequential order, despite being saved by unordered
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>We keep the Todos in sequential order, despite being saved by unordered
GUID in the database. This generates the next order number for new items.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nextOrder</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">last</span><span class="p">().</span><span class="nx">get</span><span class="p">(</span><span class="s1">'order'</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Todos are sorted by their original insertion order.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">comparator</span><span class= [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Todos are sorted by their original insertion order.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">comparator</span><span class= [...]
<span class="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'order'</span><span class="p">);</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Create our global collection of <strong>Todos</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p" [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Create our global collection of <strong>Todos</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p" [...]
<span class="s2">"click .check"</span> <span class="o">:</span> <span class="s2">"toggleDone"</span><span class="p">,</span>
<span class="s2">"dblclick div.todo-content"</span> <span class="o">:</span> <span class="s2">"edit"</span><span class="p">,</span>
<span class="s2">"click span.todo-destroy"</span> <span class="o">:</span> <span class="s2">"clear"</span><span class="p">,</span>
<span class="s2">"keypress .todo-input"</span> <span class="o">:</span> <span class="s2">"updateOnEnter"</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>The TodoView listens for changes to its model, re-rendering. Since there's
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>The TodoView listens for changes to its model, re-rendering. Since there's
a one-to-one correspondence between a <strong>Todo</strong> and a <strong>TodoView</strong> in this
app, we set a direct reference on the model for convenience.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'close'</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">view</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Re-render the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <s [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">remove</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Re-render the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <s [...]
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setContent</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>To avoid XSS (not that it would be harmful in this particular app),
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>To avoid XSS (not that it would be harmful in this particular app),
we use <code>jQuery.text</code> to set the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setContent</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'content'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.todo-content'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.todo-input'</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'blur'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'blur'</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">,</span> <span class="k">this</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Toggle the <code>"done"</code> state of the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleDone</span><span class=" [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Toggle the <code>"done"</code> state of the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleDone</span><span class=" [...]
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toggle</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Switch this view into <code>"editing"</code> mode, displaying the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ed [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Switch this view into <code>"editing"</code> mode, displaying the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ed [...]
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Close the <code>"editing"</code> mode, saving changes to the todo.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">close</span><s [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Close the <code>"editing"</code> mode, saving changes to the todo.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">close</span><s [...]
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">()});</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>If you hit <code>enter</code>, we're through editing the item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">updateOnEnter</spa [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>If you hit <code>enter</code>, we're through editing the item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">updateOnEnter</spa [...]
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Remove this view from the DOM.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remove</span><span class="o">:</span> <span class= [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>Remove this view from the DOM.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remove</span><span class="o">:</span> <span class= [...]
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Remove the item, destroy the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span class="o">:</span> <span cl [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Remove the item, destroy the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span class="o">:</span> <span cl [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <h2>The Application</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id=" [...]
-the App already present in the HTML.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#todoapp"</span><span class="p">),</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <h2>The Application</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id=" [...]
+the App already present in the HTML.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#todoapp"</span><span class="p">),</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class [...]
<span class="s2">"keypress #new-todo"</span><span class="o">:</span> <span class="s2">"createOnEnter"</span><span class="p">,</span>
<span class="s2">"keyup #new-todo"</span><span class="o">:</span> <span class="s2">"showTooltip"</span><span class="p">,</span>
<span class="s2">"click .todo-clear a"</span><span class="o">:</span> <span class="s2">"clearCompleted"</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>At initialization we bind to the relevant events on the <code>Todos</code>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <p>At initialization we bind to the relevant events on the <code>Todos</code>
collection, when items are added or changed. Kick things off by
loading any preexisting todos that might be saved in <em>localStorage</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'addOne'</span><span class="p">,</span> <span class="s1">'addAll'</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
-
<span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#new-todo"</span><span class="p">);</span>
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">);</span>
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addAll</span><span class="p">);</span>
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addAll</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="nx">Todos</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> <p>Re-rendering the App just means refreshing the statistics -- the rest
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>Re-rendering the App just means refreshing the statistics -- the rest
of the app doesn't change.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'#todo-stats'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">statsTemplate</span><span class="p">({</span>
<span class="nx">total</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">done</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">().</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">remaining</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">remaining</span><span class="p">().</span><span class="nx">length</span>
<span class="p">}));</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>Add a single todo item to the list by creating a view for it, and
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> <p>Add a single todo item to the list by creating a view for it, and
appending its element to the <code><ul></code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addOne</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoView</span><span class="p">({</span><span class="nx">model</span><span class="o">:</span> <span class="nx">todo</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#todo-list"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <p>Add all items in the <strong>Todos</strong> collection at once.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addAll</span><spa [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>Add all items in the <strong>Todos</strong> collection at once.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addAll</span><spa [...]
<span class="nx">Todos</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>Generate the attributes for a new Todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">newAttributes</span><span class="o"> [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <p>Generate the attributes for a new Todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">newAttributes</span><span class="o"> [...]
<span class="k">return</span> <span class="p">{</span>
<span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(),</span>
<span class="nx">order</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">nextOrder</span><span class="p">(),</span>
<span class="nx">done</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">};</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>If you hit return in the main input field, create new <strong>Todo</strong> model,
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>If you hit return in the main input field, create new <strong>Todo</strong> model,
persisting it to <em>localStorage</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createOnEnter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">!=</span> <span class="mi">13</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="nx">Todos</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">newAttributes</span><span class="p">());</span>
<span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>Clear all done todo items, destroying their models.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clearCompleted</span><span cl [...]
- <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span> <span class="p">});</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>Clear all done todo items, destroying their models.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clearCompleted</span><span cl [...]
+ <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span> <span class="p">});</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</a> </div> <p>Lazily show the tooltip that tells you to press <code>enter</code> to save
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>Lazily show the tooltip that tells you to press <code>enter</code> to save
a new todo item, after one second.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showTooltip</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".ui-tooltip-top"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
@@ -121,7 +115,7 @@ a new todo item, after one second.</p> </td> <td class="
<span class="k">this</span><span class="p">.</span><span class="nx">tooltipTimeout</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">delay</span><span class="p">(</span><span class="nx">show</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">¶</a> </div> <p>Finally, we kick things off by creating the <strong>App</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</a> </div> <p>Finally, we kick things off by creating the <strong>App</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span [...]
<span class="p">});</span>
diff --git a/examples/todos/todos.js b/examples/todos/todos.js
index 47c7e37..4496a3f 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -28,12 +28,6 @@ $(function(){
// Toggle the `done` state of this todo item.
toggle: function() {
this.save({done: !this.get("done")});
- },
-
- // Remove this Todo from *localStorage* and delete its view.
- clear: function() {
- this.destroy();
- this.view.remove();
}
});
@@ -102,9 +96,8 @@ $(function(){
// a one-to-one correspondence between a **Todo** and a **TodoView** in this
// app, we set a direct reference on the model for convenience.
initialize: function() {
- _.bindAll(this, 'render', 'close');
- this.model.bind('change', this.render);
- this.model.view = this;
+ this.model.bind('change', this.render, this);
+ this.model.bind('destroy', this.remove, this);
},
// Re-render the contents of the todo item.
@@ -120,7 +113,7 @@ $(function(){
var content = this.model.get('content');
this.$('.todo-content').text(content);
this.input = this.$('.todo-input');
- this.input.bind('blur', this.close);
+ this.input.bind('blur', _.bind(this.close, this));
this.input.val(content);
},
@@ -153,7 +146,7 @@ $(function(){
// Remove the item, destroy the model.
clear: function() {
- this.model.clear();
+ this.model.destroy();
}
});
@@ -182,13 +175,11 @@ $(function(){
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize: function() {
- _.bindAll(this, 'addOne', 'addAll', 'render');
-
this.input = this.$("#new-todo");
- Todos.bind('add', this.addOne);
- Todos.bind('reset', this.addAll);
- Todos.bind('all', this.render);
+ Todos.bind('add', this.addOne, this);
+ Todos.bind('reset', this.addAll, this);
+ Todos.bind('all', this.render, this);
Todos.fetch();
},
@@ -234,7 +225,7 @@ $(function(){
// Clear all done todo items, destroying their models.
clearCompleted: function() {
- _.each(Todos.done(), function(todo){ todo.clear(); });
+ _.each(Todos.done(), function(todo){ todo.destroy(); });
return false;
},
diff --git a/index.html b/index.html
index ea11de3..b992f6b 100644
--- a/index.html
+++ b/index.html
@@ -149,7 +149,7 @@
<div id="sidebar" class="interface">
<a class="toc_title" href="#">
- Backbone.js <span class="version">(0.5.1)</span>
+ Backbone.js <span class="version">(0.5.3)</span>
</a>
<a class="toc_title" href="#Introduction">
@@ -207,7 +207,7 @@
<li>– <a href="#Collection-constructor">constructor / initialize</a></li>
<li>– <a href="#Collection-models">models</a></li>
<li>– <a href="#Collection-toJSON">toJSON</a></li>
- <li>– <a href="#Collection-Underscore-Methods"><b>Underscore Methods (25)</b></a></li>
+ <li>– <a href="#Collection-Underscore-Methods"><b>Underscore Methods (26)</b></a></li>
<li>– <a href="#Collection-add">add</a></li>
<li>– <a href="#Collection-remove">remove</a></li>
<li>– <a href="#Collection-get">get</a></li>
@@ -280,16 +280,25 @@
<li>– <a href="#examples-documentcloud">DocumentCloud</a></li>
<li>– <a href="#examples-basecamp">Basecamp Mobile</a></li>
<li>– <a href="#examples-flow">Flow</a></li>
+ <li>– <a href="#examples-groupon">Groupon Now!</a></li>
+ <li>– <a href="#examples-trajectory">Trajectory</a></li>
+ <li>– <a href="#examples-soundcloud">SoundCloud Mobile</a></li>
+ <li>– <a href="#examples-pandora">Pandora</a></li>
<li>– <a href="#examples-cloudapp">CloudApp</a></li>
- <li>– <a href="#examples-soundcloud">Mobile SoundCloud</a></li>
+ <li>– <a href="#examples-seatgeek">SeatGeek</a></li>
+ <li>– <a href="#examples-tpm">Talking Points Memo</a></li>
+ <li>– <a href="#examples-hotel-tonight">Hotel Tonight</a></li>
<li>– <a href="#examples-quoteroller">Quote Roller</a></li>
<li>– <a href="#examples-tilemill">TileMill</a></li>
<li>– <a href="#examples-menagerievet">Menagerie Whiteboard</a></li>
+ <li>- <a href="#examples-blossom">Blossom</a></li>
<li>- <a href="#examples-instagreat">Insta-great!</a></li>
<li>- <a href="#examples-decide">Decide</a></li>
<li>- <a href="#examples-bittorrent">BitTorrent</a></li>
+ <li>- <a href="#examples-trapit">Trapit</a></li>
<li>- <a href="#examples-fluxiom">Fluxiom</a></li>
<li>- <a href="#examples-chop">Chop</a></li>
+ <li>- <a href="#examples-test-kitchen">America’s Test Kitchen</a></li>
<li>- <a href="#examples-quietwrite">QuietWrite</a></li>
<li>- <a href="#examples-tzigla">Tzigla</a></li>
<li>- <a href="#examples-substance">Substance</a></li>
@@ -300,6 +309,7 @@
</a>
<ul class="toc_section">
<li>– <a href="#FAQ-events">Catalog of Events</a></li>
+ <li>– <a href="#FAQ-tim-toady">More Than One Way To Do It</a></li>
<li>– <a href="#FAQ-nested">Nested Models & Collections</a></li>
<li>– <a href="#FAQ-bootstrap">Loading Bootstrapped Models</a></li>
<li>– <a href="#FAQ-mvc">Traditional MVC</a></li>
@@ -356,11 +366,11 @@
<table>
<tr>
- <td><a href="backbone.js">Development Version (0.5.1)</a></td>
+ <td><a href="backbone.js">Development Version (0.5.3)</a></td>
<td><i>41kb, Full Source with Comments</i></td>
</tr>
<tr>
- <td><a href="backbone-min.js">Production Version (0.5.1)</a></td>
+ <td><a href="backbone-min.js">Production Version (0.5.3)</a></td>
<td><i>4.6kb, Packed and Gzipped</i></td>
</tr>
</table>
@@ -440,13 +450,18 @@ object.trigger("alert", "an event");
</pre>
<p id="Events-bind">
- <b class="header">bind</b><code>object.bind(event, callback)</code>
+ <b class="header">bind</b><code>object.bind(event, callback, [context])</code>
<br />
Bind a <b>callback</b> function to an object. The callback will be invoked
whenever the <b>event</b> (specified by an arbitrary string identifier) is fired.
If you have a large number of different events on a page, the convention is to use colons to
namespace them: <tt>"poll:start"</tt>, or <tt>"change:selection"</tt>
</p>
+
+ <p>
+ To supply a <b>context</b> value for <tt>this</tt> when the callback is invoked,
+ pass the optional third argument: <tt>model.bind('change', this.render, this)</tt>
+ </p>
<p>
Callbacks bound to the special
@@ -1098,9 +1113,9 @@ alert(JSON.stringify(collection));
</pre>
<p id="Collection-Underscore-Methods">
- <b class="header">Underscore Methods (25)</b>
+ <b class="header">Underscore Methods (26)</b>
<br />
- Backbone proxies to <b>Underscore.js</b> to provide 25 iteration functions
+ Backbone proxies to <b>Underscore.js</b> to provide 26 iteration functions
on <b>Backbone.Collection</b>. They aren't all documented here, but
you can take a look at the Underscore documentation for the full details…
</p>
@@ -1120,6 +1135,7 @@ alert(JSON.stringify(collection));
<li><a href="http://documentcloud.github.com/underscore/#max">max</a></li>
<li><a href="http://documentcloud.github.com/underscore/#min">min</a></li>
<li><a href="http://documentcloud.github.com/underscore/#sortBy">sortBy</a></li>
+ <li><a href="http://documentcloud.github.com/underscore/#groupBy">groupBy</a></li>
<li><a href="http://documentcloud.github.com/underscore/#sortedIndex">sortedIndex</a></li>
<li><a href="http://documentcloud.github.com/underscore/#toArray">toArray</a></li>
<li><a href="http://documentcloud.github.com/underscore/#size">size</a></li>
@@ -1604,11 +1620,18 @@ app.navigate("help/troubleshooting", true);
If your application is not being served from the root url <tt>/</tt> of your
domain, be sure to tell History where the root really is, as an option:
<tt>Backbone.history.start({pushState: true, root: "/public/search/"})</tt>
+ </p>
+
<p>
When called, if a route succeeds with a match for the current URL,
<tt>Backbone.history.start()</tt> returns <tt>true</tt>. If no defined
route matches the current URL, it returns <tt>false</tt>.
</p>
+
+ <p>
+ If the server has already rendered the entire page, and you don't want the
+ initial route to trigger when starting History, pass <tt>silent: true</tt>.
+ </p>
<pre>
$(function(){
@@ -1743,10 +1766,6 @@ var DocumentRow = Backbone.View.extend({
"click .button.delete": "destroy"
},
- initialize: function() {
- _.bindAll(this, "render");
- },
-
render: function() {
...
}
@@ -1911,6 +1930,12 @@ $("#make-demo").append(el);
hash, all of your DOM events will always already be connected, and you will
never have to call this function yourself.
</p>
+
+ <p>
+ The <tt>events</tt> property may also be defined as a function that returns
+ an <b>events</b> hash, to make it easier to programmatically define your
+ events, as well as inherit them from parent views.
+ </p>
<p>
Using <b>delegateEvents</b> provides a number of advantages over manually
@@ -2047,31 +2072,51 @@ var model = localBackbone.Model.extend(...);
</a>
</div>
- <h2 id="examples-cloudapp">CloudApp</h2>
+ <h2 id="examples-groupon">Groupon Now!</h2>
<p>
- <a href="http://getcloudapp.com">CloudApp</a> is simple file and link
- sharing for the Mac. Backbone.js powers the web tools
- which consume the <a href="http://developer.getcloudapp.com">documented API</a>
- to manage Drops. Data is either pulled manually or pushed by
- <a href="http://pusher.com">Pusher</a> and fed to
- <a href="http://github.com/janl/mustache.js">Mustache</a> templates for
- rendering. Check out the <a href="http://cloudapp.github.com/engine">annotated source code</a>
- to see the magic.
+ <a href="http://www.groupon.com/now">Groupon Now!</a> helps you find
+ local deals that you can buy and use right now. When first developing
+ the product, the team decided it would be AJAX heavy with smooth transitions
+ between sections instead of full refreshes, but still needed to be fully
+ linkable and shareable. Despite never having used Backbone before, the
+ learning curve was incredibly quick — a prototype was hacked out in an
+ afternoon, and the team was able to ship the product in two weeks.
+ Because the source is minimal and understandable, it was easy to
+ add several Backbone extensions for Groupon Now!: changing the router
+ to handle URLs with querystring parameters, and adding a simple
+ in-memory store for caching repeated requests for the same data.
</p>
<div style="text-align: center;">
- <a href="http://getcloudapp.com">
- <img src="docs/images/cloudapp.png" alt="CloudApp" class="example_image" />
+ <a href="http://www.groupon.com/now">
+ <img src="docs/images/groupon.png" alt="Groupon Now!" class="example_image" />
</a>
</div>
- <h2 id="examples-soundcloud">SoundCloud</h2>
+ <h2 id="examples-trajectory">Trajectory</h2>
+
+ <p>
+ <a href="https://www.apptrajectory.com/">Trajectory</a> is an agile
+ software planning tool used to discuss wireframes, record decisions made,
+ relate user stories and bugs to discussions, and track your progress and
+ plan the future. With Rails on the backend, Trajectory uses Backbone.js
+ heavily to provide a fluid story planning interface that even updates in
+ real-time based on the actions of other users.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://www.apptrajectory.com/">
+ <img src="docs/images/trajectory.png" alt="Trajectory" class="example_image" />
+ </a>
+ </div>
+
+ <h2 id="examples-soundcloud">SoundCloud Mobile</h2>
<p>
<a href="http://soundcloud.com">SoundCloud</a> is the leading sound sharing
platform on the internet, and Backbone.js provides the foundation for
- <a href="http://m.soundcloud.com">Mobile SoundCloud</a>. The project uses
+ <a href="http://m.soundcloud.com">SoundCloud Mobile</a>. The project uses
the public SoundCloud <a href="http://soundcloud.com/developers">API</a>
as a data source (channeled through a nginx proxy),
<a href="http://api.jquery.com/category/plugins/templates/">jQuery templates</a>
@@ -2093,6 +2138,94 @@ var model = localBackbone.Model.extend(...);
</a>
</div>
+ <h2 id="examples-pandora">Pandora</h2>
+
+ <p>
+ When <a href="http://www.pandora.com/newpandora">Pandora</a> redesigned
+ their site in HTML5, they chose Backbone.js to help
+ manage the user interface and interactions. For example, there's a model
+ that represents the "currently playing track", and multiple views that
+ automatically update when the current track changes. The station list is a
+ collection, so that when stations are added or changed, the UI stays up to date.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://www.pandora.com/newpandora">
+ <img src="docs/images/pandora.png" alt="Pandora" class="example_image" />
+ </a>
+ </div>
+
+ <h2 id="examples-cloudapp">CloudApp</h2>
+
+ <p>
+ <a href="http://getcloudapp.com">CloudApp</a> is simple file and link
+ sharing for the Mac. Backbone.js powers the web tools
+ which consume the <a href="http://developer.getcloudapp.com">documented API</a>
+ to manage Drops. Data is either pulled manually or pushed by
+ <a href="http://pusher.com">Pusher</a> and fed to
+ <a href="http://github.com/janl/mustache.js">Mustache</a> templates for
+ rendering. Check out the <a href="http://cloudapp.github.com/engine">annotated source code</a>
+ to see the magic.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://getcloudapp.com">
+ <img src="docs/images/cloudapp.png" alt="CloudApp" class="example_image" />
+ </a>
+ </div>
+
+ <h2 id="examples-seatgeek">SeatGeek</h2>
+
+ <p>
+ <a href="http://seatgeek.com">SeatGeek</a>'s stadium ticket maps were originally
+ developed with Prototype.js. Moving to Backbone.js and jQuery helped organize
+ a lot of the UI code, and the increased structure has made adding features
+ a lot easier. SeatGeek is also in the process of building a mobile
+ interface that will be Backbone.js from top to bottom.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://seatgeek.com">
+ <img src="docs/images/seatgeek.png" alt="SeatGeek" class="example_image" />
+ </a>
+ </div>
+
+ <h2 id="examples-tpm">Talking Points Memo: Baroque</h2>
+
+ <p>
+ <a href="http://labs.talkingpointsmemo.com/2011/08/the-baroque-era.php">Baroque</a>
+ is the editor currently powering the homepage of
+ <a href="http://talkingpointsmemo.com/">Talking Points Memo</a>.
+ With a Sinatra backend for publishing, Baroque uses Backbone.js to provide
+ real-time story and asset dropping, complex reordering actions and copy
+ editing, making web layout feel much more like print layout.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://labs.talkingpointsmemo.com/2011/08/the-baroque-era.php">
+ <img src="docs/images/baroque.jpg" alt="Baroque" class="example_image" />
+ </a>
+ </div>
+
+ <h2 id="examples-hotel-tonight">Hotel Tonight</h2>
+
+ <p>
+ <a href="http://www.hoteltonight.com/">Hotel Tonight</a> used Backbone.js,
+ <a href="http://coffeescript.org">CoffeeScript</a>,
+ <a href="http://documentcloud.github.com/jammit/">Jammit</a> and more to
+ create the
+ <a href="https://market.android.com/details?id=com.hoteltonight.android.prod">Android version</a>
+ of their app; a last-minute, mobile, hotel booking application. The app
+ leverages Backbone for the bulk of its architecture, with jQuery Mobile
+ coming in for visual presentation.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://www.hoteltonight.com">
+ <img src="docs/images/hotel-tonight.png" alt="Hotel Tonight" class="example_image" />
+ </a>
+ </div>
+
<h2 id="examples-quoteroller">Quote Roller</h2>
<p>
@@ -2152,6 +2285,22 @@ var model = localBackbone.Model.extend(...);
</a>
</div>
+ <h2 id="examples-blossom">Blossom</h2>
+
+ <p>
+ <a href="http://blossom.io">Blossom</a> is a lightweight project management
+ tool for lean teams. Backbone.js is heavily used in combination with
+ <a href="http://coffeescript.org">CoffeeScript</a> to provide a smooth
+ interaction experience. The RESTful backend is built
+ with <a href="http://flask.pocoo.org/">Flask</a> on Google App Engine.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://blossom.io">
+ <img src="docs/images/blossom.png" alt="Blossom" class="example_image" />
+ </a>
+ </div>
+
<h2 id="examples-instagreat">Insta-great!</h2>
<p>
@@ -2208,6 +2357,21 @@ var model = localBackbone.Model.extend(...);
</a>
</div>
+ <h2 id="examples-trapit">Trapit</h2>
+
+ <p>
+ <a href="http://trap.it">Trapit</a> brings the web to you, scouring
+ the web on your behalf, 24/7. The product, currently in private beta,
+ uses Backbone to organize the best, most relevant content into individual
+ "traps" on your favorite topics and interests.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://trap.it">
+ <img src="docs/images/trapit.png" alt="Trapit" class="example_image" />
+ </a>
+ </div>
+
<h2 id="examples-fluxiom">Fluxiom</h2>
<p>
@@ -2246,6 +2410,25 @@ var model = localBackbone.Model.extend(...);
</a>
</div>
+ <h2 id="examples-test-kitchen">America’s Test Kitchen</h2>
+
+ <p>
+ <a href="http://www.testkitchenschool.com/">America’s Test Kitchen</a>,
+ an online cooking school, uses Backbone.js to manage quizzes, polls,
+ kitchen assignments, recipe tutorials and a hybrid HTML5/Flash video player.
+ The whole Backbone codebase is about 5k SLOC, with Mustache.js for
+ templating, and Rails on the back end. <a href="http://wir35.com/">Max Lord</a>
+ writes: “Working with Backbone made this one of the most pleasurable
+ large scale client-side projects I have ever worked on, and I am definitely
+ planning on continuing to work with it.”
+ </p>
+
+ <div style="text-align: center;">
+ <a href="http://www.testkitchenschool.com/">
+ <img src="docs/images/test-kitchen.png" alt="America's Test Kitchen" class="example_image" />
+ </a>
+ </div>
+
<h2 id="examples-quietwrite">QuietWrite</h2>
<p>
@@ -2326,6 +2509,60 @@ var model = localBackbone.Model.extend(...);
<li><b>"route:[name]"</b> (router) — when one of a router's routes has matched. </li>
<li><b>"all"</b> — this special event fires for <i>any</i> triggered event, passing the event name as the first argument. </li>
</ul>
+
+ <p id="FAQ-tim-toady">
+ <b class="header">There's More Than One Way To Do It</b>
+ <br />
+ It's common for folks just getting started to treat the examples listed
+ on this page as some sort of gospel truth. In fact, Backbone.js is intended
+ to be fairly agnostic about many common patterns in client-side code.
+ For example...
+ </p>
+
+ <p>
+ <b>References between Models and Views</b> can be handled several ways.
+ Some people like to have direct pointers, where views correspond 1:1 with
+ models (<tt>model.view</tt> and <tt>view.model</tt>). Others prefer to have intermediate
+ "controller" objects that orchestrate the creation and organization of
+ views into a hierarchy. Others still prefer the evented approach, and always
+ fire events instead of calling methods directly. All of these styles work well.
+ </p>
+
+ <p>
+ <b>Batch operations</b> on Models are common, but often best handled differently
+ depending on your server-side setup. Some folks don't mind making individual
+ Ajax requests. Others create explicit resources for RESTful batch operations:
+ <tt>/notes/batch/destroy?ids=1,2,3,4</tt>. Others tunnel REST over JSON, with the
+ creation of "changeset" requests:
+ </p>
+
+<pre>
+ {
+ "create": [array of models to create]
+ "update": [array of models to update]
+ "destroy": [array of model ids to destroy]
+ }
+</pre>
+
+ <p>
+ <b>Feel free to define your own events.</b> <a href="#Events">Backbone.Events</a>
+ is designed so that you can mix it in to any JavaScript object or prototype.
+ Since you can use any string as an event, it's often handy to bind
+ and trigger your own custom events: <tt>model.bind("selected:true")</tt> or
+ <tt>model.bind("editing")</tt>
+ </p>
+
+ <p>
+ <b>Render the UI</b> as you see fit. Backbone is agnostic as to whether you
+ use <a href="http://documentcloud.github.com/underscore/#template">Underscore templates</a>,
+ <a href="https://github.com/janl/mustache.js">Mustache.js</a>, direct DOM
+ manipulation, server-side rendered snippets of HTML, or
+ <a href="http://jqueryui.com/">jQuery UI</a> in your <tt>render</tt> function.
+ Sometimes you'll create a view for each model ... sometimes you'll have a
+ view that renders thousands of models at once, in a tight loop. Both can be
+ appropriate in the same app, depending on the quantity of data involved,
+ and the complexity of the UI.
+ </p>
<p id="FAQ-nested">
<b class="header">Nested Models & Collections</b>
@@ -2434,24 +2671,23 @@ Inbox.messages.fetch();
you'll often find it useful to rely on
<a href="http://documentcloud.github.com/underscore/#bind">_.bind</a> and
<a href="http://documentcloud.github.com/underscore/#bindAll">_.bindAll</a>
- from Underscore.js. <tt>_.bind</tt> takes a function and an object to be
- used as <tt>this</tt>, any time the function is called in the future.
- <tt>_.bindAll</tt> takes an object and a list of method names: each method
- in the list will be bound to the object, so that its <tt>this</tt> may
- not change. For example, in a <a href="#View">View</a> that listens for
- changes to a collection...
+ from Underscore.js.
+ </p>
+
+ <p>
+ When binding callbacks to Backbone events, you can choose to pass an optional
+ third argument to specify the <tt>this</tt> that will be used when the
+ callback is later invoked:
</p>
<pre>
var MessageList = Backbone.View.extend({
initialize: function() {
- _.bindAll(this, "addMessage", "removeMessage", "render");
-
var messages = this.collection;
- messages.bind("reset", this.render);
- messages.bind("add", this.addMessage);
- messages.bind("remove", this.removeMessage);
+ messages.bind("reset", this.render, this);
+ messages.bind("add", this.addMessage, this);
+ messages.bind("remove", this.removeMessage, this);
}
});
@@ -2464,6 +2700,27 @@ Inbox.messages.add(newMessage);
<h2 id="changelog">Change Log</h2>
<p>
+ <b class="header">0.5.3</b> — <small><i>August 9, 2011</i></small><br />
+ A View's <tt>events</tt> property may now be defined as a function, as well
+ as an object literal, making it easier to programmatically define and inherit
+ events. <tt>groupBy</tt> is now proxied from Underscore as a method on Collections.
+ If the server has already rendered everything on page load, pass
+ <tt>Backbone.history.start({silent: true})</tt> to prevent the initial route
+ from triggering. Bugfix for pushState with encoded URLs.
+ </p>
+
+ <p>
+ <b class="header">0.5.2</b> — <small><i>July 26, 2011</i></small><br />
+ The <tt>bind</tt> function, can now take an optional third argument, to specify
+ the <tt>this</tt> of the callback function.
+ Multiple models with the same <tt>id</tt> are now allowed in a collection.
+ Fixed a bug where calling <tt>.fetch(jQueryOptions)</tt> could cause an
+ incorrect URL to be serialized.
+ Fixed a brief extra route fire before redirect, when degrading from
+ <tt>pushState</tt>.
+ </p>
+
+ <p>
<b class="header">0.5.1</b> — <small><i>July 5, 2011</i></small><br />
Cleanups from the 0.5.0 release, to wit: improved transparent upgrades from
hash-based URLs to pushState, and vice-versa. Fixed inconsistency with
diff --git a/package.json b/package.json
index 9a7bb6b..07526fa 100644
--- a/package.json
+++ b/package.json
@@ -10,5 +10,5 @@
},
"lib" : ".",
"main" : "backbone.js",
- "version" : "0.5.1"
+ "version" : "0.5.3"
}
diff --git a/test/collection.js b/test/collection.js
index 58daca2..df44914 100644
--- a/test/collection.js
+++ b/test/collection.js
@@ -97,16 +97,9 @@ $(document).ready(function() {
test("Collection: add model to collection twice", function() {
try {
- // same id, different cid
- col.add({id: a.id, label: a.label});
- ok(false, "duplicate; expected add to fail");
- } catch (e) {
- equals(e.message, "Can't add the same model to a set twice,3");
- }
- try {
// no id, same cid
var a2 = new Backbone.Model({label: a.label});
- a2.cid = a.cid
+ a2.cid = a.cid;
col.add(a2);
ok(false, "duplicate; expected add to fail");
} catch (e) {
diff --git a/test/events.js b/test/events.js
index 5418961..3b41310 100644
--- a/test/events.js
+++ b/test/events.js
@@ -66,5 +66,21 @@ $(document).ready(function() {
equals(obj.counterA, 1, 'counterA should have only been incremented once.');
equals(obj.counterB, 1, 'counterB should have only been incremented once.');
});
+
+ test("Events: bind a callback with a supplied context", function () {
+ expect(1);
+
+ var TestClass = function () { return this; }
+ TestClass.prototype.assertTrue = function () {
+ ok(true, '`this` was bound to the callback')
+ };
+
+ var obj = _.extend({},Backbone.Events);
+
+ obj.bind('event', function () { this.assertTrue(); }, (new TestClass));
+
+ obj.trigger('event');
+
+ });
});
\ No newline at end of file
diff --git a/test/model.js b/test/model.js
index 3bb8ffe..7ad0d71 100644
--- a/test/model.js
+++ b/test/model.js
@@ -175,8 +175,10 @@ $(document).ready(function() {
var model = new MongoModel({id: 'eye-dee', _id: 25, title: 'Model'});
equals(model.get('id'), 'eye-dee');
equals(model.id, 25);
+ equals(model.isNew(), false);
model.unset('_id');
equals(model.id, undefined);
+ equals(model.isNew(), true);
});
test("Model: set an empty string", function() {
diff --git a/test/view.js b/test/view.js
index 1d52d52..1f007c2 100644
--- a/test/view.js
+++ b/test/view.js
@@ -118,8 +118,8 @@ $(document).ready(function() {
var count = 0;
var ViewClass = Backbone.View.extend({
el: $('body'),
- events: {
- "fake$event.namespaced": "run"
+ events: function() {
+ return {"fake$event.namespaced": "run"};
},
run: function() {
count++;
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/backbone.git
More information about the Pkg-javascript-commits
mailing list