Skip to content

Commit

Permalink
Backbone.js 0.5.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@jashkenas
jashkenas committed Jul 26, 2011
1 parent 49a16bd commit 9d2811a
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 83 deletions.
4 changes: 2 additions & 2 deletions backbone.js
View file
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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._;
Expand Down
90 changes: 45 additions & 45 deletions docs/backbone.html
View file

Large diffs are not rendered by default.

13 changes: 5 additions & 8 deletions docs/todos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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
Expand Down
13 changes: 5 additions & 8 deletions examples/todos/todos.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},

Expand All @@ -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);
},

Expand Down Expand Up @@ -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();
},
Expand Down
49 changes: 30 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -1746,10 +1751,6 @@ <h2 id="View">Backbone.View</h2>
"click .button.delete": "destroy"
},

initialize: function() {
_.bindAll(this, "render");
},

render: function() {
...
}
Expand Down Expand Up @@ -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);
}

});
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.