[Pkg-javascript-commits] [backbone] 21/21: Backbone.js 0.5.2
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 17:01:06 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to tag 0.5.2
in repository backbone.
commit 9d2811a639b3ddf1867e19a8b791a4b518202c11
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Tue Jul 26 13:31:51 2011 -0400
Backbone.js 0.5.2
---
backbone.js | 4 +--
docs/backbone.html | 90 ++++++++++++++++++++++++-------------------------
docs/todos.html | 13 +++----
examples/todos/todos.js | 13 +++----
index.html | 49 ++++++++++++++++-----------
package.json | 2 +-
6 files changed, 88 insertions(+), 83 deletions(-)
diff --git a/backbone.js b/backbone.js
index 7850315..62da3bd 100644
--- a/backbone.js
+++ b/backbone.js
@@ -1,4 +1,4 @@
-// Backbone.js 0.5.1
+// Backbone.js 0.5.2
// (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.2';
// Require Underscore, if we're on the server, and it's not already present.
var _ = root._;
diff --git a/docs/backbone.html b/docs/backbone.html
index 3ee0e99..103953d 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,7 +9,7 @@ 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>
@@ -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>
@@ -507,23 +507,23 @@ 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="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 +534,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 +554,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 +583,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>
@@ -613,7 +613,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 +622,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 +636,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 +663,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 +683,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 +715,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/todos.html b/docs/todos.html
index b36fda7..647a63b 100644
--- a/docs/todos.html
+++ b/docs/todos.html
@@ -36,8 +36,7 @@ GUID in the database. This generates the next order number for new items.</p>
<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
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">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">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="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>
@@ -48,7 +47,7 @@ we use <code>jQuery.text</code> to set the contents of the todo item.</p>
<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="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>
@@ -74,13 +73,11 @@ the App already present in the HTML.</p> </td> <td class
<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>
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
diff --git a/examples/todos/todos.js b/examples/todos/todos.js
index 47c7e37..d7935a5 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -102,8 +102,7 @@ $(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.bind('change', this.render, this);
this.model.view = this;
},
@@ -120,7 +119,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);
},
@@ -182,13 +181,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();
},
diff --git a/index.html b/index.html
index 90612bb..5598b51 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.2)</span>
</a>
<a class="toc_title" href="#Introduction">
@@ -359,11 +359,11 @@
<table>
<tr>
- <td><a href="backbone.js">Development Version (0.5.1)</a></td>
+ <td><a href="backbone.js">Development Version (0.5.2)</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.2)</a></td>
<td><i>4.6kb, Packed and Gzipped</i></td>
</tr>
</table>
@@ -443,13 +443,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
@@ -1746,10 +1751,6 @@ var DocumentRow = Backbone.View.extend({
"click .button.delete": "destroy"
},
- initialize: function() {
- _.bindAll(this, "render");
- },
-
render: function() {
...
}
@@ -2485,24 +2486,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);
}
});
@@ -2515,6 +2515,17 @@ Inbox.messages.add(newMessage);
<h2 id="changelog">Change Log</h2>
<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..089d30b 100644
--- a/package.json
+++ b/package.json
@@ -10,5 +10,5 @@
},
"lib" : ".",
"main" : "backbone.js",
- "version" : "0.5.1"
+ "version" : "0.5.2"
}
--
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