Skip to content

Commit

Permalink
Lots of edits -- running well under Node.js
Browse files Browse the repository at this point in the history
  • Loading branch information
jashkenas committed Oct 13, 2010
1 parent 317c99b commit a2b924c
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 35 deletions.
3 changes: 3 additions & 0 deletions README
Expand Up @@ -20,3 +20,6 @@ http://github.com/documentcloud/backbone/issues/


All contributors are listed here: All contributors are listed here:
http://github.com/documentcloud/backbone/contributors http://github.com/documentcloud/backbone/contributors

Special thanks to Robert Kieffer for the original philosophy behind Backbone.
http://github.com/broofa
4 changes: 4 additions & 0 deletions backbone.js
Expand Up @@ -17,6 +17,10 @@
// Export for both CommonJS and the Browser. // Export for both CommonJS and the Browser.
(typeof exports !== 'undefined' ? exports : this).Backbone = Backbone; (typeof exports !== 'undefined' ? exports : this).Backbone = Backbone;


// Require Underscore, if we're on the server.
var _ = this._;
if (!_ && (typeof require !== 'undefined')) _ = require("underscore")._;

// Helper function to correctly set up the prototype chain, for subclasses. // Helper function to correctly set up the prototype chain, for subclasses.
// Similar to `goog.inherits`, but uses a hash of prototype properties and // Similar to `goog.inherits`, but uses a hash of prototype properties and
// static properties to be extended. // static properties to be extended.
Expand Down
70 changes: 35 additions & 35 deletions index.html
Expand Up @@ -232,9 +232,7 @@
<p> <p>
<i> <i>
Backbone is an open-source component of Backbone is an open-source component of
<a href="http://documentcloud.org/">DocumentCloud</a>.<br /> <a href="http://documentcloud.org/">DocumentCloud</a>.
Special thanks to <a href="http://github.com/broofa">Robert Kieffer</a>
for inspiring the ideas behind this library.
</i> </i>
</p> </p>


Expand All @@ -246,7 +244,7 @@ <h2 id="downloads">
<table> <table>
<tr> <tr>
<td><a href="backbone.js">Development Version (0.1.0)</a></td> <td><a href="backbone.js">Development Version (0.1.0)</a></td>
<td><i>22kb, Uncompressed with Comments</i></td> <td><i>21kb, Uncompressed with Comments</i></td>
</tr> </tr>
<tr> <tr>
<td><a href="backbone-min.js">Production Version (0.1.0)</a></td> <td><a href="backbone-min.js">Production Version (0.1.0)</a></td>
Expand All @@ -267,8 +265,8 @@ <h2 id="downloads">
<h2 id="Introduction">Introduction</h2> <h2 id="Introduction">Introduction</h2>


<p> <p>
When working on a heavy-duty JavaScript application, one of the first things When working on a web application that involved a lot of JavaScript, one
you learn is to stop tying your data to the DOM. It's all of the first things you learn is to stop tying your data to the DOM. It's all
too easy to create JavaScript applications that end up as tangled piles of too easy to create JavaScript applications that end up as tangled piles of
jQuery selectors and callbacks, all trying frantically to keep data in jQuery selectors and callbacks, all trying frantically to keep data in
sync between the HTML UI, your JavaScript logic, and the database on your sync between the HTML UI, your JavaScript logic, and the database on your
Expand All @@ -281,7 +279,7 @@ <h2 id="Introduction">Introduction</h2>
<a href="#Model">Models</a>, which can be created, validated, destroyed, <a href="#Model">Models</a>, which can be created, validated, destroyed,
and saved to the server. Whenever a UI action causes an attribute of and saved to the server. Whenever a UI action causes an attribute of
a model to change, the model triggers a <i>"change"</i> event; all a model to change, the model triggers a <i>"change"</i> event; all
the <a href="#View">Views</a> that reference the model's data receive the the <a href="#View">Views</a> that display the model's data receive the
event, causing them to re-render. You don't have to write the glue event, causing them to re-render. You don't have to write the glue
code that looks into the DOM to find an element with a specific <i>id</i>, code that looks into the DOM to find an element with a specific <i>id</i>,
and update the HTML manually and update the HTML manually
Expand Down Expand Up @@ -353,8 +351,8 @@ <h2 id="Events">Backbone.Events</h2>
</p> </p>


<pre> <pre>
object.bind("all", function(eventName) { proxy.bind("all", function(eventName) {
proxy.trigger(eventName); object.trigger(eventName);
}); });
</pre> </pre>


