Permalink
Browse files

Backbone.js 0.5.2

  • Loading branch information...
1 parent 49a16bd commit 9d2811a639b3ddf1867e19a8b791a4b518202c11 @jashkenas jashkenas committed Jul 26, 2011
Showing with 88 additions and 83 deletions.
  1. +2 −2 backbone.js
  2. +45 −45 docs/backbone.html
  3. +5 −8 docs/todos.html
  4. +5 −8 examples/todos/todos.js
  5. +30 −19 index.html
  6. +1 −1 package.json
View
@@ -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._;
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -36,8 +36,7 @@
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</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">&#39;render&#39;</span><span class="p">,</span> <span class="s1">&#39;close&#39;</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">&#39;change&#39;</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">&#39;change&#39;</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">&#182;</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> <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">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 @@
<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">&#39;content&#39;</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">&#39;.todo-content&#39;</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">&#39;.todo-input&#39;</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">&#39;blur&#39;</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">&#39;blur&#39;</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">&#182;</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="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">model</span><span class="p">.</span><span class="nx">toggle</span><span class="p">();</span>
@@ -74,13 +73,11 @@
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</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">&#39;addOne&#39;</span><span class="p">,</span> <span class="s1">&#39;addAll&#39;</span><span class="p">,</span> <span class="s1">&#39;render&#39;</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">&quot;#new-todo&quot;</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">&#39;add&#39;</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">&#39;reset&#39;</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">&#39;all&#39;</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">&#39;add&#39;</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">&#39;reset&#39;</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">&#39;all&#39;</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">&#182;</a> </div> <p>Re-rendering the App just means refreshing the statistics -- the rest
View
@@ -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();
},
View
@@ -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 @@ <h2 id="downloads">
<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 @@ <h2 id="Events">Backbone.Events</h2>
</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 @@ <h2 id="View">Backbone.View</h2>
"click .button.delete": "destroy"
},
- initialize: function() {
- _.bindAll(this, "render");
- },
-
render: function() {
...
}
@@ -2485,24 +2486,23 @@ <h2 id="faq">F.A.Q.</h2>
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);
}
});
@@ -2514,6 +2514,17 @@ <h2 id="faq">F.A.Q.</h2>
<h2 id="changelog">Change Log</h2>
+ <p>
+ <b class="header">0.5.2</b> &mdash; <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> &mdash; <small><i>July 5, 2011</i></small><br />
Cleanups from the 0.5.0 release, to wit: improved transparent upgrades from
View
@@ -10,5 +10,5 @@
},
"lib" : ".",
"main" : "backbone.js",
- "version" : "0.5.1"
+ "version" : "0.5.2"
}

0 comments on commit 9d2811a

Please sign in to comment.