[Pkg-javascript-commits] [backbone] 76/101: tweaking intro -- rebuilding docco
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:58:30 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to tag 0.1.0
in repository backbone.
commit bb53858460d6bb976fe832dbcf2ac82175ec7f21
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Tue Oct 12 17:08:42 2010 -0400
tweaking intro -- rebuilding docco
---
backbone.js | 210 +++++++++++++++++++--------------------
docs/backbone.html | 282 ++++++++++++++++++++++++++---------------------------
index.html | 173 ++++++++++++++++----------------
3 files changed, 328 insertions(+), 337 deletions(-)
diff --git a/backbone.js b/backbone.js
index bbf296c..c2842a0 100644
--- a/backbone.js
+++ b/backbone.js
@@ -137,32 +137,6 @@
toJSON : toJSON,
attributes : toJSON,
- // Default URL for the model's representation on the server -- if you're
- // using Backbone's restful methods, override this to change the endpoint
- // that will be called.
- url : function() {
- var base = getUrl(this.collection);
- if (this.isNew()) return base;
- return base + '/' + this.id;
- },
-
- // String representation of the model. Override this to provide a nice way
- // to print models to the console.
- toString : function() {
- return 'Model ' + this.id;
- },
-
- // Create a new model with identical attributes to this one.
- clone : function() {
- return new (this.constructor)(this.attributes());
- },
-
- // A model is new if it has never been saved to the server, and has a negative
- // ID.
- isNew : function() {
- return !this.id;
- },
-
// Get the value of an attribute.
get : function(attr) {
return this._attributes[attr];
@@ -222,6 +196,53 @@
return value;
},
+ // Set a hash of model attributes, and sync the model to the server.
+ save : function(attrs, options) {
+ attrs || (attrs = {});
+ options || (options = {});
+ if (!this.set(attrs, options)) return false;
+ var model = this;
+ var success = function(resp) {
+ if (!model.set(resp.model)) return false;
+ if (options.success) options.success(model, resp);
+ };
+ var method = this.isNew() ? 'create' : 'update';
+ Backbone.sync(method, this, success, options.error);
+ return this;
+ },
+
+ // Destroy this model on the server.
+ destroy : function(options) {
+ options || (options = {});
+ var model = this;
+ var success = function(resp) {
+ if (model.collection) model.collection.remove(model);
+ if (options.success) options.success(model, resp);
+ };
+ Backbone.sync('delete', this, success, options.error);
+ return this;
+ },
+
+ // Default URL for the model's representation on the server -- if you're
+ // using Backbone's restful methods, override this to change the endpoint
+ // that will be called.
+ url : function() {
+ var base = getUrl(this.collection);
+ if (this.isNew()) return base;
+ return base + '/' + this.id;
+ },
+
+ // Create a new model with identical attributes to this one.
+ clone : function() {
+ return new (this.constructor)(this.attributes());
+ },
+
+ // A model is new if it has never been saved to the server, and has a negative
+ // ID.
+ isNew : function() {
+ return !this.id;
+ },
+
// Call this method to fire manually fire a `change` event for this model.
// Calling this will cause all objects observing the model to update.
change : function() {
@@ -265,31 +286,10 @@
return _.clone(this._previousAttributes);
},
- // Set a hash of model attributes, and sync the model to the server.
- save : function(attrs, options) {
- attrs || (attrs = {});
- options || (options = {});
- if (!this.set(attrs, options)) return false;
- var model = this;
- var success = function(resp) {
- if (!model.set(resp.model)) return false;
- if (options.success) options.success(model, resp);
- };
- var method = this.isNew() ? 'create' : 'update';
- Backbone.sync(method, this, success, options.error);
- return this;
- },
-
- // Destroy this model on the server.
- destroy : function(options) {
- options || (options = {});
- var model = this;
- var success = function(resp) {
- if (model.collection) model.collection.remove(model);
- if (options.success) options.success(model, resp);
- };
- Backbone.sync('delete', this, success, options.error);
- return this;
+ // String representation of the model. Override this to provide a nice way
+ // to print models to the console.
+ toString : function() {
+ return 'Model ' + this.id;
}
});
@@ -316,31 +316,6 @@
model : Backbone.Model,
- // Override this function to get convenient logging in the console.
- toString : function() {
- return 'Collection (' + this.length + " models)";
- },
-
- // Get a model from the set by id.
- get : function(id) {
- return id && this._byId[id.id != null ? id.id : id];
- },
-
- // Get a model from the set by client id.
- getByCid : function(cid) {
- return cid && this._byCid[cid.cid || cid];
- },
-
- // Get the model at the given index.
- at: function(index) {
- return this.models[index];
- },
-
- // Pluck an attribute from each model in the collection.
- pluck : function(attr) {
- return _.map(this.models, function(model){ return model.get(attr); });
- },
-
// Add a model, or list of models to the set. Pass **silent** to avoid
// firing the `added` event for every new model.
add : function(models, options) {
@@ -349,22 +324,6 @@
return models;
},
- // Internal implementation of adding a single model to the set.
- _add : function(model, options) {
- options || (options = {});
- var already = this.get(model);
- if (already) throw new Error(["Can't add the same model to a set twice", already.id]);
- this._byId[model.id] = model;
- this._byCid[model.cid] = model;
- model.collection = this;
- var index = this.comparator ? this.sortedIndex(model, this.comparator) : this.length;
- this.models.splice(index, 0, model);
- model.bind('all', this._boundOnModelEvent);
- this.length++;
- if (!options.silent) this.trigger('add', model);
- return model;
- },
-
// Remove a model, or a list of models from the set. Pass silent to avoid
// firing the `removed` event for every model removed.
remove : function(models, options) {
@@ -373,19 +332,19 @@
return models;
},
- // Internal implementation of removing a single model from the set.
- _remove : function(model, options) {
- options || (options = {});
- model = this.get(model);
- if (!model) return null;
- delete this._byId[model.id];
- delete this._byCid[model.cid];
- delete model.collection;
- this.models.splice(this.indexOf(model), 1);
- model.unbind('all', this._boundOnModelEvent);
- this.length--;
- if (!options.silent) this.trigger('remove', model);
- return model;
+ // Get a model from the set by id.
+ get : function(id) {
+ return id && this._byId[id.id != null ? id.id : id];
+ },
+
+ // Get a model from the set by client id.
+ getByCid : function(cid) {
+ return cid && this._byCid[cid.cid || cid];
+ },
+
+ // Get the model at the given index.
+ at: function(index) {
+ return this.models[index];
},
// Force the collection to re-sort itself. You don't need to call this under normal
@@ -398,6 +357,11 @@
return this;
},
+ // Pluck an attribute from each model in the collection.
+ pluck : function(attr) {
+ return _.map(this.models, function(model){ return model.get(attr); });
+ },
+
// When you have more items than you want to add or remove individually,
// you can refresh the entire set with a new list of models, without firing
// any `added` or `removed` events. Fires `refreshed` when finished.
@@ -442,6 +406,11 @@
return model.save(null, {success : success, error : options.error});
},
+ // Override this function to get convenient logging in the console.
+ toString : function() {
+ return 'Collection (' + this.length + " models)";
+ },
+
// Initialize or re-initialize all internal state. Called when the
// collection is refreshed.
_initialize : function(options) {
@@ -451,6 +420,37 @@
this._byCid = {};
},
+ // Internal implementation of adding a single model to the set.
+ _add : function(model, options) {
+ options || (options = {});
+ var already = this.get(model);
+ if (already) throw new Error(["Can't add the same model to a set twice", already.id]);
+ this._byId[model.id] = model;
+ this._byCid[model.cid] = model;
+ model.collection = this;
+ var index = this.comparator ? this.sortedIndex(model, this.comparator) : this.length;
+ this.models.splice(index, 0, model);
+ model.bind('all', this._boundOnModelEvent);
+ this.length++;
+ if (!options.silent) this.trigger('add', model);
+ return model;
+ },
+
+ // Internal implementation of removing a single model from the set.
+ _remove : function(model, options) {
+ options || (options = {});
+ model = this.get(model);
+ if (!model) return null;
+ delete this._byId[model.id];
+ delete this._byCid[model.cid];
+ delete model.collection;
+ this.models.splice(this.indexOf(model), 1);
+ model.unbind('all', this._boundOnModelEvent);
+ this.length--;
+ if (!options.silent) this.trigger('remove', model);
+ return model;
+ },
+
// Internal method called every time a model in the set fires an event.
// Sets need to update their indexes when models change ids.
_onModelEvent : function(ev, model, error) {
diff --git a/docs/backbone.html b/docs/backbone.html
index 9c46169..82adbd4 100644
--- a/docs/backbone.html
+++ b/docs/backbone.html
@@ -14,7 +14,9 @@ static properties to be extended.</p> </td> <td class="c
<span class="k">if</span> <span class="p">(</span><span class="nx">classProps</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">classProps</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">constructor</span> <span class="o">=</span> <span class="nx">child</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-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2>Backbone.Events</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="sec [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Get a url 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> <sp [...]
+ <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-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>Backbone.Events</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="sec [...]
custom events. You may <code>bind</code> or <code>unbind</code> a callback function to an event;
<code>trigger</code>-ing an event fires all callbacks in succession.</p>
@@ -22,13 +24,13 @@ custom events. You may <code>bind</code> or <code>unbind</code> a callback funct
_.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-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> [...]
+</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-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</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>
<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="k">this</span><span class="p">.</span><span class="nx">_callbacks</span><span class="p">[</span><span class="nx">ev</span><span class="p">]</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="p">[</span><span class="nx">ev</span><span class="p">]</span> <span class="o">=</span> <span cl [...]
<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="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Remove one or many callbacks. If <code>callback</code> is null, removes all
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</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
for all events.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unbind</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>
<span class="kd">var</span> <span class="nx">calls</span><span class="p">;</span>
@@ -49,7 +51,7 @@ for all events.</p> </td> <td class="code">
<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-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Trigger an event, firing all bound callbacks. Callbacks are passed the
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Trigger an event, firing all bound callbacks. Callbacks are passed the
same arguments as <code>trigger</code> is, apart from the event name.
Listening for <code>"all"</code> passes the true event name as the first argument.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">trigger</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="p">{</span>
<span class="kd">var</span> <span class="nx">list</span><span class="p">,</span> <span class="nx">calls</span><span class="p">,</span> <span class="nx">i</span><span class="p">,</span> <span class="nx">l</span><span class="p">;</span>
@@ -68,56 +70,41 @@ Listening for <code>"all"</code> passes the true event name as the first argumen
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h2>Backbone.Model</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <h2>Backbone.Model</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
If you do not specify the id, a negative id will be assigned for you.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span> <span class="o">=</span> <span class="kd">function</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>
<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">'c'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">attributes</span> <span class="o">||</span> <span class="p">{},</span> <span class="p">{</span><span class="nx">silent</span> <span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">();</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Attach all inheritable methods to the Model prototype.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</spa [...]
-after the last <code>changed</code> event was fired.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_previousAttributes</span> <span class="o">:</span> <span class="kc">null</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&# [...]
- <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Default URL for the model's representation on the server -- if you're
-using Backbone's restful methods, override this to change the endpoint
-that will be called.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">url</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">base</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">url</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">isNew</span><span class="p">())</span> <span class="k">return</span> <span class="nx">base</span><span class="p">;</span>
- <span class="k">return</span> <span class="nx">base</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">id</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>String representation of the model. Override this to provide a nice way
-to print models to the console.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toString</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="s1">'Model '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Create a new model with identical attributes to this one.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clone</span> <span clas [...]
- <span class="k">return</span> <span class="k">new</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">constructor</span><span class="p">)(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">());</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Are this model's attributes identical to another model?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isEqual</span> <span clas [...]
- <span class="k">return</span> <span class="nx">other</span> <span class="o">&&</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">,</span> <span class="nx">other</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">);</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>A model is new if it has never been saved to the server, and has a negative
-ID.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isNew</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="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Get the value of an attribute.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class="k [...]
+ <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><code>attributes</code> is aliased as <code>toJSON</code>, for use with <code>JSON.stringify</code>.</p> </td> <td class="code"> <div class="highlight"><pre> < [...]
+ <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">);</span>
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Attach all inheritable methods to the Model prototype.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</spa [...]
+after the last <code>changed</code> event was fired.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_previousAttributes</span> <span class="o">:</span> <span class="kc">null</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&# [...]
+ <span class="nx">attributes</span> <span class="o">:</span> <span class="nx">toJSON</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Get the value of an attribute.</p> </td> <td class="code"> <div class [...]
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">[</span><span class="nx">attr</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>Set a hash of model attributes on the object, firing <code>changed</code> unless you
-choose to silence it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Set a hash of model attributes on the object, firing <code>changed</code> unless you
+choose to silence it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">set</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> [...]
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">attrs</span><span class="p">)</span> <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
<span class="nx">attrs</span> <span class="o">=</span> <span class="nx">attrs</span><span class="p">.</span><span class="nx">_attributes</span> <span class="o">||</span> <span class="nx">attrs</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">now</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_attributes</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>Run validation if <code>vali [...]
+ <span class="kd">var</span> <span class="nx">now</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Run validation if <code>vali [...]
<span class="kd">var</span> <span class="nx">error</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">validate</span><span class="p">(</span><span class="nx">attrs</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</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="k">this</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Check for changes of <code>id</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span c [...]
+ <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>Check for changes of <code>id</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span c [...]
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">attrs</span><span class="p">[</span><span class="nx">attr</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">val</span> <span class="o">===</span> <span class="s1">''</span><span class="p">)</span> <span class="nx">val</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">now</span><span class="p">[</span><span class="nx">attr</span><span class="p">],</span> <span class="nx">val</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">now</span><span class="p">[</span><span class="nx">attr</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_changed</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change:'</span> <span class="o">+</span> <span class="nx">attr</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">trigger</span><span class="p">(</span><span class="s1">'change:'</span> <span class="o">+</span> <span class="nx">attr</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">val</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
- <span class="p">}</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>Fire the <code>change</code> event, if the model has been changed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <s [...]
+ <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>Fire the <code>change</code> event, if the model has been changed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <s [...]
<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-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Remove an attribute from the model, firing <code>changed</code> unless you choose to
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Remove an attribute from the model, firing <code>changed</code> unless you choose to
silence it.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unset</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attr</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<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="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">[</span><span class="nx">attr</span><span class="p">];</span>
@@ -128,20 +115,52 @@ silence it.</p> </td> <td class="code"> <d
<span class="k">this</span><span class="p">.</span><span class="nx">change</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Call this method to fire manually fire a <code>change</code> event for this model.
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Set a hash of model attributes, and sync the model to the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">save</span> <sp [...]
+ <span class="nx">attrs</span> <span class="o">||</span> <span class="p">(</span><span class="nx">attrs</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">options</span> <span class="o">=</span> <span class="p">{});</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</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">model</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</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="o">!</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">resp</span><span class="p">.</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="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</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="p">};</span>
+ <span class="kd">var</span> <span class="nx">method</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">isNew</span><span class="p">()</span> <span class="o">?</span> <span class="s1">'create'</span> <span class="o">:</span> <span class="s1">'update'</span><span class="p">;</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</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-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>Destroy this model on the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">destroy</span> <span class="o">:</span> <span c [...]
+ <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="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</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">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">)</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">remove</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">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</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="p">};</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">(</span><span class="s1">'delete'</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</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-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Default URL for the model's representation on the server -- if you're
+using Backbone's restful methods, override this to change the endpoint
+that will be called.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">url</span> <span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">base</span> <span class="o">=</span> <span class="nx">getUrl</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">collection</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">isNew</span><span class="p">())</span> <span class="k">return</span> <span class="nx">base</span><span class="p">;</span>
+ <span class="k">return</span> <span class="nx">base</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">id</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Create a new model with identical attributes to this one.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clone</span> <span clas [...]
+ <span class="k">return</span> <span class="k">new</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">constructor</span><span class="p">)(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">());</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <p>A model is new if it has never been saved to the server, and has a negative
+ID.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">isNew</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="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> <p>Call this method to fire manually fire a <code>change</code> event for this model.
Calling this will cause all objects observing the model to update.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">change</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">trigger</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="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_changed</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-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <p>Determine if the model has changed since the last <code>changed</code> event.
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> <p>Determine if the model has changed since the last <code>changed</code> event.
If you specify an attribute name, determine if that attribute has changed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">hasChanged</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</span><span class="p">[</span><span class="nx">attr</span><span class="p">]</span> <span class="o">!=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_attributes</span><span class="p">[</span><span class="nx">attr</span><span class="p">];</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_changed</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> <p>Return an object containing all the attributes that have changed, or false
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> <p>Return an object containing all the attributes that have changed, or false
if there are no changed attributes. Useful for determining what parts of a
view need to be updated and/or what attributes need to be persisted to
the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">changedAttributes</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">now</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">old</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">previousAttributes</span><span class="p">(),</span> <span class="nx">now</span> <span class="o">=</span> <span class="nx">now</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">(),</span> <span class="nx">changed</span> <span class="o">=</span> <span cla [...]
+ <span class="kd">var</span> <span class="nx">old</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</span><span class="p">,</span> <span class="nx">now</span> <span class="o">=</span> <span class="nx">now</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">(),</span> <span class="nx">changed</span> <span class="o">=</span> <span clas [...]
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">attr</span> <span class="k">in</span> <span class="nx">now</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">old</span><span class="p">[</span><span class="nx">attr</span><span class="p">],</span> <span class="nx">now</span><span class="p">[</span><span class="nx">attr</span><span class="p">]))</span> <span class="p">{</span>
<span class="nx">changed</span> <span class="o">=</span> <span class="nx">changed</span> <span class="o">||</span> <span class="p">{};</span>
@@ -149,37 +168,19 @@ the server.</p> </td> <td class="code"> <d
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">changed</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> <p>Get the previous value of an attribute, recorded at the time the last
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <p>Get the previous value of an attribute, recorded at the time the last
<code>changed</code> event was fired.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">previous</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">attr</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">attr</span> <span class="o">||</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</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="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</span><span class="p">[</span><span class="nx">attr</span><span class="p">];</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> <p>Get all of the attributes of the model at the time of the previous
+ <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>Get all of the attributes of the model at the time of the previous
<code>changed</code> event.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">previousAttributes</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="nx">_previousAttributes</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <p>Set a hash of model attributes, and sync the model to the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">save</span> <sp [...]
- <span class="nx">attrs</span> <span class="o">||</span> <span class="p">(</span><span class="nx">attrs</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">options</span> <span class="o">=</span> <span class="p">{});</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">attrs</span><span class="p">,</span> <span class="nx">options</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">model</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</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="o">!</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">resp</span><span class="p">.</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="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</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="p">};</span>
- <span class="kd">var</span> <span class="nx">method</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">isNew</span><span class="p">()</span> <span class="o">?</span> <span class="s1">'POST'</span> <span class="o">:</span> <span class="s1">'PUT'</span><span class="p">;</span>
- <span class="nx">Backbone</span><span class="p">.</span><span class="nx">request</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</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-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>Destroy this model on the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">destroy</span> <span class="o">:</span> <span c [...]
- <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="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</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">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">)</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">remove</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">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</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="p">};</span>
- <span class="nx">Backbone</span><span class="p">.</span><span class="nx">request</span><span class="p">(</span><span class="s1">'DELETE'</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span>
- <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
+ <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_previousAttributes</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>String representation of the model. Override this to provide a nice way
+to print models to the console.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toString</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="s1">'Model '</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</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> <h2>Backbone.Collection</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <h2>Backbone.Collection</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr [...]
or unordered. If a <code>comparator</code> is specified, the Collection will maintain
its models in sort order, as they're added and removed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<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>
@@ -190,65 +191,34 @@ its models in sort order, as they're added and removed.</p> </td>
<span class="k">this</span><span class="p">.</span><span class="nx">_boundOnModelEvent</span> <span class="o">=</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">_onModelEvent</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">_initialize</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">models</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">refresh</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span><span class="kc">true</span><span class="p">);</span>
- <span class="p">};</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <p>Define the Collection's inheritable methods.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span cl [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>Define the Collection's inheritable methods.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span cl [...]
- <span class="nx">model</span> <span class="o">:</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>Override this function to get convenient logging in the c [...]
- <span class="k">return</span> <span class="s1">'Collection ('</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="s2">" models)"</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>Get a model from the set by id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class=" [...]
- <span class="k">return</span> <span class="nx">id</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_byId</span><span class="p">[</span><span class="nx">id</span><span class="p">.</span><span class="nx">id</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">?</span> <span class="nx">id</span><span class="p">.</span><span class="nx">id</span> <span class="o">:</span> <span class="nx">id</span><span [...]
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>Get a model from the set by client id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getByCid</span> <span class="o">:</span> < [...]
- <span class="k">return</span> <span class="nx">cid</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_byCid</span><span class="p">[</span><span class="nx">cid</span><span class="p">.</span><span class="nx">cid</span> <span class="o">||</span> <span class="nx">cid</span><span class="p">];</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</a> </div> <p>Get the model at the given index.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">at</span><span class="o">:</span> <span class=" [...]
- <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">¶</a> </div> <p>What are the ids for every model in the set?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getIds</span> <span class="o">:</spa [...]
- <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</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="p">},</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">¶</a> </div> <p>What are the client ids for every model in the set?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getCids</span> <span class="o [...]
- <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</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="p">},</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">¶</a> </div> <p>Pluck an attribute from each model in the collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">pluck</span> <span class="o [...]
- <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">){</span> <span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span [...]
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">¶</a> </div> <p>Add a model, or list of models to the set. Pass <strong>silent</strong> to avoid
+ <span class="nx">model</span> <span class="o">:</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>Add a model, or list of models to the set. Pass <strong>s [...]
firing the <code>added</code> event for every new model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">add</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">models</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="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">models</span><span class="p">))</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_add</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</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">i</span><span class="o"><</span><span class="nx">models</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="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">_add [...]
<span class="k">return</span> <span class="nx">models</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">¶</a> </div> <p>Internal implementation of adding a single model to the set.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_add</span> <span cl [...]
- <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="kd">var</span> <span class="nx">already</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="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>
- <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">comparator</span> <span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">sortedIndex</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">comparator</span><span class="p">)</span> <span class="o">:< [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">model</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">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_boundOnModelEvent</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">++</span><span class="p">;</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="nx">model</span><span class="p">);</span>
- <span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">¶</a> </div> <p>Remove a model, or a list of models from the set. Pass silent to avoid
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>Remove a model, or a list of models from the set. Pass silent to avoid
firing the <code>removed</code> event for every model removed.</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="nx">models</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="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">models</span><span class="p">))</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_remove</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</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">i</span><span class="o"><</span><span class="nx">models</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="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">_rem [...]
<span class="k">return</span> <span class="nx">models</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">¶</a> </div> <p>Internal implementation of removing a single model from the set.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_remove</span> < [...]
- <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">get</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="o">!</span><span class="nx">model</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
- <span class="k">delete</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="k">delete</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="k">delete</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">;</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">model</span><span class="p">),</span> <span class="mi">1</span><span class="p">);</span>
- <span class="nx">model</span><span class="p">.</span><span class="nx">unbind</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">_boundOnModelEvent</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">--</span><span class="p">;</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="nx">model</span><span class="p">);</span>
- <span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">¶</a> </div> <p>Force the set to re-sort itself. You don't need to call this under normal
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</a> </div> <p>Get a model from the set by id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">get</span> <span class="o">:</span> <span class=" [...]
+ <span class="k">return</span> <span class="nx">id</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_byId</span><span class="p">[</span><span class="nx">id</span><span class="p">.</span><span class="nx">id</span> <span class="o">!=</span> <span class="kc">null</span> <span class="o">?</span> <span class="nx">id</span><span class="p">.</span><span class="nx">id</span> <span class="o">:</span> <span class="nx">id</span><span [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">¶</a> </div> <p>Get a model from the set by client id.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getByCid</span> <span class="o">:</span> < [...]
+ <span class="k">return</span> <span class="nx">cid</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_byCid</span><span class="p">[</span><span class="nx">cid</span><span class="p">.</span><span class="nx">cid</span> <span class="o">||</span> <span class="nx">cid</span><span class="p">];</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">¶</a> </div> <p>Get the model at the given index.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">at</span><span class="o">:</span> <span class=" [...]
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">¶</a> </div> <p>Force the collection to re-sort itself. You don't need to call this under normal
circumstances, as the set will maintain sort order as each item is added.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">sort</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="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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">comparator</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="s1">'Cannot sort a set without a comparator'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">models</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">comparator</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">,</span> <span class="k">this</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-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">¶</a> </div> <p>When you have more items than you want to add or remove individually,
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">¶</a> </div> <p>Pluck an attribute from each model in the collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">pluck</span> <span class="o [...]
+ <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">){</span> <span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">¶</a> </div> <p>When you have more items than you want to add or remove individually,
you can refresh the entire set with a new list of models, without firing
any <code>added</code> or <code>removed</code> events. Fires <code>refreshed</code> when finished.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">refresh</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<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>
@@ -263,7 +233,7 @@ any <code>added</code> or <code>removed</code> events. Fires <code>refreshed</co
<span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">,</span> <span class="k">this</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-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">¶</a> </div> <p>Fetch the default set of models for this collection, refreshing the
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">¶</a> </div> <p>Fetch the default set of models for this collection, refreshing the
collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">fetch</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="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="kd">var</span> <span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
@@ -271,25 +241,52 @@ collection.</p> </td> <td class="code"> <d
<span class="nx">collection</span><span class="p">.</span><span class="nx">refresh</span><span class="p">(</span><span class="nx">resp</span><span class="p">.</span><span class="nx">models</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="nx">resp</span><span class="p">);</span>
<span class="p">};</span>
- <span class="nx">Backbone</span><span class="p">.</span><span class="nx">request</span><span class="p">(</span><span class="s1">'GET'</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span><span class="p">(</span><span class="s1">'read'</span><span class="p">,</span> <span class="k">this</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</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-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">¶</a> </div> <p>Create a new instance of a model in this collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">create</span> <span class="o [...]
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">¶</a> </div> <p>Create a new instance of a model in this collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">create</span> <span class="o [...]
<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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">model</span> <span class="k">instanceof</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">))</span> <span class="nx">model</span> <span class="o">=</span> <span class="k">new</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">(</span><span class="nx">model</spa [...]
<span class="nx">model</span><span class="p">.</span><span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</span> <span class="kd">function</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="p">{</span>
+ <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</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="o">!</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">resp</span><span class="p">.</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="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">.</span><span class="nx">add</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">options</span><span class="p">.</span><span class="nx">success</span><span class="p">)</span> <span class="nx">options</span><span class="p">.</span><span class="nx">success</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="p">};</span>
<span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="p">{</span><span class="nx">success</span> <span class="o">:</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">error</span> <span class="o">:</span> <span class="nx">options</span><span class="p">.</span><span class="nx">error</span><span class="p">});</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">¶</a> </div> <p>Initialize or re-initialize all internal state. Called when the
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">¶</a> </div> <p>Override this function to get convenient logging in the console.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toString</span> [...]
+ <span class="k">return</span> <span class="s1">'Collection ('</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="s2">" models)"</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">¶</a> </div> <p>Initialize or re-initialize all internal state. Called when the
collection is refreshed.</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="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">length</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">models</span> <span class="o">=</span> <span class="p">[];</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">_byId</span> <span class="o">=</span> <span class="p">{};</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">_byId</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_byCid</span> <span class="o">=</span> <span class="p">{};</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">¶</a> </div> <p>Internal method called every time a model in the set fires an event.
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">¶</a> </div> <p>Internal implementation of adding a single model to the set.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_add</span> <span cl [...]
+ <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="kd">var</span> <span class="nx">already</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="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>
+ <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">comparator</span> <span class="o">?</span> <span class="k">this</span><span class="p">.</span><span class="nx">sortedIndex</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">comparator</span><span class="p">)</span> <span class="o">:< [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">model</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">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_boundOnModelEvent</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">++</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="nx">model</span><span class="p">);</span>
+ <span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">¶</a> </div> <p>Internal implementation of removing a single model from the set.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_remove</span> < [...]
+ <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">get</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="o">!</span><span class="nx">model</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
+ <span class="k">delete</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="k">delete</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="k">delete</span> <span class="nx">model</span><span class="p">.</span><span class="nx">collection</span><span class="p">;</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">model</span><span class="p">),</span> <span class="mi">1</span><span class="p">);</span>
+ <span class="nx">model</span><span class="p">.</span><span class="nx">unbind</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">_boundOnModelEvent</span><span class="p">);</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">--</span><span class="p">;</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">silent</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="nx">model</span><span class="p">);</span>
+ <span class="k">return</span> <span class="nx">model</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">¶</a> </div> <p>Internal method called every time a model in the set fires an event.
Sets need to update their indexes when models change ids.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_onModelEvent</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">model</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">ev</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="s1">'change'</span><span class="o">:</span>
@@ -304,16 +301,15 @@ Sets need to update their indexes when models change ids.</p> </td>
<span class="p">}</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-58"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58">¶</a> </div> <p>Underscore methods that we want to implement on the Collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span cla [...]
- <span class="s1">'reject'</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="s1">'any'</span><span class="p">,</span> <span class="s1">'include'</span><span class="p">,</span> <span class="s1">'invoke'</span><span class="p">,</span> <span class="s1">'max'</span><span class="p">,</span> <span class="s1">'min'</span><span class="p">,</span> <span class="s1">'sortBy'</span><spa [...]
- <span class="s1">'sortedIndex'</span><span class="p">,</span> <span class="s1">'toArray'</span><span class="p">,</span> <span class="s1">'size'</span><span class="p">,</span> <span class="s1">'first'</span><span class="p">,</span> <span class="s1">'rest'</span><span class="p">,</span> <span class="s1">'last'</span><span class="p">,</span> <span class="s1">'without'</span><span class="p">,</span>
- <span class="s1">'indexOf'</span><span class="p">,</span> <span class="s1">'lastIndexOf'</span><span class="p">,</span> <span class="s1">'isEmpty'</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">¶</a> </div> <p>Mix in each Undersc [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-57"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57">¶</a> </div> <p>Underscore methods that we want to implement on the Collection.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span cla [...]
+ <span class="s1">'filter'</span><span class="p">,</span> <span class="s1">'select'</span><span class="p">,</span> <span class="s1">'reject'</span><span class="p">,</span> <span class="s1">'every'</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="s1">'some'</span><span class="p">,</span> <span class="s1">'any'</span><span class="p">,</span> <span class="s1">'include'</span>< [...]
+ <span class="s1">'invoke'</span><span class="p">,</span> <span class="s1">'max'</span><span class="p">,</span> <span class="s1">'min'</span><span class="p">,</span> <span class="s1">'sortBy'</span><span class="p">,</span> <span class="s1">'sortedIndex'</span><span class="p">,</span> <span class="s1">'toArray'</span><span class="p">,</span> <span class="s1">'size'</span><span class="p">,</span>
+ <span class="s1">'first'</span><span class="p">,</span> <span class="s1">'rest'</span><span class="p">,</span> <span class="s1">'last'</span><span class="p">,</span> <span class="s1">'without'</span><span class="p">,</span> <span class="s1">'indexOf'</span><span class="p">,</span> <span class="s1">'lastIndexOf'</span><span class="p">,</span> <span class="s1">'isEmpty'</span><span class="p">];</span></pre></div> </td> [...]
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">prototype</span><span class="p">[</span><span class="nx">method</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">_</span><span class="p">[</span><span class="nx">method</span><span class="p">].</span><span class="nx">apply</span><span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">models</span><span class="p">].</span><span class="nx">concat</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx" [...]
<span class="p">};</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-60"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60">¶</a> </div> <h2>Backbone.View</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-59"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59">¶</a> </div> <h2>Backbone.View</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
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">modes</span> <span class="o">=</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">options</span> <span class="o">||</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">el</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</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">el</span><span class="p">;</span>
@@ -324,11 +320,11 @@ if an existing element is not provided...</p> </td> <td
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">make</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tagName</span><span class="p">,</span> <span class="nx">attrs</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-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">¶</a> </div> <p>jQuery lookup, scoped to DOM elements within the current view.
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-61"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-61">¶</a> </div> <p>jQuery lookup, scoped to DOM elements within the current view.
This should be prefered to global jQuery 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">jQueryDelegate</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-63"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-63">¶</a> </div> <p>Set up all interitable <strong>Backbone.View</strong> properties and methods.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span [...]
+ <span class="p">};</span></pre></div> </td> </tr> <tr id="section-62"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-62">¶</a> </div> <p>Cached regex to split keys for <code>handleEvents</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx" [...]
<span class="nx">jQuery</span> <span class="o">:</span> <span class="nx">jQueryDelegate</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-66"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-66">¶</a> </div> <p><strong>render</strong> is the core function that your view should override, in order
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>
@@ -342,21 +338,13 @@ 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-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">¶</a> </div> <p>Makes the view enter a mode. Modes have both a 'mode' and a 'group',
-and are mutually exclusive with any other modes in the same group.
-Setting will update the view's modes hash, as well as set an HTML class
-of <em>[mode]_[group]</em> on the view's element. Convenient way to swap styles
-and behavior.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setMode</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">group</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">modes</span><span class="p">[</span><span class="nx">group</span><span class="p">]</span> <span class="o">===</span> <span class="nx">mode</span><span class="p">)</span> <span class="k">return</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">setMode</span><span class="p">(</span><span class="nx">mode</span><span class="p">,</span> <span class="nx">group</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">modes</span><span class="p">[</span><span class="nx">group</span><span class="p">]</span> <span class="o">=</span> <span class="nx">mode</span><span class="p">;</span>
- <span class="p">},</span></pre></div> </td> </tr> <tr id="section-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">¶</a> </div> <p>Set callbacks, where this.callbacks is a hash of</p>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-68"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-68">¶</a> </div> <p>Set callbacks, where this.callbacks is a hash of</p>
-<p><em>{selector.event_name: callback_name}</em></p>
+<p><em>{"event selector": "callback"}</em></p>
<pre><code>{
- '.icon.pencil.mousedown': 'edit',
- '.button.click': 'save'
+ 'mousedown .title': 'edit',
+ 'click .button': 'save'
}
</code></pre>
@@ -364,13 +352,13 @@ and behavior.</p> </td> <td class="code">
Uses jQuery event delegation for efficiency.
Passing a selector of <code>el</code> binds to the view's root element.
Change events are not delegated through the view because IE does not
-bubble change events at all.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">handleEvents</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">callbacks</span><span class="p">)</span> <span class="p">{</span>
+bubble change events at all.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">handleEvents</span> <span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">events</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">unbind</span><span class="p">();</span>
- <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">callbacks</span> <span class="o">||</span> <span class="p">(</span><span class="nx">callbacks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">callbacks</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="nx">key</span> <span class="k">in</span> <span class="nx">callbacks</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">methodName</span> <span class="o">=</span> <span class="nx">callbacks</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
- <span class="nx">key</span> <span class="o">=</span> <span class="nx">key</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="sr">/\.(?!.*\.)/</span><span class="p">);</span>
- <span class="kd">var</span> <span class="nx">selector</span> <span class="o">=</span> <span class="nx">key</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">eventName</span> <span class="o">=</span> <span class="nx">key</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">events</span> <span class="o">||</span> <span class="p">(</span><span class="nx">events</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">events</span><span class="p">)))</span> <span class="k">return</span> <span class="k">this</span><span class="p">;</span>
+ <span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">events</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">methodName</span> <span class="o">=</span> <span class="nx">events</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
+ <span class="kd">var</span> <span class="nx">match</span> <span class="o">=</span> <span class="nx">key</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">eventSplitter</span><span class="p">);</span>
+ <span class="kd">var</span> <span class="nx">eventName</span> <span class="o">=</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">selector</span> <span class="o">=</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">method</span> <span class="o">=</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">methodName</span><span class="p">],</span> <span class="k">this</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selector</span> <span class="o">===</span> <span class="s1">''</span> <span class="o">||</span> <span class="nx">eventName</span> <span class="o">==</span> <span class="s1">'change'</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">bind</span><span class="p">(</span><span class="nx">eventName</span><span class="p">,</span> <span class="nx">method</span><span class="p">);</span>
@@ -379,7 +367,7 @@ bubble change events at all.</p> </td> <td class="code">
<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-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">¶</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-69"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-69">¶</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
attatched directly to the view.</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="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>
@@ -390,10 +378,15 @@ attatched directly to the view.</p> </td> <td class="cod
<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>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">¶</a> </div> <p>Set up inheritance for the model, collection, and view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx"> [...]
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-70"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-70">¶</a> </div> <p>Set up inheritance for the model, collection, and view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx"> [...]
<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="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-71"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-71">¶</a> </div> <p>Map from CRUD to HTTP for our default <code>Backbone.sync</code> implementation.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var< [...]
+ <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-72"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-72">¶</a> </div> <p>Override this function to change the manner in which Backbone persists
models to the server. You will be passed the type of request, and the
model in question. By default, uses jQuery to make a RESTful Ajax request
@@ -403,12 +396,11 @@ to the model's <code>url()</code>. Some possible customizations could be:</p>
<li>Use <code>setTimeout</code> to batch rapid-fire updates into a single request.</li>
<li>Send up the models as XML instead of JSON.</li>
<li>Persist models via WebSockets instead of Ajax.</li>
-</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">request</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">success</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span cl [...]
- <span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">attributes</span> <span class="o">?</span> <span class="p">{</span><span class="nx">model</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">attributes</span><span class="p">() [...]
+</ul> </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">success</span><span class="p">,</span> <span class="nx">error</span><span class="p">)</span> <span cla [...]
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
- <span class="nx">url</span> <span class="o">:</span> <span class="nx">model</span><span class="p">.</span><span class="nx">url</span><span class="p">(),</span>
- <span class="nx">type</span> <span class="o">:</span> <span class="nx">type</span><span class="p">,</span>
- <span class="nx">data</span> <span class="o">:</span> <span class="nx">data</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="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>
+ <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">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">dataType</span> <span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
<span class="nx">success</span> <span class="o">:</span> <span class="nx">success</span><span class="p">,</span>
<span class="nx">error</span> <span class="o">:</span> <span class="nx">error</span>
diff --git a/index.html b/index.html
index 4981681..a704115 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
- <title>Backbone: ...</title>
+ <title>Backbone.js</title>
<style>
body {
font-size: 14px;
@@ -21,7 +21,7 @@
width: 180px;
overflow-y: auto;
overflow-x: hidden;
- padding: 15px 0 0 30px;
+ padding: 15px 0 30px 30px;
border-right: 1px solid #ddd;
box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; -moz-box-shadow: 0 0 20px #ccc;
}
@@ -156,13 +156,13 @@
<li>– <a href="#Model-validate">validate</a></li>
<li>– <a href="#Model-url">url</a></li>
<li>– <a href="#Model-clone">clone</a></li>
- <li>– <a href="#Model-toString">toString</a></li>
<li>– <a href="#Model-isNew">isNew</a></li>
<li>– <a href="#Model-change">change</a></li>
<li>– <a href="#Model-hasChanged">hasChanged</a></li>
<li>– <a href="#Model-changedAttributes">changedAttributes</a></li>
<li>– <a href="#Model-previous">previous</a></li>
<li>– <a href="#Model-previousAttributes">previousAttributes</a></li>
+ <li>– <a href="#Model-toString">toString</a></li>
</ul>
<a class="toc_title" href="#Collection">
Collection
@@ -176,12 +176,12 @@
<li>– <a href="#Collection-getByCid">getByCid</a></li>
<li>– <a href="#Collection-at">at</a></li>
<li>– <a href="#Collection-sort">sort</a></li>
+ <li>– <a href="#Collection-pluck">pluck</a></li>
<li>– <a href="#Model-url">url</a></li>
<li>– <a href="#Collection-refresh">refresh</a></li>
<li>– <a href="#Collection-fetch">fetch</a></li>
<li>– <a href="#Collection-create">create</a></li>
<li>– <a href="#Collection-toString">toString</a></li>
- <li>– <a href="#Collection-pluck">pluck</a></li>
</ul>
<a class="toc_title" href="#Sync">
Sync
@@ -208,11 +208,11 @@
</p>
<p>
- <a href="http://github.com/documentcloud/backbone/">Backbone</a> gives
- structure to JavaScript applications by providing models with
- key-value binding, collections with rich enumerable functions,
- views with declarative callbacks, and connects to your existing webapp
- over a RESTful JSON interface.
+ <a href="http://github.com/documentcloud/backbone/">Backbone</a>
+ supplies structure to JavaScript-heavy applications by providing <b>models</b> with
+ key-value binding and custom events, <b>collections</b> with a rich API of enumerable functions,
+ <b>views</b> with declarative event handling, and connects it all to your
+ existing application over a RESTful JSON interface.
</p>
<p>
@@ -536,13 +536,6 @@ one.set({
<br />
Create a new instance of a model with identical attributes.
</p>
-
- <p id="Model-toString">
- <b class="header">toString</b><code>model.toString()</code>
- <br />
- By default, just returns <tt>"Model [id]"</tt> — Override <b>toString</b>
- to get convenient logging in the console for your models.
- </p>
<p id="Model-isNew">
<b class="header">isNew</b><code>model.isNew()</code>
@@ -610,6 +603,13 @@ bill.set({name : "Bill Jones"});
diff between versions of a model, or getting back to a valid state after
an error occurs.
</p>
+
+ <p id="Model-toString">
+ <b class="header">toString</b><code>model.toString()</code>
+ <br />
+ By default, just returns <tt>"Model [id]"</tt> — Override <b>toString</b>
+ to get convenient logging in the console for your models.
+ </p>
<h2 id="Collection">Backbone.Collection</h2>
@@ -621,7 +621,7 @@ bill.set({name : "Bill Jones"});
<a href="http://documentcloud.github.com/underscore">Underscore.js</a>
functions.
</p>
-
+
<p id="Collection-extend">
<b class="header">extend</b><code>Backbone.Collection.extend(properties, [staticProperties])</code>
<br />
@@ -689,7 +689,7 @@ var alphabetical = Books.sortBy(function(book) {
Add a model (or an array of models) to the collection. Fires an <tt>"add"</tt>
event, which you can pass <tt>{silent: true}</tt> to suppress.
</p>
-
+
<pre class="runnable">
var ships = new Backbone.Collection();
@@ -712,13 +712,13 @@ ships.add([
<tt>"remove"</tt> event, which you can pass <tt>{silent: true}</tt>
to suppress.
</p>
-
+
<p id="Collection-get">
<b class="header">get</b><code>collection.get(id)</code>
<br />
Get a model from a collection, specified by <b>id</b>.
</p>
-
+
<p id="Collection-getByCid">
<b class="header">getByCid</b><code>collection.getByCid(cid)</code>
<br />
@@ -727,7 +727,7 @@ ships.add([
a model is created. Useful for models which have not yet been saved to
the server, and do not yet have true ids.
</p>
-
+
<p id="Collection-at">
<b class="header">at</b><code>collection.at(index)</code>
<br />
@@ -735,21 +735,40 @@ ships.add([
is sorted, and if your collection isn't sorted, <b>at</b> will still
retrieve models in insertion order.
</p>
-
+
<p id="Collection-sort">
<b class="header">sort</b><code>collection.sort([options])</code>
<br />
Force a collection to re-sort itself. You don't need to call this under
normal circumstances, as a collection with a <tt>comparator</tt> function
- will maintain itself in proper sort order at all times. Triggers the
+ will maintain itself in proper sort order at all times. Triggers the
collection's <tt>"refresh"</tt> event, unless silenced by passing
<tt>{silent: true}</tt>
</p>
+ <p id="Collection-pluck">
+ <b class="header">pluck</b><code>collection.pluck(attribute)</code>
+ <br />
+ Pluck an attribute from each model in the collection. Equivalent to calling
+ <tt>map</tt>, and returning a single attribute from the iterator.
+ </p>
+
+<pre class="runnable">
+var stooges = new Backbone.Collection([
+ new Backbone.Model({name: "Curly"}),
+ new Backbone.Model({name: "Larry"}),
+ new Backbone.Model({name: "Moe"})
+]);
+
+var names = stooges.pluck("name");
+
+alert(JSON.stringify(names));
+</pre>
+
<p id="Collection-url">
<b class="header">url</b><code>collection.url or collection.url()</code>
<br />
- Set the <b>url</b> property (or function) on a collection to reference
+ Set the <b>url</b> property (or function) on a collection to reference
its location on the server. Models within the collection will use <b>url</b>
to construct URLs of their own.
</p>
@@ -783,108 +802,88 @@ var Notes = Backbone.Collection.extend({
<br />
Fetch the default set of models for this collection from the server,
refreshing the collection when they arrive. The <b>options</b> hash takes
- <tt>success(collection, response)</tt> and <tt>error(collection, response)</tt>
+ <tt>success(collection, response)</tt> and <tt>error(collection, response)</tt>
callbacks. Delegates to <tt>Backbone.sync</tt>
under the covers, for custom persistence strategies.
</p>
-
+
<p>
The server handler for <b>fetch</b> requests should return a JSON list of
models, namespaced under "models": <tt>{"models": [...]}</tt> — and
additional information can be returned under different keys.
</p>
-
+
<p>
- Note that <b>fetch</b> should not be used to populate collections on
- page load — all models needed at load time should already be
+ Note that <b>fetch</b> should not be used to populate collections on
+ page load — all models needed at load time should already be
bootstrapped in to place. <b>fetch</b> is intended for lazily-loading models
- for interfaces that are not needed immediately: for example, documents
- with collections of notes that may be toggled open and closed.
+ for interfaces that are not needed immediately: for example, documents
+ with collections of notes that may be toggled open and closed.
</p>
-
+
<p id="Collection-create">
<b class="header">create</b><code>collection.create(attributes, [options])</code>
<br />
Convenience to create a new instance of a model within a collection.
- Equivalent to instantiating a model with a hash of attributes,
+ Equivalent to instantiating a model with a hash of attributes,
saving the model to the server, and adding the model to the set after being
successfully created. Returns
the model, or <tt>false</tt> if a validation error prevented the
model from being created. In order for this to work, your collection
- must have a <tt>model</tt> property, referencing the type of model that
+ must have a <tt>model</tt> property, referencing the type of model that
the collection contains.
</p>
-
<p id="Collection-toString">
<b class="header">toString</b><code>collection.toString()</code>
<br />
- By default, just returns <tt>"Collection ([size] models)"</tt> —
+ By default, just returns <tt>"Collection ([size] models)"</tt> —
Override <b>toString</b> to get convenient logging in the console for the collection.
</p>
-
- <p id="Collection-pluck">
- <b class="header">pluck</b><code>collection.pluck(attribute)</code>
- <br />
- Pluck an attribute from each model in the collection. Equivalent to calling
- <tt>map</tt>, and returning a single attribute from the iterator.
- </p>
-
-<pre class="runnable">
-var stooges = new Backbone.Collection([
- new Backbone.Model({name: "Curly"}),
- new Backbone.Model({name: "Larry"}),
- new Backbone.Model({name: "Moe"})
-]);
-var names = stooges.pluck("name");
-
-alert(JSON.stringify(names));
-</pre>
-
<h2 id="Sync">Backbone.sync</h2>
-
+
<p>
- <b>Backbone.sync</b> is the function the Backbone calls every time it
- attempts to read or save a model to the server. By default, it uses
+ <b>Backbone.sync</b> is the function the Backbone calls every time it
+ attempts to read or save a model to the server. By default, it uses
<tt>jQuery.ajax</tt> to make a RESTful JSON request. You can override
it in order to use a different persistence strategy, such as WebSockets,
XML transport, or Local Storage.
</p>
-
+
<p>
The method signature of <b>Backbone.sync</b> is <tt>sync(method, model, success, error)</tt>
</p>
-
+
<ul>
<li><b>method</b> – the CRUD method (<tt>"create"</tt>, <tt>"read"</tt>, <tt>"update"</tt>, or <tt>"delete"</tt>)</li>
<li><b>model</b> – the model to be saved (or collection to be read)</li>
<li><b>success({model: ...})</b> – a callback that should be fired if the request works</li>
<li><b>error({model: ...})</b> – a callback that should be fired if the request fails</li>
</ul>
-
+
<h2 id="View">Backbone.View</h2>
-
+
<p>
Backbone views are almost more convention than they are code.
- The general idea is to organize your interface into logical sections,
- backed by models, each of which can be updated independently when the
+ The general idea is to organize your interface into logical sections,
+ backed by models, each of which can be updated independently when the
model changes. Instead of digging into a JSON object and looking up an
element in the DOM, and updating the HTML by hand, it should look more like:
<tt>model.bind('change', view.render)</tt> — and now everywhere that
model data is displayed in the UI, it is always immediately up to date.
</p>
-
+
<p id="View-el">
<b class="header">el</b><code>view.el</code>
<br />
- All views have a DOM element at all times (the <b>el</b> property),
- whether they've already been inserted into the page or not. In this
- fashion, views can be rendered at any time, and inserted into the DOM all
- at once, in order to get high-performance UI rendering with as few
+ All views have a DOM element at all times (the <b>el</b> property),
+ whether they've already been inserted into the page or not. In this
+ fashion, views can be rendered at any time, and inserted into the DOM all
+ at once, in order to get high-performance UI rendering with as few
reflows and repaints as possible.
</p>
-
+
<p id="View-jQuery">
<b class="header">$ (jQuery)</b><code>view.$(selector)</code>
<br />
@@ -910,15 +909,15 @@ ui.Chapter = Backbone.View.extend({
<p id="View-render">
<b class="header">render</b><code>view.render()</code>
<br />
- The default implementation of <b>render</b> is a no-op. Override this
+ The default implementation of <b>render</b> is a no-op. Override this
function with your code that renders the view template from model data,
and updates <tt>this.el</tt> with the new HTML. You can use any flavor of
JavaScript templating or DOM-building you prefer. Because <b>Underscore.js</b>
- is already on the page, <tt>_.template</tt> is already available. A good
- convention is to <tt>return this</tt> at the end of <b>render</b> to
+ is already on the page, <tt>_.template</tt> is already available. A good
+ convention is to <tt>return this</tt> at the end of <b>render</b> to
enable chained calls.
</p>
-
+
<pre>
ui.Chapter = Backbone.View.extend({
render: function() {
@@ -936,7 +935,7 @@ ui.Chapter = Backbone.View.extend({
with optional attributes and HTML content. Used internally to create the
initial <tt>view.el</tt>.
</p>
-
+
<p id="View-handleEvents">
<b class="header">handleEvents</b><code>handleEvents([events])</code>
<br />
@@ -945,25 +944,25 @@ ui.Chapter = Backbone.View.extend({
If an <b>events</b> hash is not passed directly, uses <tt>this.events</tt>
as the source. Events are written in the format <tt>{"event selector": "callback"}</tt>.
</p>
-
+
<p>
Using <b>handleEvents</b> provides a number of advantages over manually
binding events to child elements within <tt>render</tt>. All attached
callbacks are bound to the view before being handed off to jQuery, so when
- the callbacks are invoked, <tt>this</tt> continues to refer to the view object. When
+ the callbacks are invoked, <tt>this</tt> continues to refer to the view object. When
<b>handleEvents</b> is run again, perhaps with a different <tt>events</tt>
- hash, all callbacks are removed and delegated afresh — useful for
+ hash, all callbacks are removed and delegated afresh — useful for
views which need to behave differently when in different modes.
</p>
-
+
<p>
A view that displays a document in a search result might look
something like this:
</p>
-
+
<pre>
var DocumentView = Backbone.View.extend({
-
+
events: {
"click .title" : "select",
"dblclick .title" : "open",
@@ -972,20 +971,20 @@ var DocumentView = Backbone.View.extend({
"click .title .lock" : "editAccessLevel",
"mouseover .title .date" : "showTooltip"
},
-
+
render: {
var data = this.document.attributes();
this.el.html(this.template.render(data));
this.handleEvents();
return this;
}
-
+
});
</pre>
-
-
-
-
+
+
+
+
<h2 id="changes">Change Log</h2>
--
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