Expand All @@ -379,7 +377,7 @@ <h2 id="Events">Backbone.Events</h2>
<b class="header">trigger</b><code>object.trigger(event, [*args])</code> <b class="header">trigger</b><code>object.trigger(event, [*args])</code>
<br /> <br />
Trigger all callbacks for the given <b>event</b>. All subsequent arguments to Trigger all callbacks for the given <b>event</b>. All subsequent arguments to
<b>trigger</b> will be passed along. <b>trigger</b> will be passed along to the event callbacks.
</p> </p>


<h2 id="Model">Backbone.Model</h2> <h2 id="Model">Backbone.Model</h2>
Expand All @@ -394,8 +392,8 @@ <h2 id="Model">Backbone.Model</h2>


<p> <p>
The following is a contrived example, but it demonstrates defining a model The following is a contrived example, but it demonstrates defining a model
with a custom method, setting an attribute, and firing an event when a with a custom method, setting an attribute, and firing an event keyed
specific property of the model changes. to changes in that specific attribute.
After running this code once, <tt>sidebar</tt> will be After running this code once, <tt>sidebar</tt> will be
available in your browser's console, so you can play around with it. available in your browser's console, so you can play around with it.
</p> </p>
Expand All @@ -420,11 +418,11 @@ <h2 id="Model">Backbone.Model</h2>
</pre> </pre>


<p id="Model-extend"> <p id="Model-extend">
<b class="header">extend</b><code>Backbone.Model.extend(properties, [staticProperties])</code> <b class="header">extend</b><code>Backbone.Model.extend(properties, [classProperties])</code>
<br /> <br />
To create a <b>Model</b> class of your own, you extend <b>Backbone.Model</b> To create a <b>Model</b> class of your own, you extend <b>Backbone.Model</b>
and provide instance <b>properties</b>, as well as optional properties to be attached and provide instance <b>properties</b>, as well as optional
directly to the constructor function. <b>classProperties</b> to be attached directly to the constructor function.
</p> </p>


<p> <p>
Expand Down Expand Up @@ -456,18 +454,17 @@ <h2 id="Model">Backbone.Model</h2>
<br /> <br />
Set a hash of attributes (one or many) on the model. If any of the attributes Set a hash of attributes (one or many) on the model. If any of the attributes
change the models state, a <tt>"change"</tt> event will be fired, unless change the models state, a <tt>"change"</tt> event will be fired, unless
<tt>silent</tt> is passed as an option. <tt>{silent: true}</tt> is passed as an option.
</p> </p>


<p> <p>
If the model has a <tt>validate</tt> method, it will be validated before If the model has a <a href="#Model-validate">validate</a> method,
the attributes are set, and no changes will occur if the validation fails. it will be validated before the attributes are set, and no changes will
occur if the validation fails.
</p> </p>


<pre> <pre>
note.set({title: "October 12", content: "Lorem Ipsum Dolor Sit Amet..."}); note.set({title: "October 12", content: "Lorem Ipsum Dolor Sit Amet..."});

note.set({title: "October 31"}, {silent: true});
</pre> </pre>


<p id="Model-unset"> <p id="Model-unset">
Expand Down Expand Up @@ -501,15 +498,15 @@ <h2 id="Model">Backbone.Model</h2>
<b class="header">attributes</b><code>model.attributes</code> <b class="header">attributes</b><code>model.attributes</code>
<br /> <br />
The <b>attributes</b> property is the internal hash containing the model's The <b>attributes</b> property is the internal hash containing the model's
state. Please use <tt>set</tt> to update the attributes instead of modifying state. Please use <a href="#Model-set">set</a> to update the attributes instead of modifying
them directly. If you'd like to retrieve and munge a copy of the model's them directly. If you'd like to retrieve and munge a copy of the model's
attributes, use <tt>toJSON</tt> instead. attributes, use <a href="#Model-toJSON">toJSON</a> instead.
</p> </p>


