ares-ide

<!DOCTYPE html> <html> <head> <title>backbone.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backbone.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <pre><code>Backbone.js 0.9.2 </code></pre> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <pre><code>(c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. Backbone may be freely distributed under the MIT license. For all details and documentation: http://backbonejs.org </code></pre> </td> <td class="code"> <div class="highlight"><pre>(function(){</pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Initial Setup</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> Save a reference to the global object (<code>window</code> in the browser, <code>global</code> on the server). </td> <td class="code"> <div class="highlight"><pre> var root = this;</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> Save the previous value of the <code>Backbone</code> variable, so that it can be restored later on, if <code>noConflict</code> is used. </td> <td class="code"> <div class="highlight"><pre> var previousBackbone = root.Backbone;</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> Create a local reference to slice/splice. </td> <td class="code"> <div class="highlight"><pre> var slice = Array.prototype.slice; var splice = Array.prototype.splice;</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> The top-level namespace. All public Backbone classes and modules will be attached to this. Exported for both CommonJS and the browser. </td> <td class="code"> <div class="highlight"><pre> var Backbone; if (typeof exports !== 'undefined') { Backbone = exports; } else { Backbone = root.Backbone = {}; }</pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> Current version of the library. Keep in sync with <code>package.json</code>. </td> <td class="code"> <div class="highlight"><pre> Backbone.VERSION = '0.9.2';</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> Require Underscore, if we're on the server, and it's not already present. </td> <td class="code"> <div class="highlight"><pre> var _ = root._; if (!_ && (typeof require !== 'undefined')) _ = require('underscore');</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> For Backbone's purposes, jQuery, Zepto, or Ender owns the <code>$</code> variable. </td> <td class="code"> <div class="highlight"><pre> var $ = root.jQuery || root.Zepto || root.ender;</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> Set the JavaScript library that will be used for DOM manipulation and Ajax calls (a.k.a. the <code>$</code> variable). By default Backbone will use: jQuery, Zepto, or Ender; but the <code>setDomLibrary()</code> method lets you inject an alternate JavaScript library (or a mock library for testing your views outside of a browser). </td> <td class="code"> <div class="highlight"><pre> Backbone.setDomLibrary = function(lib) { $ = lib; };</pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> Runs Backbone.js in noConflict mode, returning the <code>Backbone</code> variable to its previous owner. Returns a reference to this Backbone object. </td> <td class="code"> <div class="highlight"><pre> Backbone.noConflict = function() { root.Backbone = previousBackbone; return this; };</pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> Turn on <code>emulateHTTP</code> to support legacy HTTP servers. Setting this option will fake <code>"PUT"</code> and <code>"DELETE"</code> requests via the <code>_method</code> parameter and set a <code>X-Http-Method-Override</code> header. </td> <td class="code"> <div class="highlight"><pre> Backbone.emulateHTTP = false;</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> Turn on <code>emulateJSON</code> to support legacy servers that can't deal with direct <code>application/json</code> requests ... will encode the body as <code>application/x-www-form-urlencoded</code> instead and will send the model in a form param named <code>model</code>. </td> <td class="code"> <div class="highlight"><pre> Backbone.emulateJSON = false;</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <h2>Backbone.Events</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> Regular expression used to split event strings </td> <td class="code"> <div class="highlight"><pre> var eventSplitter = /\s+/;</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> A module that can be mixed in to any object in order to provide it with custom events. You may bind with <code>on</code> or remove with <code>off</code> callback functions to an event; trigger`-ing an event fires all callbacks in succession. <pre><code>var object = {}; _.extend(object, Backbone.Events); object.on('expand', function(){ alert('expanded'); }); object.trigger('expand'); </code></pre> </td> <td class="code"> <div class="highlight"><pre> var Events = Backbone.Events = {</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> Bind one or more space separated events, <code>events</code>, to a <code>callback</code> function. Passing <code>"all"</code> will bind the callback to all events fired. </td> <td class="code"> <div class="highlight"><pre> on: function(events, callback, context) { var calls, event, node, tail, list; if (!callback) return this; events = events.split(eventSplitter); calls = this._callbacks || (this._callbacks = {});</pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> Create an immutable callback list, allowing traversal during modification. The tail is an empty object that will always be used as the next node. </td> <td class="code"> <div class="highlight"><pre> while (event = events.shift()) { list = calls[event]; node = list ? list.tail : {}; node.next = tail = {}; node.context = context; node.callback = callback; calls[event] = {tail: tail, next: list ? list.next : node}; } return this; },</pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> Remove one or many callbacks. If <code>context</code> is null, removes all callbacks with that function. If <code>callback</code> is null, removes all callbacks for the event. If <code>events</code> is null, removes all bound callbacks for all events. </td> <td class="code"> <div class="highlight"><pre> off: function(events, callback, context) { var event, calls, node, tail, cb, ctx;</pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> No events, or removing all events. </td> <td class="code"> <div class="highlight"><pre> if (!(calls = this._callbacks)) return; if (!(events || callback || context)) { delete this._callbacks; return this; }</pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> Loop through the listed events and contexts, splicing them out of the linked list of callbacks if appropriate. </td> <td class="code"> <div class="highlight"><pre> events = events ? events.split(eventSplitter) : _.keys(calls); while (event = events.shift()) { node = calls[event]; delete calls[event]; if (!node || !(callback || context)) continue;</pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> Create a new list, omitting the indicated callbacks. </td> <td class="code"> <div class="highlight"><pre> tail = node.tail; while ((node = node.next) !== tail) { cb = node.callback; ctx = node.context; if ((callback && cb !== callback) || (context && ctx !== context)) { this.on(event, cb, ctx); } } } return this; },</pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> Trigger one or many events, firing all bound callbacks. Callbacks are passed the same arguments as <code>trigger</code> is, apart from the event name (unless you're listening on <code>"all"</code>, which will cause your callback to receive the true name of the event as the first argument). </td> <td class="code"> <div class="highlight"><pre> trigger: function(events) { var event, node, calls, tail, args, all, rest; if (!(calls = this._callbacks)) return this; all = calls.all; events = events.split(eventSplitter); rest = slice.call(arguments, 1);</pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> For each event, walk through the linked list of callbacks twice, first to trigger the event, then to trigger any <code>"all"</code> callbacks. </td> <td class="code"> <div class="highlight"><pre> while (event = events.shift()) { if (node = calls[event]) { tail = node.tail; while ((node = node.next) !== tail) { node.callback.apply(node.context || this, rest); } } if (node = all) { tail = node.tail; args = [event].concat(rest); while ((node = node.next) !== tail) { node.callback.apply(node.context || this, args); } } } return this; } };</pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> Aliases for backwards compatibility. </td> <td class="code"> <div class="highlight"><pre> Events.bind = Events.on; Events.unbind = Events.off;</pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <h2>Backbone.Model</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> Create a new model, with defined attributes. A client id (<code>cid</code>) is automatically generated and assigned for you. </td> <td class="code"> <div class="highlight"><pre> var Model = Backbone.Model = function(attributes, options) { var defaults; attributes || (attributes = {}); if (options && options.parse) attributes = this.parse(attributes); if (defaults = getValue(this, 'defaults')) { attributes = _.extend({}, defaults, attributes); } if (options && options.collection) this.collection = options.collection; this.attributes = {}; this._escapedAttributes = {}; this.cid = _.uniqueId('c'); this.changed = {}; this._silent = {}; this._pending = {}; this.set(attributes, {silent: true});</pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> Reset change tracking. </td> <td class="code"> <div class="highlight"><pre> this.changed = {}; this._silent = {}; this._pending = {}; this._previousAttributes = _.clone(this.attributes); this.initialize.apply(this, arguments); };</pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> Attach all inheritable methods to the Model prototype. </td> <td class="code"> <div class="highlight"><pre> _.extend(Model.prototype, Events, {</pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> A hash of attributes whose current and previous value differ. </td> <td class="code"> <div class="highlight"><pre> changed: null,</pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> A hash of attributes that have silently changed since the last time <code>change</code> was called. Will become pending attributes on the next call. </td> <td class="code"> <div class="highlight"><pre> _silent: null,</pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> A hash of attributes that have changed since the last <code>'change'</code> event began. </td> <td class="code"> <div class="highlight"><pre> _pending: null,</pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> The default name for the JSON <code>id</code> attribute is <code>"id"</code>. MongoDB and CouchDB users may want to set this to <code>"_id"</code>. </td> <td class="code"> <div class="highlight"><pre> idAttribute: 'id',</pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> Initialize is an empty function by default. Override it with your own initialization logic. </td> <td class="code"> <div class="highlight"><pre> initialize: function(){},</pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> Return a copy of the model's <code>attributes</code> object. </td> <td class="code"> <div class="highlight"><pre> toJSON: function(options) { return _.clone(this.attributes); },</pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> Get the value of an attribute. </td> <td class="code"> <div class="highlight"><pre> get: function(attr) { return this.attributes[attr]; },</pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> Get the HTML-escaped value of an attribute. </td> <td class="code"> <div class="highlight"><pre> escape: function(attr) { var html; if (html = this._escapedAttributes[attr]) return html; var val = this.get(attr); return this._escapedAttributes[attr] = _.escape(val == null ? '' : '' + val); },</pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> Returns <code>true</code> if the attribute contains a value that is not null or undefined. </td> <td class="code"> <div class="highlight"><pre> has: function(attr) { return this.get(attr) != null; },</pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> Set a hash of model attributes on the object, firing <code>"change"</code> unless you choose to silence it. </td> <td class="code"> <div class="highlight"><pre> set: function(key, value, options) { var attrs, attr, val;</pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> Handle both </td> <td class="code"> <div class="highlight"><pre> if (_.isObject(key) || key == null) { attrs = key; options = value; } else { attrs = {}; attrs[key] = value; }</pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> Extract attributes and options. </td> <td class="code"> <div class="highlight"><pre> options || (options = {}); if (!attrs) return this; if (attrs instanceof Model) attrs = attrs.attributes; if (options.unset) for (attr in attrs) attrs[attr] = void 0;</pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> Run validation. </td> <td class="code"> <div class="highlight"><pre> if (!this._validate(attrs, options)) return false;</pre></div> </td> </tr> <tr id="section-44"> <td class="docs">