<p id="Model-toJSON"> <p id="Model-toJSON">
<b class="header">toJSON</b><code>model.toJSON</code> <b class="header">toJSON</b><code>model.toJSON</code>
<br /> <br />
Return a copy of the model's <b>attributes</b> for JSON stringification. Return a copy of the model's <a href="#Model-attributes">attributes</a> for JSON stringification.
This can be used for persistence, serialization, or for augmentation before This can be used for persistence, serialization, or for augmentation before
being handed off to a view. being handed off to a view.
</p> </p>
Expand All @@ -529,16 +526,18 @@ <h2 id="Model">Backbone.Model</h2>
<b class="header">save</b><code>model.save(attributes, [options])</code> <b class="header">save</b><code>model.save(attributes, [options])</code>
<br /> <br />
Save a model to your database (or alternative persistence layer), Save a model to your database (or alternative persistence layer),
by delegating to <tt>Backbone.sync</tt>. If the model has a <tt>validate</tt> by delegating to <a href="#Sync">Backbone.sync</a>. If the model has a <a href="#Model-validate">validate</a>
method, and validation fails, the model will not be saved. If the model method, and validation fails, the model will not be saved. If the model
<tt>isNew()</tt>, the save will be an HTTP <tt>POST</tt>, if the model already <a href="#Model-isNew">isNew</a>, the save will be a <tt>"create"</tt>
exists on the server, the save will be a <tt>PUT</tt>. Accepts (HTTP <tt>POST</tt>), if the model already
<tt>success</tt> and <tt>error</tt> callbacks in the options hash. exists on the server, the save will be an <tt>"update"</tt> (HTTP <tt>PUT</tt>). Accepts
<tt>success</tt> and <tt>error</tt> callbacks in the options hash, which
are passed <tt>(model, response)</tt> as arguments.
</p> </p>


<p> <p>
In the following example, notice how because the model has never been In the following example, notice how because the model has never been
saved previously, <tt>Backbone.sync</tt> receives a <tt>"create"</tt> request. saved previously, our overridden version of <tt>Backbone.sync</tt> receives a <tt>"create"</tt> request.
</p> </p>


<pre class="runnable"> <pre class="runnable">
Expand All @@ -558,7 +557,7 @@ <h2 id="Model">Backbone.Model</h2>
<b class="header">destroy</b><code>model.destroy([options])</code> <b class="header">destroy</b><code>model.destroy([options])</code>
<br /> <br />
Destroys the model on the server by delegating an HTTP <tt>DELETE</tt> Destroys the model on the server by delegating an HTTP <tt>DELETE</tt>
request to <tt>Backbone.sync</tt>. Accepts request to <a href="#Sync">Backbone.sync</a>. Accepts
<tt>success</tt> and <tt>error</tt> callbacks in the options hash. <tt>success</tt> and <tt>error</tt> callbacks in the options hash.
</p> </p>


Expand Down Expand Up @@ -616,14 +615,14 @@ <h2 id="Model">Backbone.Model</h2>


<p> <p>
A model with an id of <tt>101</tt>, stored in a A model with an id of <tt>101</tt>, stored in a
<b>Backbone.Collection</b> with a <tt>url</tt> of <tt>"/notes"</tt>, <a href="#Collection">Backbone.Collection</a> with a <tt>url</tt> of <tt>"/notes"</tt>,
would have this URL: <tt>"/notes/101"</tt> would have this URL: <tt>"/notes/101"</tt>
</p> </p>


<p id="Model-clone"> <p id="Model-clone">
<b class="header">clone</b><code>model.clone()</code> <b class="header">clone</b><code>model.clone()</code>
<br /> <br />
Create a new instance of a model with identical attributes. Returns a new instance of the model with identical attributes.
</p> </p>


<p id="Model-isNew"> <p id="Model-isNew">
Expand All @@ -636,9 +635,10 @@ <h2 id="Model">Backbone.Model</h2>
<p id="Model-change"> <p id="Model-change">
<b class="header">change</b><code>model.change()</code> <b class="header">change</b><code>model.change()</code>
<br /> <br />
If you've been passing <tt>{silent: true}</tt> to <tt>set</tt> in order to Manually trigger the <tt>"change"</tt> event.
aggregate rapid changes to a model, you'll want to fire the <tt>"change"</tt> If you've been passing <tt>{silent: true}</tt> to the <a href="#Model-set">set</a> function in order to
event when you're finished. Call <tt>model.change()</tt> to trigger it. aggregate rapid changes to a model, you'll want to call <tt>model.change()</tt>
when you're all finished.
</p> </p>


<p id="Model-hasChanged"> <p id="Model-hasChanged">
Expand Down Expand Up @@ -712,7 +712,7 @@ <h2 id="Collection">Backbone.Collection</h2>
</p> </p>


<p id="Collection-extend"> <p id="Collection-extend">
<b class="header">extend</b><code>Backbone.Collection.extend(properties, [staticProperties])</code> <b class="header">extend</b><code>Backbone.Collection.extend(properties, [classProperties])</code>
<br /> <br />
To create a <b>Collection</b> class of your own, extend <b>Backbone.Collection</b>, To create a <b>Collection</b> class of your own, extend <b>Backbone.Collection</b>,
providing instance <b>properties</b>, as well as optional properties to be attached providing instance <b>properties</b>, as well as optional properties to be attached
Expand Down

0 comments on commit a2b924c

Please sign in to comment.