PageRenderTime 73ms CodeModel.GetById 7ms app.highlight 45ms RepoModel.GetById 2ms app.codeStats 0ms

/index.html

https://github.com/deleteme/backbone
HTML | 2481 lines | 2127 code | 354 blank | 0 comment | 0 complexity | 40db1c1e05f2fede4bc3e6347b0567a9 MD5 | raw file
   1<!DOCTYPE HTML>
   2<html>
   3<head>
   4  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   5  <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6  <title>Backbone.js</title>
   7  <style>
   8    body {
   9      font-size: 14px;
  10      line-height: 22px;
  11      font-family: Helvetica Neue, Helvetica, Arial;
  12      background: #f4f4f4 url(docs/images/background.png);
  13    }
  14    .interface {
  15      font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
  16    }
  17    div#sidebar {
  18      background: #fff;
  19      position: fixed;
  20      top: 0; left: 0; bottom: 0;
  21      width: 200px;
  22      overflow-y: auto;
  23      overflow-x: hidden;
  24      padding: 15px 0 30px 30px;
  25      border-right: 1px solid #ddd;
  26      box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; -moz-box-shadow: 0 0 20px #ccc;
  27    }
  28      a.toc_title, a.toc_title:visited {
  29        display: block;
  30        color: black;
  31        font-weight: bold;
  32        margin-top: 15px;
  33      }
  34        a.toc_title:hover {
  35          text-decoration: underline;
  36        }
  37        #sidebar .version {
  38          font-size: 10px;
  39          font-weight: normal;
  40        }
  41      ul.toc_section {
  42        font-size: 11px;
  43        line-height: 14px;
  44        margin: 5px 0 0 0;
  45        padding-left: 0px;
  46        list-style-type: none;
  47        font-family: Lucida Grande;
  48      }
  49        .toc_section li {
  50          cursor: pointer;
  51          margin: 0 0 3px 0;
  52        }
  53          .toc_section li a {
  54            text-decoration: none;
  55            color: black;
  56          }
  57            .toc_section li a:hover {
  58              text-decoration: underline;
  59            }
  60    div.container {
  61      position: relative;
  62      width: 550px;
  63      margin: 40px 0 50px 260px;
  64    }
  65    div.run {
  66      position: absolute;
  67      right: 15px;
  68      width: 26px; height: 18px;
  69      background: url('docs/images/arrows.png') no-repeat -26px 0;
  70    }
  71      div.run:active {
  72        background-position: -51px 0;
  73      }
  74    p, div.container ul {
  75      margin: 20px 0;
  76      width: 550px;
  77    }
  78      p.warning {
  79        font-size: 12px;
  80        line-height: 18px;
  81        font-style: italic;
  82      }
  83      div.container ul {
  84        list-style: circle;
  85        font-size: 12px;
  86        padding-left: 15px;
  87      }
  88    a, a:visited {
  89      color: #444;
  90    }
  91    a:active, a:hover {
  92      color: #000;
  93    }
  94    a img {
  95      border: 0;
  96    }
  97    h1, h2, h3, h4, h5, h6 {
  98      padding-top: 20px;
  99    }
 100      h2 {
 101        font-size: 20px;
 102      }
 103    b.header {
 104      font-size: 16px;
 105      line-height: 30px;
 106    }
 107    span.alias {
 108      font-size: 14px;
 109      font-style: italic;
 110      margin-left: 20px;
 111    }
 112    table {
 113      margin: 15px 0 0; padding: 0;
 114    }
 115      tr, td {
 116        margin: 0; padding: 0;
 117      }
 118        td {
 119          padding: 0px 15px 5px 0;
 120        }
 121    code, pre, tt {
 122      font-family: Monaco, Consolas, "Lucida Console", monospace;
 123      font-size: 12px;
 124      line-height: 18px;
 125      font-style: normal;
 126    }
 127      tt {
 128        padding: 0px 3px;
 129        background: #fff;
 130        border: 1px solid #ddd;
 131        zoom: 1;
 132      }
 133      code {
 134        margin-left: 20px;
 135      }
 136      pre {
 137        font-size: 12px;
 138        padding: 2px 0 2px 15px;
 139        border: 4px solid #bbb; border-top: 0; border-bottom: 0;
 140        margin: 0px 0 30px;
 141      }
 142      img.example_image {
 143        margin: 0px auto;
 144      }
 145  </style>
 146</head>
 147<body>
 148
 149  <div id="sidebar" class="interface">
 150
 151    <a class="toc_title" href="#">
 152      Backbone.js <span class="version">(0.3.3)</span>
 153    </a>
 154
 155    <a class="toc_title" href="#Introduction">
 156      Introduction
 157    </a>
 158
 159    <a class="toc_title" href="#Events">
 160      Events
 161    </a>
 162    <ul class="toc_section">
 163      <li><a href="#Events-bind">bind</a></li>
 164      <li><a href="#Events-unbind">unbind</a></li>
 165      <li><a href="#Events-trigger">trigger</a></li>
 166    </ul>
 167
 168    <a class="toc_title" href="#Model">
 169      Model
 170    </a>
 171    <ul class="toc_section">
 172      <li><a href="#Model-extend">extend</a></li>
 173      <li><a href="#Model-constructor">constructor / initialize</a></li>
 174      <li><a href="#Model-get">get</a></li>
 175      <li><a href="#Model-set">set</a></li>
 176      <li><a href="#Model-escape">escape</a></li>
 177      <li><a href="#Model-has">has</a></li>
 178      <li><a href="#Model-unset">unset</a></li>
 179      <li><a href="#Model-clear">clear</a></li>
 180      <li><a href="#Model-id">id</a></li>
 181      <li><a href="#Model-cid">cid</a></li>
 182      <li><a href="#Model-attributes">attributes</a></li>
 183      <li><a href="#Model-defaults">defaults</a></li>
 184      <li>- <a href="#Model-toJSON">toJSON</a></li>
 185      <li><a href="#Model-fetch">fetch</a></li>
 186      <li><a href="#Model-save">save</a></li>
 187      <li><a href="#Model-destroy">destroy</a></li>
 188      <li><a href="#Model-validate">validate</a></li>
 189      <li><a href="#Model-url">url</a></li>
 190      <li><a href="#Model-urlRoot">urlRoot</a></li>
 191      <li><a href="#Model-parse">parse</a></li>
 192      <li><a href="#Model-clone">clone</a></li>
 193      <li><a href="#Model-isNew">isNew</a></li>
 194      <li><a href="#Model-change">change</a></li>
 195      <li><a href="#Model-hasChanged">hasChanged</a></li>
 196      <li><a href="#Model-changedAttributes">changedAttributes</a></li>
 197      <li><a href="#Model-previous">previous</a></li>
 198      <li><a href="#Model-previousAttributes">previousAttributes</a></li>
 199    </ul>
 200
 201    <a class="toc_title" href="#Collection">
 202      Collection
 203    </a>
 204    <ul class="toc_section">
 205      <li><a href="#Collection-extend">extend</a></li>
 206      <li><a href="#Collection-model">model</a></li>
 207      <li><a href="#Collection-constructor">constructor / initialize</a></li>
 208      <li><a href="#Collection-models">models</a></li>
 209      <li><a href="#Collection-toJSON">toJSON</a></li>
 210      <li><a href="#Collection-Underscore-Methods"><b>Underscore Methods (25)</b></a></li>
 211      <li><a href="#Collection-add">add</a></li>
 212      <li><a href="#Collection-remove">remove</a></li>
 213      <li><a href="#Collection-get">get</a></li>
 214      <li><a href="#Collection-getByCid">getByCid</a></li>
 215      <li><a href="#Collection-at">at</a></li>
 216      <li><a href="#Collection-length">length</a></li>
 217      <li><a href="#Collection-comparator">comparator</a></li>
 218      <li><a href="#Collection-sort">sort</a></li>
 219      <li><a href="#Collection-pluck">pluck</a></li>
 220      <li><a href="#Collection-url">url</a></li>
 221      <li><a href="#Collection-parse">parse</a></li>
 222      <li><a href="#Collection-fetch">fetch</a></li>
 223      <li><a href="#Collection-reset">reset</a></li>
 224      <li><a href="#Collection-create">create</a></li>
 225    </ul>
 226
 227    <a class="toc_title" href="#Router">
 228      Router
 229    </a>
 230    <ul class="toc_section">
 231      <li><a href="#Router-extend">extend</a></li>
 232      <li><a href="#Router-routes">routes</a></li>
 233      <li><a href="#Router-constructor">constructor / initialize</a></li>
 234      <li><a href="#Router-route">route</a></li>
 235      <li><a href="#Router-saveLocation">saveLocation</a></li>
 236      <li><a href="#Router-setLocation">setLocation</a></li>
 237    </ul>
 238
 239    <a class="toc_title" href="#History">
 240      History
 241    </a>
 242    <ul class="toc_section">
 243      <li><a href="#History-start">start</a></li>
 244    </ul>
 245
 246    <a class="toc_title" href="#Sync">
 247      Sync
 248    </a>
 249    <ul class="toc_section">
 250      <li><a href="#Sync">Backbone.sync</a></li>
 251      <li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
 252      <li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
 253    </ul>
 254
 255    <a class="toc_title" href="#View">
 256      View
 257    </a>
 258    <ul class="toc_section">
 259      <li><a href="#View-extend">extend</a></li>
 260      <li><a href="#View-constructor">constructor / initialize</a></li>
 261      <li><a href="#View-el">el</a></li>
 262      <li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>
 263      <li><a href="#View-render">render</a></li>
 264      <li><a href="#View-remove">remove</a></li>
 265      <li><a href="#View-make">make</a></li>
 266      <li><a href="#View-delegateEvents">delegateEvents</a></li>
 267    </ul>
 268
 269    <a class="toc_title" href="#Utility">
 270      Utility
 271    </a>
 272    <ul class="toc_section">
 273      <li><a href="#Utility-noConflict">noConflict</a></li>
 274    </ul>
 275
 276    <a class="toc_title" href="#examples">
 277      Examples
 278    </a>
 279    <ul class="toc_section">
 280      <li><a href="#examples-todos">Todos</a></li>
 281      <li><a href="#examples-documentcloud">DocumentCloud</a></li>
 282      <li><a href="#examples-basecamp">Basecamp Mobile</a></li>
 283      <li><a href="#examples-flow">Flow</a></li>
 284      <li><a href="#examples-cloudapp">CloudApp</a></li>
 285      <li><a href="#examples-soundcloud">Mobile SoundCloud</a></li>
 286      <li><a href="#examples-tilemill">TileMill</a></li>
 287      <li>- <a href="#examples-instagreat">Insta-great!</a></li>
 288      <li>- <a href="#examples-bittorrent">BitTorrent</a></li>
 289      <li>- <a href="#examples-chop">Chop</a></li>
 290      <li>- <a href="#examples-quietwrite">QuietWrite</a></li>
 291      <li>- <a href="#examples-tzigla">Tzigla</a></li>
 292      <li>- <a href="#examples-substance">Substance</a></li>
 293    </ul>
 294
 295    <a class="toc_title" href="#faq">
 296      F.A.Q.
 297    </a>
 298    <ul class="toc_section">
 299      <li><a href="#FAQ-events">Catalog of Events</a></li>
 300      <li><a href="#FAQ-nested">Nested Models &amp; Collections</a></li>
 301      <li><a href="#FAQ-bootstrap">Loading Bootstrapped Models</a></li>
 302      <li><a href="#FAQ-mvc">Traditional MVC</a></li>
 303      <li><a href="#FAQ-this">Binding "this"</a></li>
 304      <li>- <a href="#FAQ-rias">Other RIA Frameworks</a></li>
 305    </ul>
 306
 307    <a class="toc_title" href="#changelog">
 308      Change Log
 309    </a>
 310
 311  </div>
 312
 313  <div class="container">
 314
 315    <p>
 316      <img style="width: 385px; height: 126px;" src="docs/images/backbone.png" alt="Backbone.js" />
 317    </p>
 318
 319    <p>
 320      <a href="http://github.com/documentcloud/backbone/">Backbone</a>
 321      supplies structure to JavaScript-heavy applications by providing <b>models</b> with
 322      key-value binding and custom events, <b>collections</b> with a rich API of enumerable functions,
 323      <b>views</b> with declarative event handling, and connects it all to your
 324      existing application over a RESTful JSON interface.
 325    </p>
 326
 327    <p>
 328      The project is <a href="http://github.com/documentcloud/backbone/">hosted on GitHub</a>,
 329      and the <a href="docs/backbone.html">annotated source code</a> is available,
 330      as well as an online <a href="test/test.html">test suite</a>, and
 331      <a href="examples/todos/index.html">example application</a>.
 332    </p>
 333
 334    <p>
 335      You can report bugs and discuss features on the
 336      <a href="http://github.com/documentcloud/backbone/issues">GitHub issues page</a>,
 337      on Freenode IRC in the <tt>#documentcloud</tt> channel, post questions to the
 338      <a href="https://groups.google.com/forum/#!forum/backbonejs">Google Group</a>,
 339      or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
 340    </p>
 341
 342    <p>
 343      <i>
 344        Backbone is an open-source component of
 345        <a href="http://documentcloud.org/">DocumentCloud</a>.
 346      </i>
 347    </p>
 348
 349    <h2 id="downloads">
 350      Downloads &amp; Dependencies
 351      <span style="padding-left: 7px; font-size:11px; font-weight: normal;" class="interface">(Right-click, and use "Save As")</span>
 352    </h2>
 353
 354    <table>
 355      <tr>
 356        <td><a href="backbone.js">Development Version (0.3.3)</a></td>
 357        <td><i>35kb, Uncompressed with Comments</i></td>
 358      </tr>
 359      <tr>
 360        <td><a href="backbone-min.js">Production Version (0.3.3)</a></td>
 361        <td><i>3.9kb, Packed and Gzipped</i></td>
 362      </tr>
 363    </table>
 364
 365    <p>
 366      Backbone's only hard dependency is
 367      <a href="http://documentcloud.github.com/underscore/">Underscore.js</a>.
 368      For RESTful persistence, "hashchange" History, and DOM manipulation with
 369      <a href="#View">Backbone.View</a>,
 370      it's highly recommended to include
 371      <a href="https://github.com/douglascrockford/JSON-js">json2.js</a>, and either
 372      <a href="http://jquery.com">jQuery</a> <small>( > 1.4.2)</small> or 
 373      <a href="http://zeptojs.com/">Zepto</a>.
 374    </p>
 375
 376    <h2 id="Introduction">Introduction</h2>
 377
 378    <p>
 379      When working on a web application that involves a lot of JavaScript, one
 380      of the first things you learn is to stop tying your data to the DOM. It's all
 381      too easy to create JavaScript applications that end up as tangled piles of
 382      jQuery selectors and callbacks, all trying frantically to keep data in
 383      sync between the HTML UI, your JavaScript logic, and the database on your
 384      server. For rich client-side applications, a more structured approach
 385      is helpful.
 386    </p>
 387
 388    <p>
 389      With Backbone, you represent your data as
 390      <a href="#Model">Models</a>, which can be created, validated, destroyed,
 391      and saved to the server. Whenever a UI action causes an attribute of
 392      a model to change, the model triggers a <i>"change"</i> event; all
 393      the <a href="#View">Views</a> that display the model's data are notified of the
 394      event, causing them to re-render. You don't have to write the glue
 395      code that looks into the DOM to find an element with a specific <i>id</i>,
 396      and update the HTML manually
 397      &mdash; when the model changes, the views simply update themselves.
 398    </p>
 399
 400    <p>
 401      Many of the examples that follow are runnable. Click the <i>play</i> button
 402      to execute them.
 403    </p>
 404
 405    <h2 id="Events">Backbone.Events</h2>
 406
 407    <p>
 408      <b>Events</b> is a module that can be mixed in to any object, giving the
 409      object the ability to bind and trigger custom named events. Events do not
 410      have to be declared before they are bound, and may take passed arguments.
 411      For example:
 412    </p>
 413
 414<pre class="runnable">
 415var object = {};
 416
 417_.extend(object, Backbone.Events);
 418
 419object.bind("alert", function(msg) {
 420  alert("Triggered " + msg);
 421});
 422
 423object.trigger("alert", "an event");
 424</pre>
 425
 426    <p id="Events-bind">
 427      <b class="header">bind</b><code>object.bind(event, callback)</code>
 428      <br />
 429      Bind a <b>callback</b> function to an object. The callback will be invoked
 430      whenever the <b>event</b> (specified by an arbitrary string identifier) is fired.
 431      If you have a large number of different events on a page, the convention is to use colons to
 432      namespace them: <tt>"poll:start"</tt>, or <tt>"change:selection"</tt>
 433    </p>
 434
 435    <p>
 436      Callbacks bound to the special
 437      <tt>"all"</tt> event will be triggered when any event occurs, and are passed
 438      the name of the event as the first argument. For example, to proxy all events
 439      from one object to another:
 440    </p>
 441
 442<pre>
 443proxy.bind("all", function(eventName) {
 444  object.trigger(eventName);
 445});
 446</pre>
 447
 448    <p id="Events-unbind">
 449      <b class="header">unbind</b><code>object.unbind([event], [callback])</code>
 450      <br />
 451      Remove a previously-bound <b>callback</b> function from an object. If no
 452      callback is specified, all callbacks for the <b>event</b> will be
 453      removed. If no event is specified, <i>all</i> event callbacks on the object
 454      will be removed.
 455    </p>
 456
 457<pre>
 458object.unbind("change", onChange);  // Removes just the onChange callback.
 459
 460object.unbind("change");            // Removes all "change" callbacks.
 461
 462object.unbind();                    // Removes all callbacks on object.
 463</pre>
 464
 465    <p id="Events-trigger">
 466      <b class="header">trigger</b><code>object.trigger(event, [*args])</code>
 467      <br />
 468      Trigger callbacks for the given <b>event</b>. Subsequent arguments to
 469      <b>trigger</b> will be passed along to the event callbacks.
 470    </p>
 471
 472    <h2 id="Model">Backbone.Model</h2>
 473
 474    <p>
 475      <b>Models</b> are the heart of any JavaScript application, containing
 476      the interactive data as well as a large part of the logic surrounding it:
 477      conversions, validations, computed properties, and access control. You
 478      extend <b>Backbone.Model</b> with your domain-specific methods, and
 479      <b>Model</b> provides a basic set of functionality for managing changes.
 480    </p>
 481
 482    <p>
 483      The following is a contrived example, but it demonstrates defining a model
 484      with a custom method, setting an attribute, and firing an event keyed
 485      to changes in that specific attribute.
 486      After running this code once, <tt>sidebar</tt> will be
 487      available in your browser's console, so you can play around with it.
 488    </p>
 489
 490<pre class="runnable">
 491var Sidebar = Backbone.Model.extend({
 492  promptColor: function() {
 493    var cssColor = prompt("Please enter a CSS color:");
 494    this.set({color: cssColor});
 495  }
 496});
 497
 498window.sidebar = new Sidebar;
 499
 500sidebar.bind('change:color', function(model, color) {
 501  $('#sidebar').css({background: color});
 502});
 503
 504sidebar.set({color: 'white'});
 505
 506sidebar.promptColor();
 507</pre>
 508
 509    <p id="Model-extend">
 510      <b class="header">extend</b><code>Backbone.Model.extend(properties, [classProperties])</code>
 511      <br />
 512      To create a <b>Model</b> class of your own, you extend <b>Backbone.Model</b>
 513      and provide instance <b>properties</b>, as well as optional
 514      <b>classProperties</b> to be attached directly to the constructor function.
 515    </p>
 516
 517    <p>
 518      <b>extend</b> correctly sets up the prototype chain, so subclasses created
 519      with <b>extend</b> can be further extended and subclassed as far as you like.
 520    </p>
 521
 522<pre>
 523var Note = Backbone.Model.extend({
 524
 525  initialize: function() { ... },
 526
 527  author: function() { ... },
 528
 529  coordinates: function() { ... },
 530
 531  allowedToEdit: function(account) {
 532    return true;
 533  }
 534
 535});
 536
 537var PrivateNote = Note.extend({
 538
 539  allowedToEdit: function(account) {
 540    return account.owns(this);
 541  }
 542
 543});
 544</pre>
 545
 546    <p class="warning">
 547        Brief aside on <tt>super</tt>: JavaScript does not provide
 548        a simple way to call super &mdash; the function of the same name defined
 549        higher on the prototype chain. If you override a core function like
 550        <tt>set</tt>, or <tt>save</tt>, and you want to invoke the
 551        parent object's implementation, you'll have to explicitly call it, along these lines:
 552    </p>
 553
 554<pre>
 555var Note = Backbone.Model.extend({
 556  set: function(attributes, options) {
 557    Backbone.Model.prototype.set.call(this, attributes, options);
 558    ...
 559  }
 560});
 561</pre>
 562
 563    <p id="Model-constructor">
 564      <b class="header">constructor / initialize</b><code>new Model([attributes])</code>
 565      <br />
 566      When creating an instance of a model, you can pass in the initial values
 567      of the <b>attributes</b>, which will be <a href="#Model-set">set</a> on the
 568      model. If you define an <b>initialize</b> function, it will be invoked when
 569      the model is created.
 570    </p>
 571
 572<pre>
 573new Book({
 574  title: "One Thousand and One Nights",
 575  author: "Scheherazade"
 576});
 577</pre>
 578
 579    <p id="Model-get">
 580      <b class="header">get</b><code>model.get(attribute)</code>
 581      <br />
 582      Get the current value of an attribute from the model. For example:
 583      <tt>note.get("title")</tt>
 584    </p>
 585
 586    <p id="Model-set">
 587      <b class="header">set</b><code>model.set(attributes, [options])</code>
 588      <br />
 589      Set a hash of attributes (one or many) on the model. If any of the attributes
 590      change the models state, a <tt>"change"</tt> event will be triggered, unless
 591      <tt>{silent: true}</tt> is passed as an option. Change events for specific
 592      attributes are also triggered, and you can bind to those as well, for example:
 593      <tt>change:title</tt>, and <tt>change:content</tt>.
 594    </p>
 595
 596<pre>
 597note.set({title: "October 12", content: "Lorem Ipsum Dolor Sit Amet..."});
 598</pre>
 599
 600    <p>
 601      If the model has a <a href="#Model-validate">validate</a> method,
 602      it will be validated before the attributes are set, no changes will
 603      occur if the validation fails, and <b>set</b> will return <tt>false</tt>.
 604      You may also pass an <tt>error</tt>
 605      callback in the options, which will be invoked instead of triggering an
 606      <tt>"error"</tt> event, should validation fail.
 607    </p>
 608
 609    <p id="Model-escape">
 610      <b class="header">escape</b><code>model.escape(attribute)</code>
 611      <br />
 612      Similar to <a href="#Model-get">get</a>, but returns the HTML-escaped version
 613      of a model's attribute. If you're interpolating data from the model into
 614      HTML, using <b>escape</b> to retrieve attributes will prevent
 615      <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">XSS</a> attacks.
 616    </p>
 617
 618<pre class="runnable">
 619var hacker = new Backbone.Model({
 620  name: "&lt;script&gt;alert('xss')&lt;/script&gt;"
 621});
 622
 623alert(hacker.escape('name'));
 624</pre>
 625
 626    <p id="Model-has">
 627      <b class="header">has</b><code>model.has(attribute)</code>
 628      <br />
 629      Returns <tt>true</tt> if the attribute is set to a non-null or non-undefined
 630      value.
 631    </p>
 632
 633<pre>
 634if (note.has("title")) {
 635  ...
 636}
 637</pre>
 638
 639    <p id="Model-unset">
 640      <b class="header">unset</b><code>model.unset(attribute, [options])</code>
 641      <br />
 642      Remove an attribute by deleting it from the internal attributes hash.
 643      Fires a <tt>"change"</tt> event unless <tt>silent</tt> is passed as an option.
 644    </p>
 645
 646    <p id="Model-clear">
 647      <b class="header">clear</b><code>model.clear([options])</code>
 648      <br />
 649      Removes all attributes from the model. Fires a <tt>"change"</tt> event unless
 650      <tt>silent</tt> is passed as an option.
 651    </p>
 652
 653    <p id="Model-id">
 654      <b class="header">id</b><code>model.id</code>
 655      <br />
 656      A special property of models, the <b>id</b> is an arbitrary string
 657      (integer id or UUID). If you set the <b>id</b> in the
 658      attributes hash, it will be copied onto the model as a direct property.
 659      Models can be retrieved by id from collections, and the id is used to generate
 660      model URLs by default.
 661    </p>
 662
 663    <p id="Model-cid">
 664      <b class="header">cid</b><code>model.cid</code>
 665      <br />
 666      A special property of models, the <b>cid</b> or client id is a unique identifier
 667      automatically assigned to all models when they're first created. Client ids
 668      are handy when the model has not yet been saved to the server, and does not
 669      yet have its eventual true <b>id</b>, but already needs to be visible in the UI.
 670      Client ids take the form: <tt>c1, c2, c3 ...</tt>
 671    </p>
 672
 673    <p id="Model-attributes">
 674      <b class="header">attributes</b><code>model.attributes</code>
 675      <br />
 676      The <b>attributes</b> property is the internal hash containing the model's
 677      state. Please use <a href="#Model-set">set</a> to update the attributes instead of modifying
 678      them directly. If you'd like to retrieve and munge a copy of the model's
 679      attributes, use <a href="#Model-toJSON">toJSON</a> instead.
 680    </p>
 681
 682    <p id="Model-defaults">
 683      <b class="header">defaults</b><code>model.defaults or model.defaults()</code>
 684      <br />
 685      The <b>defaults</b> hash (or function) can be used to specify the default
 686      attributes for your model. When creating an instance of the model,
 687      any unspecified attributes will be set to their default value.
 688    </p>
 689
 690<pre class="runnable">
 691var Meal = Backbone.Model.extend({
 692  defaults: {
 693    "appetizer":  "caesar salad",
 694    "entree":     "ravioli",
 695    "dessert":    "cheesecake"
 696  }
 697});
 698
 699alert("Dessert will be " + (new Meal).get('dessert'));
 700</pre>
 701
 702    <p class="warning">
 703      Remember that in JavaScript, objects are passed by reference, so if you
 704      include an object as a default value, it will be shared among all instances.
 705    </p>
 706
 707    <p id="Model-toJSON">
 708      <b class="header">toJSON</b><code>model.toJSON()</code>
 709      <br />
 710      Return a copy of the model's <a href="#Model-attributes">attributes</a> for JSON stringification.
 711      This can be used for persistence, serialization, or for augmentation before
 712      being handed off to a view. The name of this method is a bit confusing, as
 713      it doesn't actually return a JSON string &mdash; but I'm afraid that it's
 714      the way that the <a href="https://developer.mozilla.org/en/JSON#toJSON()_method">JavaScript API for <b>JSON.stringify</b> works</a>.
 715    </p>
 716
 717<pre class="runnable">
 718var artist = new Backbone.Model({
 719  firstName: "Wassily",
 720  lastName: "Kandinsky"
 721});
 722
 723artist.set({birthday: "December 16, 1866"});
 724
 725alert(JSON.stringify(artist));
 726</pre>
 727
 728    <p id="Model-fetch">
 729      <b class="header">fetch</b><code>model.fetch([options])</code>
 730      <br />
 731      Refreshes the model's state from the server. Useful if the model has never
 732      been populated with data, or if you'd like to ensure that you have the
 733      latest server state. A <tt>"change"</tt> event will be triggered if the
 734      server's state differs from the current attributes. Accepts
 735      <tt>success</tt> and <tt>error</tt> callbacks in the options hash, which
 736      are passed <tt>(model, response)</tt> as arguments.
 737    </p>
 738
 739<pre>
 740// Poll every 10 seconds to keep the channel model up-to-date.
 741setInterval(function() {
 742  channel.fetch();
 743}, 10000);
 744</pre>
 745
 746    <p id="Model-save">
 747      <b class="header">save</b><code>model.save([attributes], [options])</code>
 748      <br />
 749      Save a model to your database (or alternative persistence layer),
 750      by delegating to <a href="#Sync">Backbone.sync</a>. The <b>attributes</b>
 751      hash (as in <a href="#Model-set">set</a>) should contain the attributes
 752      you'd like to change -- keys that aren't mentioned won't be altered.
 753      If the model has a <a href="#Model-validate">validate</a>
 754      method, and validation fails, the model will not be saved. If the model
 755      <a href="#Model-isNew">isNew</a>, the save will be a <tt>"create"</tt>
 756      (HTTP <tt>POST</tt>), if the model already
 757      exists on the server, the save will be an <tt>"update"</tt> (HTTP <tt>PUT</tt>).
 758    </p>
 759
 760    <p>
 761      In the following example, notice how because the model has never been
 762      saved previously, our overridden version of <tt>Backbone.sync</tt> receives a <tt>"create"</tt> request.
 763    </p>
 764
 765<pre class="runnable">
 766Backbone.sync = function(method, model) {
 767  alert(method + ": " + JSON.stringify(model));
 768};
 769
 770var book = new Backbone.Model({
 771  title: "The Rough Riders",
 772  author: "Theodore Roosevelt"
 773});
 774
 775book.save();
 776</pre>
 777
 778    <p>
 779      <b>save</b> accepts <tt>success</tt> and <tt>error</tt> callbacks in the
 780      options hash, which are passed <tt>(model, response)</tt> as arguments.
 781      The <tt>error</tt> callback will also be invoked if the model has a
 782      <tt>validate</tt> method, and validation fails. If a server-side
 783      validation fails, return a non-<tt>200</tt> HTTP response code, along with
 784      an error response in text or JSON.
 785    </p>
 786
 787<pre>
 788book.save({author: "F.D.R."}, {error: function(){ ... }});
 789</pre>
 790
 791    <p id="Model-destroy">
 792      <b class="header">destroy</b><code>model.destroy([options])</code>
 793      <br />
 794      Destroys the model on the server by delegating an HTTP <tt>DELETE</tt>
 795      request to <a href="#Sync">Backbone.sync</a>. Accepts
 796      <tt>success</tt> and <tt>error</tt> callbacks in the options hash.
 797      Triggers a <tt>"destroy"</tt> event on the model, which will bubble up
 798      through any collections that contain it.
 799    </p>
 800
 801<pre>
 802book.destroy({success: function(model, response) {
 803  ...
 804}});
 805</pre>
 806
 807    <p id="Model-validate">
 808      <b class="header">validate</b><code>model.validate(attributes)</code>
 809      <br />
 810      This method is left undefined, and you're encouraged to override it with
 811      your custom validation logic, if you have any that can be performed
 812      in JavaScript. <b>validate</b> is called before <tt>set</tt> and
 813      <tt>save</tt>, and is passed the attributes that are about to be updated.
 814      If the model and attributes are valid, don't return anything from <b>validate</b>;
 815      if the attributes are invalid, return an error of your choosing. It
 816      can be as simple as a string error message to be displayed, or a complete
 817      error object that describes the error programmatically. <tt>set</tt> and
 818      <tt>save</tt> will not continue if <b>validate</b> returns an error.
 819      Failed validations trigger an <tt>"error"</tt> event.
 820    </p>
 821
 822<pre class="runnable">
 823var Chapter = Backbone.Model.extend({
 824  validate: function(attrs) {
 825    if (attrs.end < attrs.start) {
 826      return "can't end before it starts";
 827    }
 828  }
 829});
 830
 831var one = new Chapter({
 832  title : "Chapter One: The Beginning"
 833});
 834
 835one.bind("error", function(model, error) {
 836  alert(model.get("title") + " " + error);
 837});
 838
 839one.set({
 840  start: 15,
 841  end:   10
 842});
 843</pre>
 844
 845    <p>
 846      <tt>"error"</tt> events are useful for providing coarse-grained error
 847      messages at the model or collection level, but if you have a specific view
 848      that can better handle the error, you may override and suppress the event
 849      by passing an <tt>error</tt> callback directly:
 850    </p>
 851
 852<pre>
 853account.set({access: "unlimited"}, {
 854  error: function(model, error) {
 855    alert(error);
 856  }
 857});
 858</pre>
 859
 860    <p id="Model-url">
 861      <b class="header">url</b><code>model.url()</code>
 862      <br />
 863      Returns the relative URL where the model's resource would be located on
 864      the server. If your models are located somewhere else, override this method
 865      with the correct logic. Generates URLs of the form: <tt>"/[collection.url]/[id]"</tt>,
 866      falling back to <tt>"/[urlRoot]/id"</tt> if the model is not part of a collection.
 867    </p>
 868
 869    <p>
 870      Delegates to <a href="#Collection-url">Collection#url</a> to generate the
 871      URL, so make sure that you have it defined, or a <a href="#Model-urlRoot">urlRoot</a>
 872      property, if all models of this class share a common root URL.
 873      A model with an id of <tt>101</tt>, stored in a
 874      <a href="#Collection">Backbone.Collection</a> with a <tt>url</tt> of <tt>"/documents/7/notes"</tt>,
 875      would have this URL: <tt>"/documents/7/notes/101"</tt>
 876    </p>
 877
 878    <p id="Model-urlRoot">
 879      <b class="header">urlRoot</b><code>model.urlRoot</code>
 880      <br />
 881      Specify a <tt>urlRoot</tt> if you're using a model outside of a collection,
 882      to enable the default <a href="#Model-url">url</a> function to generate
 883      URLs based on the model id. <tt>"/[urlRoot]/id"</tt>
 884    </p>
 885
 886<pre class="runnable">
 887var Book = Backbone.Model.extend({urlRoot : '/books'});
 888
 889var solaris = new Book({id: "1083-lem-solaris"});
 890
 891alert(solaris.url());
 892</pre>
 893
 894    <p id="Model-parse">
 895      <b class="header">parse</b><code>model.parse(response)</code>
 896      <br />
 897      <b>parse</b> is called whenever a model's data is returned by the
 898      server, in <a href="#Model-fetch">fetch</a>, and <a href="#Model-save">save</a>.
 899      The function is passed the raw <tt>response</tt> object, and should return
 900      the attributes hash to be <a href="#Model-set">set</a> on the model. The
 901      default implementation is a no-op, simply passing through the JSON response.
 902      Override this if you need to work with a preexisting API, or better namespace
 903      your responses.
 904    </p>
 905
 906    <p>
 907      If you're working with a Rails backend, you'll notice that Rails' default
 908      <tt>to_json</tt> implementation includes a model's attributes under a
 909      namespace. To disable this behavior for seamless Backbone integration, set:
 910    </p>
 911
 912<pre>
 913ActiveRecord::Base.include_root_in_json = false
 914</pre>
 915
 916    <p id="Model-clone">
 917      <b class="header">clone</b><code>model.clone()</code>
 918      <br />
 919      Returns a new instance of the model with identical attributes.
 920    </p>
 921
 922    <p id="Model-isNew">
 923      <b class="header">isNew</b><code>model.isNew()</code>
 924      <br />
 925      Has this model been saved to the server yet? If the model does not yet have
 926      an <tt>id</tt>, it is considered to be new.
 927    </p>
 928
 929    <p id="Model-change">
 930      <b class="header">change</b><code>model.change()</code>
 931      <br />
 932      Manually trigger the <tt>"change"</tt> event.
 933      If you've been passing <tt>{silent: true}</tt> to the <a href="#Model-set">set</a> function in order to
 934      aggregate rapid changes to a model, you'll want to call <tt>model.change()</tt>
 935      when you're all finished.
 936    </p>
 937
 938    <p id="Model-hasChanged">
 939      <b class="header">hasChanged</b><code>model.hasChanged([attribute])</code>
 940      <br />
 941      Has the model changed since the last <tt>"change"</tt> event? If an <b>attribute</b>
 942      is passed, returns <tt>true</tt> if that specific attribute has changed.
 943    </p>
 944    
 945    <p class="warning">
 946      Note that this method, and the following change-related ones, 
 947      are only useful during the course of a <tt>"change"</tt> event.
 948    </p>
 949
 950<pre>
 951book.bind("change", function() {
 952  if (book.hasChanged("title")) {
 953    ...
 954  }
 955});
 956</pre>
 957
 958    <p id="Model-changedAttributes">
 959      <b class="header">changedAttributes</b><code>model.changedAttributes([attributes])</code>
 960      <br />
 961      Retrieve a hash of only the model's attributes that have changed. Optionally,
 962      an external <b>attributes</b> hash can be passed in, returning
 963      the attributes in that hash which differ from the model. This can be used
 964      to figure out which portions of a view should be updated, or what calls
 965      need to be made to sync the changes to the server.
 966    </p>
 967
 968    <p id="Model-previous">
 969      <b class="header">previous</b><code>model.previous(attribute)</code>
 970      <br />
 971      During a <tt>"change"</tt> event, this method can be used to get the
 972      previous value of a changed attribute.
 973    </p>
 974
 975<pre class="runnable">
 976var bill = new Backbone.Model({
 977  name: "Bill Smith"
 978});
 979
 980bill.bind("change:name", function(model, name) {
 981  alert("Changed name from " + bill.previous("name") + " to " + name);
 982});
 983
 984bill.set({name : "Bill Jones"});
 985</pre>
 986
 987    <p id="Model-previousAttributes">
 988      <b class="header">previousAttributes</b><code>model.previousAttributes()</code>
 989      <br />
 990      Return a copy of the model's previous attributes. Useful for getting a
 991      diff between versions of a model, or getting back to a valid state after
 992      an error occurs.
 993    </p>
 994
 995    <h2 id="Collection">Backbone.Collection</h2>
 996
 997    <p>
 998      Collections are ordered sets of models. You can to bind <tt>"change"</tt> events
 999      to be notified when any model in the collection has been modified,
1000      listen for <tt>"add"</tt> and <tt>"remove"</tt> events, <tt>fetch</tt>
1001      the collection from the server, and use a full suite of
1002      <a href="#Collection-Underscore-Methods">Underscore.js methods</a>.
1003    </p>
1004
1005    <p>
1006      Any event that is triggered on a model in a collection will also be
1007      triggered on the collection directly, for convenience.
1008      This allows you to listen for changes to specific attributes in any
1009      model in a collection, for example:
1010      <tt>Documents.bind("change:selected", ...)</tt>
1011    </p>
1012
1013    <p id="Collection-extend">
1014      <b class="header">extend</b><code>Backbone.Collection.extend(properties, [classProperties])</code>
1015      <br />
1016      To create a <b>Collection</b> class of your own, extend <b>Backbone.Collection</b>,
1017      providing instance <b>properties</b>, as well as optional <b>classProperties</b> to be attached
1018      directly to the collection's constructor function.
1019    </p>
1020
1021    <p id="Collection-model">
1022      <b class="header">model</b><code>collection.model</code>
1023      <br />
1024      Override this property to specify the model class that the collection
1025      contains. If defined, you can pass raw attributes objects (and arrays) to
1026      <a href="#Collection-add">add</a>, <a href="#Collection-create">create</a>,
1027      and <a href="#Collection-reset">reset</a>, and the attributes will be
1028      converted into a model of the proper type.
1029    </p>
1030
1031<pre>
1032var Library = Backbone.Collection.extend({
1033  model: Book
1034});
1035</pre>
1036
1037    <p id="Collection-constructor">
1038      <b class="header">constructor / initialize</b><code>new Collection([models], [options])</code>
1039      <br />
1040      When creating a Collection, you may choose to pass in the initial array of <b>models</b>.
1041      The collection's <a href="#Collection-comparator">comparator</a> function
1042      may be included as an option. If you define an <b>initialize</b> function, it will be
1043      invoked when the collection is created.
1044    </p>
1045
1046<pre>
1047var tabs = new TabSet([tab1, tab2, tab3]);
1048</pre>
1049
1050    <p id="Collection-models">
1051      <b class="header">models</b><code>collection.models</code>
1052      <br />
1053      Raw access to the JavaScript array of models inside of the collection. Usually you'll
1054      want to use <tt>get</tt>, <tt>at</tt>, or the <b>Underscore methods</b>
1055      to access model objects, but occasionally a direct reference to the array
1056      is desired.
1057    </p>
1058
1059    <p id="Collection-toJSON">
1060      <b class="header">toJSON</b><code>collection.toJSON()</code>
1061      <br />
1062      Return an array containing the attributes hash of each model in the
1063      collection. This can be used to serialize and persist the
1064      collection as a whole. The name of this method is a bit confusing, because
1065      it conforms to
1066      <a href="https://developer.mozilla.org/en/JSON#toJSON()_method">JavaScript's JSON API</a>.
1067    </p>
1068
1069<pre class="runnable">
1070var collection = new Backbone.Collection([
1071  {name: "Tim", age: 5},
1072  {name: "Ida", age: 26},
1073  {name: "Rob", age: 55}
1074]);
1075
1076alert(JSON.stringify(collection));
1077</pre>
1078
1079    <p id="Collection-Underscore-Methods">
1080      <b class="header">Underscore Methods (25)</b>
1081      <br />
1082      Backbone proxies to <b>Underscore.js</b> to provide 25 iteration functions
1083      on <b>Backbone.Collection</b>. They aren't all documented here, but
1084      you can take a look at the Underscore documentation for the full details&hellip;
1085    </p>
1086
1087    <ul>
1088      <li><a href="http://documentcloud.github.com/underscore/#each">forEach (each)</a></li>
1089      <li><a href="http://documentcloud.github.com/underscore/#map">map</a></li>
1090      <li><a href="http://documentcloud.github.com/underscore/#reduce">reduce (foldl, inject)</a></li>
1091      <li><a href="http://documentcloud.github.com/underscore/#reduceRight">reduceRight (foldr)</a></li>
1092      <li><a href="http://documentcloud.github.com/underscore/#detect">find (detect)</a></li>
1093      <li><a href="http://documentcloud.github.com/underscore/#select">filter (select)</a></li>
1094      <li><a href="http://documentcloud.github.com/underscore/#reject">reject</a></li>
1095      <li><a href="http://documentcloud.github.com/underscore/#all">every (all)</a></li>
1096      <li><a href="http://documentcloud.github.com/underscore/#any">some (any)</a></li>
1097      <li><a href="http://documentcloud.github.com/underscore/#include">include</a></li>
1098      <li><a href="http://documentcloud.github.com/underscore/#invoke">invoke</a></li>
1099      <li><a href="http://documentcloud.github.com/underscore/#max">max</a></li>
1100      <li><a href="http://documentcloud.github.com/underscore/#min">min</a></li>
1101      <li><a href="http://documentcloud.github.com/underscore/#sortBy">sortBy</a></li>
1102      <li><a href="http://documentcloud.github.com/underscore/#sortedIndex">sortedIndex</a></li>
1103      <li><a href="http://documentcloud.github.com/underscore/#toArray">toArray</a></li>
1104      <li><a href="http://documentcloud.github.com/underscore/#size">size</a></li>
1105      <li><a href="http://documentcloud.github.com/underscore/#first">first</a></li>
1106      <li><a href="http://documentcloud.github.com/underscore/#rest">rest</a></li>
1107      <li><a href="http://documentcloud.github.com/underscore/#last">last</a></li>
1108      <li><a href="http://documentcloud.github.com/underscore/#without">without</a></li>
1109      <li><a href="http://documentcloud.github.com/underscore/#indexOf">indexOf</a></li>
1110      <li><a href="http://documentcloud.github.com/underscore/#lastIndexOf">lastIndexOf</a></li>
1111      <li><a href="http://documentcloud.github.com/underscore/#isEmpty">isEmpty</a></li>
1112      <li><a href="http://documentcloud.github.com/underscore/#chain">chain</a></li>
1113    </ul>
1114
1115<pre>
1116Books.each(function(book) {
1117  book.publish();
1118});
1119
1120var titles = Books.map(function(book) {
1121  return book.get("title");
1122});
1123
1124var publishedBooks = Books.filter(function(book) {
1125  return book.get("published") === true;
1126});
1127
1128var alphabetical = Books.sortBy(function(book) {
1129  return book.author.get("name").toLowerCase();
1130});
1131</pre>
1132
1133    <p id="Collection-add">
1134      <b class="header">add</b><code>collection.add(models, [options])</code>
1135      <br />
1136      Add a model (or an array of models) to the collection. Fires an <tt>"add"</tt>
1137      event, which you can pass <tt>{silent: true}</tt> to suppress. If a
1138      <a href="#Collection-model">model</a> property is defined, you may also pass
1139      raw attributes objects, and have them be vivified as instances of the model.
1140      Pass <tt>{at: index}</tt> to splice the model into the collection at the
1141      specified <tt>index</tt>.
1142    </p>
1143
1144<pre class="runnable">
1145var ships = new Backbone.Collection;
1146
1147ships.bind("add", function(ship) {
1148  alert("Ahoy " + ship.get("name") + "!");
1149});
1150
1151ships.add([
1152  {name: "Flying Dutchman"},
1153  {name: "Black Pearl"}
1154]);
1155</pre>
1156
1157    <p id="Collection-remove">
1158      <b class="header">remove</b><code>collection.remove(models, [options])</code>
1159      <br />
1160      Remove a model (or an array of models) from the collection. Fires a
1161      <tt>"remove"</tt> event, which you can use <tt>silent</tt>
1162      to suppress.
1163    </p>
1164
1165    <p id="Collection-get">
1166      <b class="header">get</b><code>collection.get(id)</code>
1167      <br />
1168      Get a model from a collection, specified by <b>id</b>.
1169    </p>
1170
1171<pre>
1172var book = Library.get(110);
1173</pre>
1174
1175    <p id="Collection-getByCid">
1176      <b class="header">getByCid</b><code>collection.getByCid(cid)</code>
1177      <br />
1178      Get a model from a collection, specified by client id. The client id
1179      is the <tt>.cid</tt> property of the model, automatically assigned whenever
1180      a model is created. Useful for models which have not yet been saved to
1181      the server, and do not yet have true ids.
1182    </p>
1183
1184    <p id="Collection-at">
1185      <b class="header">at</b><code>collection.at(index)</code>
1186      <br />
1187      Get a model from a collection, specified by index. Useful if your collection
1188      is sorted, and if your collection isn't sorted, <b>at</b> will still
1189      retrieve models in insertion order.
1190    </p>
1191
1192    <p id="Collection-length">
1193      <b class="header">length</b><code>collection.length</code>
1194      <br />
1195      Like an array, a Collection maintains a <tt>length</tt> property, counting
1196      the number of models it contains.
1197    </p>
1198
1199    <p id="Collection-comparator">
1200      <b class="header">comparator</b><code>collection.comparator</code>
1201      <br />
1202      By default there is no <b>comparator</b> function on a collection.
1203      If you define a comparator, it will be used to maintain
1204      the collection in sorted order. This means that as models are added,
1205      they are inserted at the correct index in <tt>collection.models</tt>.
1206      Comparator functions take a model and return a numeric or string value
1207      by which the model should be ordered relative to others.
1208    </p>
1209
1210    <p>
1211      Note how even though all of the chapters in this example are added backwards,
1212      they come out in the proper order:
1213    </p>
1214
1215<pre class="runnable">
1216var Chapter  = Backbone.Model;
1217var chapters = new Backbone.Collection;
1218
1219chapters.comparator = function(chapter) {
1220  return chapter.get("page");
1221};
1222
1223chapters.add(new Chapter({page: 9, title: "The End"}));
1224chapters.add(new Chapter({page: 5, title: "The Middle"}));
1225chapters.add(new Chapter({page: 1, title: "The Beginning"}));
1226
1227alert(chapters.pluck('title'));
1228</pre>
1229
1230    <p class="warning">
1231      Brief aside: This comparator function is different than JavaScript's regular
1232      "sort", which must return <tt>0</tt>, <tt>1</tt>, or <tt>-1</tt>,
1233      and is more similar to a <tt>sortBy</tt> &mdash; a much nicer API.
1234    </p>
1235
1236    <p id="Collection-sort">
1237      <b class="header">sort</b><code>collection.sort([options])</code>
1238      <br />
1239      Force a collection to re-sort itself. You don't need to call this under
1240      normal circumstances, as a collection with a <a href="#Collection-comparator">comparator</a> function
1241      will maintain itself in proper sort order at all times. Calling <b>sort</b>
1242      triggers the collection's <tt>"reset"</tt> event, unless silenced by passing
1243      <tt>{silent: true}</tt>
1244    </p>
1245
1246    <p id="Collection-pluck">
1247      <b class="header">pluck</b><code>collection.pluck(attribute)</code>
1248      <br />
1249      Pluck an attribute from each model in the collection. Equivalent to calling
1250      <tt>map</tt>, and returning a single attribute from the iterator.
1251    </p>
1252
1253<pre class="runnable">
1254var stooges = new Backbone.Collection([
1255  new Backbone.Model({name: "Curly"}),
1256  new Backbone.Model({name: "Larry"}),
1257  new Backbone.Model({name: "Moe"})
1258]);
1259
1260var names = stooges.pluck("name");
1261
1262alert(JSON.stringify(names));
1263</pre>
1264
1265    <p id="Collection-url">
1266      <b class="header">url</b><code>collection.url or collection.url()</code>
1267      <br />
1268      Set the <b>url</b> property (or function) on a collection to reference
1269      its location on the server. Models within the collection will use <b>url</b>
1270      to construct URLs of their own.
1271    </p>
1272
1273<pre>
1274var Notes = Backbone.Collection.extend({
1275  url: '/notes'
1276});
1277
1278// Or, something more sophisticated:
1279
1280var Notes = Backbone.Collection.extend({
1281  url: function() {
1282    return this.document.url() + '/notes';
1283  }
1284});
1285</pre>
1286
1287    <p id="Collection-parse">
1288      <b class="header">parse</b><code>collection.parse(response)</code>
1289      <br />
1290      <b>parse</b> is called by Backbone whenever a collection's models are
1291      returned by the server, in <a href="#Collection-fetch">fetch</a>.
1292      The function is passed the raw <tt>response</tt> object, and should return
1293      the array of model attributes to be <a href="#Collection-add">added</a>
1294      to the collection. The default implementation is a no-op, simply passing
1295      through the JSON response. Override this if you need to work with a
1296      preexisting API, or better namespace your responses.
1297    </p>
1298
1299<pre>
1300var Tweets = Backbone.Collection.extend({
1301  // The Twitter Search API returns tweets under "results".
1302  parse: function(response) {
1303    return response.results;
1304  }
1305});
1306</pre>
1307
1308    <p id="Collection-fetch">
1309      <b class="header">fetch</b><code>collection.fetch([options])</code>
1310      <br />
1311      Fetch the default set of models for this collection from the server,
1312      refreshing the collection when they arrive. The <b>options</b> hash takes
1313      <tt>success</tt> and <tt>error</tt>
1314      callbacks which will be passed <tt>(collection, response)</tt> as arguments.
1315      When the model data returns from the server, the collection will
1316      <a href="#Collection-reset">reset</a>.
1317      Delegates to <a href="#Sync">Backbone.sync</a>
1318      under the covers, for custom persistence strategies.
1319      The server handler for <b>fetch</b> requests should return a JSON array of
1320      models.
1321    </p>
1322
1323<pre class="runnable">
1324Backbone.sync = function(method, model) {
1325  alert(method + ": " + model.url);
1326};
1327
1328var Accounts = new Backbone.Collection;
1329Accounts.url = '/accounts';
1330
1331Accounts.fetch();
1332</pre>
1333
1334    <p>
1335      If you'd like to add the incoming models to the current collection, instead
1336      of replacing the collection's contents, pass <tt>{add: true}</tt> as an
1337      option to <b>fetch</b>.
1338    </p>
1339    
1340    <p>
1341      <b>jQuery.ajax</b> options can also be passed directly as <b>fetch</b> options, 
1342      so to fetch a specific page of a paginated collection: 
1343      <tt>Documents.fetch({data: {page: 3}})</tt>
1344    </p>
1345
1346    <p>
1347      Note that <b>fetch</b> should not be used to populate collections on
1348      page load &mdash; all models needed at load time should already be
1349      <a href="#FAQ-bootstrap">bootstrapped</a> in to place. <b>fetch</b> is
1350      intended for lazily-loading models for interfaces that are not needed
1351      immediately: for example, documents with collections of notes that may be
1352      toggled open and closed.
1353    </p>
1354
1355    <p id="Collection-reset">
1356      <b class="header">reset</b><code>collection.reset(models, [options])</code>
1357      <br />
1358      Adding and removing models one at a time is all well and good, but sometimes
1359      you have so many models to change that you'd rather just update the collection
1360      in bulk. Use <b>reset</b> to replace a collection with a new list
1361      of models (or attribute hashes), triggering a single <tt>"reset"</tt> event
1362      at the end. Pass <tt>{silent: true}</tt> to suppress the <tt>"reset"</tt> event.
1363      Using reset with no arguments is useful as a way to empty the collection.
1364    </p>
1365
1366    <p>
1367      Here's an example using <b>reset</b> to bootstrap a collection during initial page load,
1368      in a Rails application.
1369    </p>
1370
1371<pre>
1372&lt;script&gt;
1373  Accounts.reset(&lt;%= @accounts.to_json %&gt;);
1374&lt;/script&gt;
1375</pre>
1376
1377    <p>
1378      Calling <tt>collection.reset()</tt> without passing any models as arguments
1379      will empty the entire collection.
1380    </p>
1381
1382    <p id="Collection-create">
1383      <b class="header">create</b><code>collection.create(attributes, [options])</code>
1384      <br />
1385      Convenience to create a new instance of a model within a collection.
1386      Equivalent to instantiating a model with a hash of attributes,
1387      saving the model to the server, and adding the model to the set after being
1388      successfully created. Returns
1389      the model, or <tt>false</tt> if a validation error prevented the
1390      model from being created. In order for this to work, your should set the
1391      <a href="#Collection-model">model</a> property of the collection.
1392      The <b>create</b> method can accept either an attributes hash or an 
1393      existing, unsaved model object.
1394    </p>
1395
1396<pre>
1397var Library = Backbone.Collection.extend({
1398  model: Book
1399});
1400
1401var NYPL = new Library;
1402
1403var othello = NYPL.create({
1404  title: "Othello",
1405  author: "William Shakespeare"
1406});
1407</pre>
1408
1409    <h2 id="Router">Backbone.Router</h2>
1410
1411    <p>
1412      Web applications often choose to change their URL fragment (<tt>#fragment</tt>)
1413      in order to provide shareable, bookmarkable URLs for an Ajax-heavy application.
1414      <b>Backbone.Router</b> provides methods for routing client-side URL
1415      fragments, and connecting them to actions and events.
1416    </p>
1417
1418    <p>
1419      During page load, after your application has finished creating all of its routers,
1420      be sure to call <tt>Backbone.history.start()</tt>, or 
1421      <tt>Backbone.history.start({pushState: true})</tt> to route the initial URL.
1422    </p>
1423
1424    <p id="Router-extend">
1425      <b class="header">extend</b><code>Backbone.Router.extend(properties, [classProperties])</code>
1426      <br />
1427      Get started by creating a custom router class. You'll
1428      want to define actions that are triggered when certain URL fragments are
1429      matched, and provide a <a href="#Router-routes">routes</a> hash
1430      that pairs routes to actions.
1431    </p>
1432
1433<pre>
1434var Workspace = Backbone.Router.extend({
1435
1436  routes: {
1437    "help":                 "help",    // #help
1438    "search/:query":        "search",  // #search/kiwis
1439    "search/:query/p:page": "search"   // #search/kiwis/p7
1440  },
1441
1442  help: function() {
1443    ...
1444  },
1445
1446  search: function(query, page) {
1447    ...
1448  }
1449
1450});
1451</pre>
1452
1453    <p id="Router-routes">
1454      <b class="header">routes</b><code>router.routes</code>
1455      <br />
1456      The routes hash maps URLs with parameters to functions on your router,
1457      similar to the <a href="#View">View</a>'s <a href="#View-delegateEvents">events hash</a>.
1458      Routes can contain parameter parts, <tt>:param</tt>, which match a single URL
1459      component between slashes; and splat parts <tt>*splat</tt>, which can match
1460      any number of URL components.
1461    </p>
1462
1463    <p>
1464      For example, a route of <tt>"search/:query/p:page"</tt> will match
1465      a fragment of <tt>#search/obama/p2</tt>, passing <tt>"obama"</tt>
1466      and <tt>"2"</tt> to the action. A route of <tt>"file/*path"</tt> will
1467      match <tt>#file/nested/folder/file.txt</tt>,
1468      passing <tt>"nested/folder/file.txt"</tt> to the action.
1469    </p>
1470
1471    <p>
1472      When the visitor presses the back button, or enters a URL, and a particular
1473      route is matched, the name of the action will be fired as an
1474      <a href="#Events">event</a>, so that other objects can listen to the router,
1475      and be notified. In the following example, visiting <tt>#help/uploading</tt>
1476      will fire a <tt>route:help</tt> event from the router.
1477    </p>
1478
1479<pre>
1480routes: {
1481  "help/:page":         "help",
1482  "download/*path":     "download",
1483  "folder/:name":       "openFolder",
1484  "folder/:name-:mode": "openFolder"
1485}
1486</pre>
1487
1488<pre>
1489router.bind("route:help", function(page) {
1490  ...
1491});
1492</pre>
1493
1494    <p id="Router-constructor">
1495      <b class="header">constructor / initialize</b><code>new Router([options])</code>
1496      <br />
1497      When creating a new router, you may pass its
1498      <a href="#Router-routes">routes</a> hash directly as an option, if you
1499      choose. All <tt>options</tt> will also be passed to your <tt>initialize</tt>
1500      function, if defined.
1501    </p>
1502
1503    <p id="Router-route">
1504      <b class="header">route</b><code>router.route(route, name, callback)</code>
1505      <br />
1506      Manually create a route for the router, The <tt>route</tt> argument may
1507      be a <a href="#Router-routes">routing string</a> or regular expression.
1508      Each matching capture from the route or regular expression will be passed as
1509      an argument to the callback. The <tt>name</tt> argument will be triggered as
1510      a <tt>"route:name"</tt> event whenever the route is matched.
1511    </p>
1512
1513<pre>
1514initialize: function(options) {
1515
1516  // Matches #page/10, passing "10"
1517  this.route("page/:number", "page", function(number){ ... });
1518
1519  // Matches /117-a/b/c/open, passing "117-a/b/c"
1520  this.route(/^(.*?)\/open$/, "open", function(id){ ... });
1521
1522}
1523</pre>
1524
1525    <p id="Router-saveLocation">
1526      <b class="header">saveLocation</b><code>router.saveLocation(fragment)</code>
1527      <br />
1528      Whenever you reach a point in your application that you'd like to save
1529      as a URL, call <b>saveLocation</b> in order to update the URL fragment
1530      without triggering a <tt>hashchange</tt> event. (If you would prefer to
1531      trigger the event and routing, you can just set the hash directly.)
1532    </p>
1533
1534<pre>
1535openPage: function(pageNumber) {
1536  this.document.pages.at(pageNumber).open();
1537  this.saveLocation("page/" + pageNumber);
1538}
1539</pre>
1540
1541    <p id="Router-setLocation">
1542      <b class="header">setLocation</b><code>router.setLocation(fragment)</code>
1543      <br />
1544      Just like <a href="#Router-saveLocation">saveLocation</a>, but also triggers
1545      your route action at the same time. Useful if you want to transition to a page
1546      where no state serialization is necessary, like a simple string.
1547    </p>
1548    
1549<pre>
1550app.setLocation("help/troubleshooting");
1551</pre>
1552
1553    <h2 id="History">Backbone.history</h2>
1554
1555    <p>
1556      <b>History</b> serves as a global router (per frame) to handle <tt>hashchange</tt>
1557      events, match the appropriate route, and trigger callbacks. You shouldn't
1558      ever have to create one of these yourself &mdash; you should use the reference
1559      to <tt>Backbone.history</tt> that will be created for you automatically if you make use
1560      of <a href="#Router">Routers</a> with <a href="#Router-routes">routes</a>.
1561    </p>
1562
1563    <p id="History-start">
1564      <b class="header">start</b><code>Backbone.history.start()</code>
1565      <br />
1566      When all of your <a href="#Router">Routers</a> have been created,
1567      and all of the routes are set up properly, call <tt>Backbone.history.start()</tt>
1568      to begin monitoring <tt>hashchange</tt> events, and dispatching routes.
1569    </p>
1570    
1571    <p>
1572      When called, if a route succeeds with a match for the current URL, 
1573      <tt>Backbone.history.start()</tt> returns <tt>true</tt>. If no defined 
1574      routes matches the current URL fragment, it returns <tt>false</tt>.
1575    </p>
1576
1577<pre>
1578$(function(){
1579  new WorkspaceRouter();
1580  new HelpPaneRouter();
1581  Backbone.history.start();
1582});
1583</pre>
1584
1585    <h2 id="Sync">Backbone.sync</h2>
1586
1587    <p>
1588      <b>Backbone.sync</b> is the function the Backbone calls every time it
1589      attempts to read or save a model to the server. By default, it uses
1590      <tt>(jQuery/Zepto).ajax</tt> to make a RESTful JSON request. You can override
1591      it in order to use a different persistence strategy, such as WebSockets,
1592      XML transport, or Local Storage.
1593    </p>
1594
1595    <p>
1596      The method signature of <b>Backbone.sync</b> is <tt>sync(method, model, success, error)</tt>
1597    </p>
1598
1599    <ul>
1600      <li><b>method</b> – the CRUD method (<tt>"create"</tt>, <tt>"read"</tt>, <tt>"update"</tt>, or <tt>"delete"</tt>)</li>
1601      <li><b>model</b> – the model to be saved (or collection to be read)</li>
1602      <li><b>success({model: ...})</b> – a callback that should be fired if the request works</li>
1603      <li><b>error({model: ...})</b> – a callback that should be fired if the request fails</li>
1604    </ul>
1605
1606    <p>
1607      With the default implementation, when <b>Backbone.sync</b> sends up a request to save
1608      a model, its attributes will be passed, serialized as JSON, and sent in the HTTP body
1609      with content-type <tt>application/json</tt>. When returning a JSON response,
1610      send down the attributes of the  model that have been changed by the server, and need
1611      to be updated on the client. When responding to a <tt>"read"</tt> request from a collection
1612      (<a href="#Collection#fetch">Collection#fetch</a>), send down an array
1613      of model attribute objects.
1614    </p>
1615
1616    <p>
1617      The default <b>sync</b> handler maps CRUD to REST like so:
1618    </p>
1619
1620    <ul>
1621      <li><b>create &rarr; POST &nbsp; </b><tt>/collection</tt></li>
1622      <li><b>read &rarr; GET &nbsp; </b><tt>/collection[/id]</tt></li>
1623      <li><b>update &rarr; PUT &nbsp; </b><tt>/collection/id</tt></li>
1624      <li><b>delete &rarr; DELETE &nbsp; </b><tt>/collection/id</tt></li>
1625    </ul>
1626
1627    <p>
1628      As an example, a Rails handler responding to an <tt>"update"</tt> call from
1629      <tt>Backbone</tt> might look like this: <i>(In real code, never use
1630      </i><tt>update_attributes</tt><i> blindly, and always whitelist the attributes
1631      you allow to be changed.)</i>
1632    </p>
1633
1634<pre>
1635def update
1636  account = Account.find params[:id]
1637  account.update_attributes params
1638  render :json => account
1639end
1640</pre>
1641
1642    <p>
1643      One more tip for Rails integration is to disable the default namespacing for
1644      <tt>to_json</tt> calls on models by setting <tt>ActiveRecord::Base.include_root_in_json = false</tt>
1645    </p>
1646
1647    <p id="Sync-emulateHTTP">
1648      <b class="header">emulateHTTP</b><code>Backbone.emulateHTTP = true</code>
1649      <br />
1650      If you want to work with a legacy web server that doesn't support Backbones's
1651      default REST/HTTP approach, you may choose to turn on <tt>Backbone.emulateHTTP</tt>.
1652      Setting this option will fake <tt>PUT</tt> and <tt>DELETE</tt> requests with
1653      a HTTP <tt>POST</tt>, and pass them under the <tt>_method</tt> parameter. Setting this option
1654      will also set an <tt>X-HTTP-Method-Override</tt> header with the true method.
1655    </p>
1656
1657<pre>
1658Backbone.emulateHTTP = true;
1659
1660model.save();  // POST to "/collection/id", with "_method=PUT" + header.
1661</pre>
1662
1663    <p id="Sync-emulateJSON">
1664      <b class="header">emulateJSON</b><code>Backbone.emulateJSON = true</code>
1665      <br />
1666      If you're working with a legacy web server that can't handle requests
1667      encoded as <tt>application/json</tt>, setting <tt>Backbone.emulateJSON = true;</tt>
1668      will cause the JSON to be serialized under a <tt>model</tt> parameter, and
1669      the request to be made with a <tt>application/x-www-form-urlencoded</tt>
1670      mime type, as if from an HTML form.
1671    </p>
1672
1673    <h2 id="View">Backbone.View</h2>
1674
1675    <p>
1676      Backbone views are almost more convention than they are code &mdash; they
1677      don't determine anything about your HTML or CSS for you, and can be used
1678      with any JavaScript templating library.
1679      The general idea is to organize your interface into logical views,
1680      backed by models, each of which can be updated independently when the
1681      model changes, without having to redraw the page. Instead of digging into
1682      a JSON object, looking up an element in the DOM, and updating the HTML by hand,
1683      you can bind your view's <tt>render</tt> function to the model's <tt>"change"</tt>
1684      event &mdash; and now everywhere that
1685      model data is displayed in the UI, it is always immediately up to date.
1686    </p>
1687
1688    <p id="View-extend">
1689      <b class="header">extend</b><code>Backbone.View.extend(properties, [classProperties])</code>
1690      <br />
1691      Get started with views by creating a custom view class. You'll want to
1692      override the <a href="#View-render">render</a> function, specify your
1693      declarative <a href="#View-delegateEvents">events</a>, and perhaps the
1694      <tt>tagName</tt>, <tt>className</tt>, or <tt>id</tt> of the View's root
1695      element.
1696    </p>
1697
1698<pre>
1699var DocumentRow = Backbone.View.extend({
1700
1701  tagName: "li",
1702
1703  className: "document-row",
1704
1705  events: {
1706    "click .icon":          "open",
1707    "click .button.edit":   "openEditDialog",
1708    "click .button.delete": "destroy"
1709  },
1710
1711  initialize: function() {
1712    _.bindAll(this, "render");
1713  },
1714
1715  render: function() {
1716    ...
1717  }
1718
1719});
1720</pre>
1721
1722    <p id="View-constructor">
1723      <b class="header">constructor / initialize</b><code>new View([options])</code>
1724      <br />
1725      When creating a new View, the options you pass are attached to the view
1726      as <tt>this.options</tt>, for future reference. There are several special
1727      options that, if passed, will be attached directly to the view:
1728      <tt>model</tt>, <tt>collection</tt>,
1729      <tt>el</tt>, <tt>id</tt>, <tt>className</tt>, and <tt>tagName</tt>.
1730      If the view defines an <b>initialize</b> function, it will be called when
1731      the view is first created. If you'd like to create a view that references
1732      an element <i>already</i> in the DOM, pass in the element as an option:
1733      <tt>new View({el: existingElement})</tt>
1734    </p>
1735
1736<pre>
1737var doc = Documents.first();
1738
1739new DocumentRow({
1740  model: doc,
1741  id: "document-row-" + doc.id
1742});
1743</pre>
1744
1745    <p id="View-el">
1746      <b class="header">el</b><code>view.el</code>
1747      <br />
1748      All views have a DOM element at all times (the <b>el</b> property),
1749      whether they've already been inserted into the page or not. In this
1750      fashion, views can be rendered at any time, and inserted into the DOM all
1751      at once, in order to get high-performance UI rendering with as few
1752      reflows and repaints as possible. <tt>this.el</tt> is created from the
1753      view's <tt>tagName</tt>, <tt>className</tt>, and <tt>id</tt> properties,
1754      if specified. If not, <b>el</b> is an empty <tt>div</tt>.
1755    </p>
1756
1757    <p>
1758      You may assign <b>el</b> directly if the view is being
1759      created for an element that already exists in the DOM. Use either a
1760      reference to a real DOM element, or a css selector string.
1761    </p>
1762
1763<pre class="runnable">
1764var ItemView = Backbone.View.extend({
1765  tagName: 'li'
1766});
1767
1768var BodyView = Backbone.View.extend({
1769  el: 'body'
1770});
1771
1772var item = new ItemView();
1773var body = new BodyView();
1774
1775alert(item.el + ' ' + body.el);
1776</pre>
1777
1778    <p id="View-dollar">
1779      <b class="header">$ (jQuery or Zepto)</b><code>view.$(selector)</code>
1780      <br />
1781      If jQuery or Zepto is included on the page, each view has a
1782      <b>$</b> function that runs queries scoped within the view's element. If you use this
1783      scoped jQuery function, you don't have to use model ids as part of your query
1784      to pull out specific elements in a list, and can rely much more on HTML class
1785      attributes. It's equivalent to running: <tt>$(selector, this.el)</tt>
1786    </p>
1787
1788<pre>
1789ui.Chapter = Backbone.View.extend({
1790  serialize : function() {
1791    return {
1792      title: this.$(".title").text(),
1793      start: this.$(".start-page").text(),
1794      end:   this.$(".end-page").text()
1795    };
1796  }
1797});
1798</pre>
1799
1800    <p id="View-render">
1801      <b class="header">render</b><code>view.render()</code>
1802      <br />
1803      The default implementation of <b>render</b> is a no-op. Override this
1804      function with your code that renders the view template from model data,
1805      and updates <tt>this.el</tt> with the new HTML. A good
1806      convention is to <tt>return this</tt> at the end of <b>render</b> to
1807      enable chained calls.
1808    </p>
1809
1810<pre>
1811var Bookmark = Backbone.View.extend({
1812  render: function() {
1813    $(this.el).html(this.template(this.model.toJSON()));
1814    return this;
1815  }
1816});
1817</pre>
1818
1819    <p>
1820      Backbone is agnostic with respect to your preferred method of HTML templating.
1821      Your <b>render</b> function could even munge together an HTML string, or use
1822      <tt>document.createElement</tt> to generate a DOM tree. However, we suggest
1823      choosing a nice JavaScript templating library.
1824      <a href="http://github.com/janl/mustache.js">Mustache.js</a>,
1825      <a href="http://github.com/creationix/haml-js">Haml-js</a>, and
1826      <a href="http://github.com/sstephenson/eco">Eco</a> are all fine alternatives.
1827      Because <a href="http://documentcloud.github.com/underscore/">Underscore.js</a> is already on the page,
1828      <a href="http://documentcloud.github.com/underscore/#template">_.template</a>
1829      is available, and is an excellent choice if you've already XSS-sanitized
1830      your interpolated data.
1831    </p>
1832
1833    <p>
1834      Whatever templating strategy you end up with, it's nice if you <i>never</i>
1835      have to put strings of HTML in your JavaScript. At DocumentCloud, we
1836      use <a href="http://documentcloud.github.com/jammit/">Jammit</a> in order
1837      to package up JavaScript templates stored in <tt>/app/views</tt> as part
1838      of our main <tt>core.js</tt> asset package.
1839    </p>
1840
1841    <p id="View-remove">
1842      <b class="header">remove</b><code>view.remove()</code>
1843      <br />
1844      Convenience function for removing the view from the DOM. Equivalent to calling
1845      <tt>$(view.el).remove();</tt>
1846    </p>
1847
1848    <p id="View-make">
1849      <b class="header">make</b><code>view.make(tagName, [attributes], [content])</code>
1850      <br />
1851      Convenience function for creating a DOM element of the given type (<b>tagName</b>),
1852      with optional attributes and HTML content. Used internally to create the
1853      initial <tt>view.el</tt>.
1854    </p>
1855
1856<pre class="runnable">
1857var view = new Backbone.View;
1858
1859var el = view.make("b", {className: "bold"}, "Bold! ");
1860
1861$("#make-demo").append(el);
1862</pre>
1863
1864<div id="make-demo"></div>
1865
1866    <p id="View-delegateEvents">
1867      <b class="header">delegateEvents</b><code>delegateEvents([events])</code>
1868      <br />
1869      Uses jQuery's <tt>delegate</tt> function to provide declarative callbacks
1870      for DOM events within a view.
1871      If an <b>events</b> hash is not passed directly, uses <tt>this.events</tt>
1872      as the source. Events are written in the format <tt>{"event selector": "callback"}</tt>.
1873      Omitting the <tt>selector</tt> causes the event to be bound to the view's
1874      root element (<tt>this.el</tt>). By default, <tt>delegateEvents</tt> is called
1875      within the View's constructor for you, so if you have a simple <tt>events</tt>
1876      hash, all of your DOM events will always already be connected, and you will
1877      never have to call this function yourself.
1878    </p>
1879
1880    <p>
1881      Using <b>delegateEvents</b> provides a number of advantages over manually
1882      using jQuery to bind events to child elements during <a href="#View-render">render</a>. All attached
1883      callbacks are bound to the view before being handed off to jQuery, so when
1884      the callbacks are invoked, <tt>this</tt> continues to refer to the view object. When
1885      <b>delegateEvents</b> is run again, perhaps with a different <tt>events</tt>
1886      hash, all callbacks are removed and delegated afresh &mdash; useful for
1887      views which need to behave differently when in different modes.
1888    </p>
1889
1890    <p>
1891      A view that displays a document in a search result might look
1892      something like this:
1893    </p>
1894
1895<pre>
1896var DocumentView = Backbone.View.extend({
1897
1898  events: {
1899    "dblclick"                : "open",
1900    "click .icon.doc"         : "select",
1901    "contextmenu .icon.doc"   : "showMenu",
1902    "click .show_notes"       : "toggleNotes",
1903    "click .title .lock"      : "editAccessLevel",
1904    "mouseover .title .date"  : "showTooltip"
1905  },
1906
1907  render: function() {
1908    $(this.el).html(this.template(this.model.toJSON()));
1909    return this;
1910  },
1911
1912  open: function() {
1913    window.open(this.model.get("viewer_url"));
1914  },
1915
1916  select: function() {
1917    this.model.set({selected: true});
1918  },
1919
1920  ...
1921
1922});
1923</pre>
1924
1925    <h2 id="Utility">Utility Functions</h2>
1926
1927    <p>
1928      
1929    </p>
1930
1931    <p id="Utility-noConflict">
1932      <b class="header">noConflict</b><code>var backbone = Backbone.noConflict();</code>
1933      <br />
1934      Returns the <tt>Backbone</tt> object back to its original value. You can
1935      use the return value of <tt>Backbone.noConflict()</tt> to keep a local
1936      reference to Backbone. Useful for embedding Backbone on third-party
1937      websites, where you don't want to clobber the existing Backbone.
1938    </p>
1939
1940<pre>
1941var localBackbone = Backbone.noConflict();
1942var model = localBackbone.Model.extend(...);
1943</pre>
1944
1945    <h2 id="examples">Examples</h2>
1946
1947    <p id="examples-todos">
1948      <a href="http://jgn.me/">Jérôme Gravel-Niquet</a> has contributed a
1949      <a href="examples/todos/index.html">Todo List application</a>
1950      that is bundled in the repository as Backbone example. If you're wondering
1951      where to get started with Backbone in general, take a moment to
1952      <a href="docs/todos.html">read through the annotated source</a>. The app uses a
1953      <a href="docs/backbone-localstorage.html">LocalStorage adapter</a>
1954      to transparently save all of your todos within your browser, instead of
1955      sending them to a server. Jérôme also has a version hosted at
1956      <a href="http://localtodos.com/">localtodos.com</a> that uses a
1957      <a href="http://github.com/jeromegn/backbone-mootools">MooTools-backed version of Backbone</a>
1958      instead of jQuery.
1959    </p>
1960
1961    <div style="text-align: center;">
1962      <a href="examples/todos/index.html">
1963        <img src="docs/images/todos.png" alt="Todos" class="example_image" />
1964      </a>
1965    </div>
1966    
1967    <h2 id="examples-documentcloud">DocumentCloud</h2>
1968
1969    <p>
1970      The <a href="http://www.documentcloud.org/public/#search/">DocumentCloud workspace</a>
1971      is built on Backbone.js, with <i>Documents</i>, <i>Projects</i>,
1972      <i>Notes</i>, and <i>Accounts</i> all as Backbone models and collections.
1973      If you're interested in history &mdash; both Underscore.js and Backbone.js
1974      were originally extracted from the DocumentCloud codebase, and packaged 
1975      into standalone JS libraries.
1976    </p>
1977
1978    <div style="text-align: center;">
1979      <a href="http://www.documentcloud.org/public/#search/">
1980        <img src="docs/images/dc-workspace.png" alt="DocumentCloud Workspace" class="example_image" />
1981      </a>
1982    </div>
1983    
1984    <h2 id="examples-basecamp">Basecamp Mobile</h2>
1985
1986    <p>
1987      <a href="http://37signals.com/">37Signals</a> used Backbone.js to create
1988      <a href="http://basecamphq.com/mobile">Basecamp Mobile</a>, the mobile version
1989      of their popular project management software. You can access all your Basecamp
1990      projects, post new messages, and comment on milestones (all represented
1991      internally as Backbone.js models).
1992    </p>
1993
1994    <div style="text-align: center;">
1995      <a href="http://basecamphq.com/mobile">
1996        <img src="docs/images/basecamp-mobile.png" alt="Basecamp Mobile" class="example_image" />
1997      </a>
1998    </div>
1999    
2000    <h2 id="examples-flow">Flow</h2>
2001    
2002    <p>
2003      <a href="http://www.metalabdesign.com/">MetaLab</a> used Backbone.js to create
2004      <a href="http://www.getflow.com/">Flow</a>, a task management app for teams. The
2005      workspace relies on Backbone.js to construct task views, activities, accounts, 
2006      folders, projects, and tags. You can see the internals under <tt>window.Flow</tt>.
2007    </p>
2008
2009    <div style="text-align: center;">
2010      <a href="http://www.getflow.com/">
2011        <img src="docs/images/flow.png" alt="Flow" class="example_image" />
2012      </a>
2013    </div>
2014    
2015    <h2 id="examples-cloudapp">CloudApp</h2>
2016    
2017    <p>
2018      <a href="http://getcloudapp.com">CloudApp</a> is simple file and link 
2019      sharing for the Mac. Backbone.js powers the web tools
2020      which consume the <a href="http://developer.getcloudapp.com">documented API</a> 
2021      to manage Drops. Data is either pulled manually or pushed by 
2022      <a href="http://pusher.com">Pusher</a> and fed to 
2023      <a href="http://github.com/janl/mustache.js">Mustache</a> templates for 
2024      rendering. Check out the <a href="http://cloudapp.github.com/engine">annotated source code</a> 
2025      to see the magic.
2026    </p>
2027
2028    <div style="text-align: center;">
2029      <a href="http://getcloudapp.com">
2030        <img src="docs/images/cloudapp.png" alt="CloudApp" class="example_image" />
2031      </a>
2032    </div>
2033    
2034    <h2 id="examples-SoundCloud">SoundCloud</h2>
2035
2036    <p>
2037      <a href="http://soundcloud.com">SoundCloud</a> is the leading sound sharing 
2038      platform on the internet, and Backbone.js provides the foundation for 
2039      <a href="http://m.soundcloud.com">Mobile SoundCloud</a>. The project uses 
2040      the public SoundCloud <a href="http://soundcloud.com/developers">API</a> 
2041      as a data source (channeled through a nginx proxy), 
2042      <a href="http://api.jquery.com/category/plugins/templates/">jQuery templates</a> 
2043      for the rendering, <a href="http://docs.jquery.com/Qunit">Qunit
2044      </a> and <a href="http://code.google.com/p/phantomjs/">PhantomJS</a> for 
2045      the testing suite. The JS code, templates and CSS are built for the 
2046      production deployment with various Node.js tools like 
2047      <a href="https://github.com/dsimard/ready.js">ready.js</a>, 
2048      <a href="https://github.com/mde/node-jake">Jake</a>, 
2049      <a href="https://github.com/tmpvar/jsdom">jsdom</a>. 
2050      The <b>Backbone.History</b> was modified to support the HTML5 <tt>history.pushState</tt>. 
2051      <b>Backbone.sync</b> was extended with an additional SessionStorage based cache 
2052      layer.
2053    </p>
2054
2055    <div style="text-align: center;">
2056      <a href="http://m.soundcloud.com">
2057        <img src="docs/images/soundcloud.png" alt="SoundCloud" class="example_image" />
2058      </a>
2059    </div>
2060    
2061    <h2 id="examples-tilemill">TileMill</h2>
2062    
2063    <p>
2064      Our fellow
2065      <a href="http://www.newschallenge.org/">Knight Foundation News Challenge</a>
2066      winners, <a href="http://mapbox.com/">MapBox</a>, created an open-source
2067      map design studio with Backbone.js:
2068      <a href="http://mapbox.github.com/tilemill/">TileMill</a>.
2069      TileMill lets you manage map layers based on shapefiles and rasters, and
2070      edit their appearance directly in the browser with the
2071      <a href="https://github.com/mapbox/carto">Carto styling language</a>.
2072      Note that the gorgeous <a href="http://mapbox.com/">MapBox</a> homepage
2073      is also a Backbone.js app.
2074    </p>
2075
2076    <div style="text-align: center;">
2077      <a href="http://mapbox.github.com/tilemill/">
2078        <img src="docs/images/tilemill.png" alt="TileMill" class="example_image" />
2079      </a>
2080    </div>
2081    
2082    <h2 id="examples-instagreat">Insta-Great!</h2>
2083    
2084    <p>
2085      <a href="http://twitter.com/elliottkember">Elliott Kember</a> and
2086      <a href="http://twitter.com/dizzyup">Hector Simpson</a> built
2087      <a href="http://instagre.at">Insta-great!</a>
2088      - a fun way to explore popular photos and interact with
2089      <a href="http://instagram.com/">Instagram</a> on the web.
2090      Elliott says, "Backbone.js and Coffeescript were insanely useful for
2091      writing clean, consistent UI code and keeping everything modular and
2092      readable, even through several code refactors. I'm in love."
2093    </p>
2094
2095    <div style="text-align: center;">
2096      <a href="http://instagre.at">
2097        <img src="docs/images/instagreat.png" alt="instagre.at" class="example_image" />
2098      </a>
2099    </div>
2100    
2101    <h2 id="examples-BitTorrent">BitTorrent &ndash; Project Chrysalis</h2>
2102    
2103    <p>
2104      <a href="http://www.bittorrent.com">BitTorrent</a> used Backbone to 
2105      completely rework an existing Win32 UI. Models normalize access to the 
2106      client's data and views rely heavily on the <tt>change</tt> events to keep 
2107      the UI state current. Using Backbone and SCSS, 
2108      <a href="http://www.bittorrent.com/chrysalis/">our new design</a> and UX 
2109      prototypes are considerably easier to iterate, test and work with than 
2110      the original Win32 UI.
2111    </p>
2112
2113    <div style="text-align: center;">
2114      <a href="http://www.bittorrent.com/chrysalis/">
2115        <img src="docs/images/bittorrent.jpg" alt="BitTorrent" class="example_image" />
2116      </a>
2117    </div>
2118    
2119    <h2 id="examples-chop">Chop</h2>
2120    
2121    <p>
2122      <a href="http://chopapp.com/">Chop</a> is a little app from 
2123      <a href="http://www.zurb.com/">ZURB</a> that lets people slice up bad code 
2124      and share their feedback to help put it back together. 
2125      Chop was built to demonstrate how easy it is to build pageless apps 
2126      using Backbone.js and Rails. Chop makes extensive use of Backbone <b>Views</b>, 
2127      <b>Controllers</b>, and <b>Models</b>.
2128    </p>
2129    
2130    <div style="text-align: center;">
2131      <a href="http://chopapp.com/">
2132        <img src="docs/images/chop.png" alt="Chop" class="example_image" />
2133      </a>
2134    </div>
2135    
2136    <h2 id="examples-quietwrite">QuietWrite</h2>
2137
2138    <p>
2139      <a href="http://www.twitter.com/jamesjyu">James Yu</a> used Backbone.js to
2140      create <a href="http://www.quietwrite.com/">QuietWrite</a>, an app
2141      that gives writers a clean and quiet interface to concentrate on the text itself.
2142      The editor relies on Backbone to persist document data to the server. He
2143      followed up with a Backbone.js + Rails tutorial that describes how to implement
2144      <a href="http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/">CloudEdit, a simple document editing app</a>.
2145    </p>
2146
2147    <div style="text-align: center;">
2148      <a href="http://www.quietwrite.com/">
2149        <img src="docs/images/quietwrite.png" alt="QuietWrite" class="example_image" />
2150      </a>
2151    </div>
2152    
2153    <h2 id="examples-tzigla">Tzigla</h2>
2154
2155    <p>
2156      <a href="http://twitter.com/evilchelu">Cristi Balan</a> and
2157      <a href="http://dira.ro">Irina Dumitrascu</a> created
2158      <a href="http://tzigla.com">Tzigla</a>, a collaborative drawing
2159      application where artists make tiles that connect to each other to
2160      create <a href="http://tzigla.com/boards/1">surreal drawings</a>.
2161      Backbone models help organize the code, routers provide
2162      <a href="http://tzigla.com/boards/1#!/tiles/2-2">bookmarkable deep links</a>,
2163      and the views are rendered with
2164      <a href="https://github.com/creationix/haml-js">haml.js</a> and
2165      <a href="http://zeptojs.com/">Zepto</a>.
2166      Tzigla is written in Ruby (Rails) on the backend, and
2167      <a href="http://coffeescript.org">CoffeeScript</a> on the frontend, with
2168      <a href="http://documentcloud.github.com/jammit/">Jammit</a>
2169      prepackaging the static assets.
2170    </p>
2171
2172    <div style="text-align: center;">
2173      <a href="http://www.tzigla.com/">
2174        <img src="docs/images/tzigla.png" alt="Tzigla" class="example_image" />
2175      </a>
2176    </div>
2177    
2178    <h2 id="examples-substance">Substance</h2>
2179    
2180    <p>
2181      Michael Aufreiter is building an open source document authoring and 
2182      publishing engine: <a href="http://substance.io">Substance</a>. 
2183      Substance makes use of Backbone.View and Backbone.Router, while 
2184      Backbone plays well together with 
2185      <a href="http://github.com/michael/data">Data.js</a>, which is used for 
2186      data persistence.
2187    </p>
2188
2189    <div style="text-align: center;">
2190      <a href="http://substance.io/">
2191        <img src="docs/images/substance.png" alt="Substance" class="example_image" />
2192      </a>
2193    </div>
2194
2195    <h2 id="faq">F.A.Q.</h2>
2196
2197    <p id="FAQ-events">
2198      <b class="header">Catalog of Events</b>
2199      <br />
2200      Here's a list of all of the built-in events that Backbone.js can fire.
2201      You're also free to trigger your own events on Models and Views as you
2202      see fit.
2203    </p>
2204
2205    <ul>
2206      <li><b>"add"</b> (model, collection) &mdash; when a model is added to a collection. </li>
2207      <li><b>"remove"</b> (model, collection) &mdash; when a model is removed from a collection. </li>
2208      <li><b>"reset"</b> (collection) &mdash; when the collection's entire contents have been replaced. </li>
2209      <li><b>"change"</b> (model, collection) &mdash; when a model's attributes have changed. </li>
2210      <li><b>"change:[attribute]"</b> (model, collection) &mdash; when a specific attribute has been updated. </li>
2211      <li><b>"destrooy"</b> (model, collection) &mdash; when a model is <a href="#Model-destroy">destroyed</a>. </li>
2212      <li><b>"error"</b> (model, collection) &mdash; when a model's validation fails, or a <a href="#Model-save">save</a> call fails on the server. </li>
2213      <li><b>"route:[name]"</b> (router) &mdash; when one of a router's routes has matched. </li>
2214      <li><b>"all"</b> &mdash; this special event fires for <i>any</i> triggered event, passing the event name as the first argument. </li>
2215    </ul>
2216
2217    <p id="FAQ-nested">
2218      <b class="header">Nested Models &amp; Collections</b>
2219      <br />
2220      It's common to nest collections inside of models with Backbone. For example,
2221      consider a <tt>Mailbox</tt> model that contains many <tt>Message</tt> models.
2222      One nice pattern for handling this is have a <tt>this.messages</tt> collection
2223      for each mailbox, enabling the lazy-loading of messages, when the mailbox
2224      is first opened ... perhaps with <tt>MessageList</tt> views listening for
2225      <tt>"add"</tt> and <tt>"remove"</tt> events.
2226    </p>
2227
2228<pre>
2229var Mailbox = Backbone.Model.extend({
2230
2231  initialize: function() {
2232    this.messages = new Messages;
2233    this.messages.url = '/mailbox/' + this.id + '/messages';
2234    this.messages.bind("reset", this.updateCounts);
2235  },
2236
2237  ...
2238
2239});
2240
2241var Inbox = new Mailbox;
2242
2243// And then, when the Inbox is opened:
2244
2245Inbox.messages.fetch();
2246</pre>
2247
2248    <p id="FAQ-bootstrap">
2249      <b class="header">Loading Bootstrapped Models</b>
2250      <br />
2251      When your app first loads, it's common to have a set of initial models that
2252      you know you're going to need, in order to render the page. Instead of
2253      firing an extra AJAX request to <a href="#Collection-fetch">fetch</a> them,
2254      a nicer pattern is to have their data already bootstrapped into the page.
2255      You can then use <a href="#Collection-reset">reset</a> to populate your
2256      collections with the initial data. At DocumentCloud, in the
2257      <a href="http://en.wikipedia.org/wiki/ERuby">ERB</a> template for the
2258      workspace, we do something along these lines:
2259    </p>
2260
2261<pre>
2262&lt;script&gt;
2263  Accounts.reset(&lt;%= @accounts.to_json %&gt;);
2264  Projects.reset(&lt;%= @projects.to_json(:collaborators => true) %&gt;);
2265&lt;/script&gt;
2266</pre>
2267
2268    <p id="FAQ-mvc">
2269      <b class="header">How does Backbone relate to "traditional" MVC?</b>
2270      <br />
2271      Different implementations of the
2272      <a href="http://en.wikipedia.org/wiki/Model–View–Controller">Model-View-Controller</a>
2273      pattern tend to disagree about the definition of a controller. If it helps any, in
2274      Backbone, the <a href="#View">View</a> class can also be thought of as a
2275      kind of controller, dispatching events that originate from the UI, with
2276      the HTML template serving as the true view. We call it a View because it
2277      represents a logical chunk of UI, responsible for the contents of a single
2278      DOM element.
2279    </p>
2280    
2281    <p>
2282      Comparing the overall structure of Backbone to a server-side MVC framework
2283      like <b>Rails</b>, the pieces line up like so:
2284    </p>
2285    
2286    <ul>
2287      <li>
2288        <b>Backbone.Model</b> &ndash; Like a Rails model minus the class 
2289        methods. Wraps a row of data in business logic.
2290      </li>
2291      <li>
2292        <b>Backbone.Collection</b> &ndash; A group of models on the client-side,
2293        with sorting/filtering/aggregation logic.
2294      </li>
2295      <li>
2296        <b>Backbone.Router</b> &ndash; Rails <tt>routes.rb</tt> + Rails controller
2297        actions. Maps URLs to functions.
2298      </li>
2299      <li>
2300        <b>Backbone.View</b> &ndash; A logical, re-usable piece of UI. Often,
2301        but not always, associated with a model.
2302      </li>
2303      <li>
2304        <b>Client-side Templates</b> &ndash; Rails <tt>.html.erb</tt> views, 
2305        rendering a chunk of HTML.
2306      </li>
2307    </ul>
2308
2309    <p id="FAQ-this">
2310      <b class="header">Binding "this"</b>
2311      <br />
2312      Perhaps the single most common JavaScript "gotcha" is the fact that when
2313      you pass a function as a callback, it's value for <tt>this</tt> is lost. With
2314      Backbone, when dealing with <a href="#Events">events</a> and callbacks,
2315      you'll often find it useful to rely on
2316      <a href="http://documentcloud.github.com/underscore/#bind">_.bind</a> and
2317      <a href="http://documentcloud.github.com/underscore/#bindAll">_.bindAll</a>
2318      from Underscore.js. <tt>_.bind</tt> takes a function and an object to be
2319      used as <tt>this</tt>, any time the function is called in the future.
2320      <tt>_.bindAll</tt> takes an object and a list of method names: each method
2321      in the list will be bound to the object, so that it's <tt>this</tt> may
2322      not change. For example, in a <a href="#View">View</a> that listens for
2323      changes to a collection...
2324    </p>
2325
2326<pre>
2327var MessageList = Backbone.View.extend({
2328
2329  initialize: function() {
2330    _.bindAll(this, "addMessage", "removeMessage", "render");
2331
2332    var messages = this.collection;
2333    messages.bind("reset", this.render);
2334    messages.bind("add", this.addMessage);
2335    messages.bind("remove", this.removeMessage);
2336  }
2337
2338});
2339
2340// Later, in the app...
2341
2342Inbox.messages.add(newMessage);
2343</pre>
2344
2345    <p id="FAQ-rias">
2346      <b class="header">
2347        How is Backbone different than
2348        <a href="http://www.sproutcore.com/">SproutCore</a> or
2349        <a href="http://cappuccino.org/">Cappuccino</a>?
2350      </b>
2351      <br />
2352      This question is frequently asked, and all three projects apply general
2353      <a href="http://en.wikipedia.org/wiki/Model–View–Controller">Model-View-Controller</a>
2354      principles to JavaScript applications. However, there isn't much basis
2355      for comparison. SproutCore and Cappuccino provide rich UI widgets, vast
2356      core libraries, and determine the structure of your HTML for you.
2357      Both frameworks measure in the hundreds of kilobytes when packed and
2358      gzipped, and megabytes of JavaScript, CSS, and images when loaded in the browser
2359      &mdash; there's a lot of room underneath for libraries of a more moderate scope.
2360      Backbone is a <i>4 kilobyte</i> include that provides
2361      just the core concepts of models, events, collections, views, controllers,
2362      and persistence.
2363    </p>
2364
2365    <h2 id="changelog">Change Log</h2>
2366
2367    <p>
2368      <b class="header">0.4.0</b> &mdash; <small><i>FUTURE DATE, 2011</i></small><br />
2369      <tt>Collection.refresh</tt> renamed to <tt>Collection.reset</tt> to emphasize
2370      its ability to both refresh the collection with new models, as well as empty
2371      out the collection when used with no parameters.
2372    </p>
2373    
2374    <p>
2375      <b class="header">0.3.3</b> &mdash; <small><i>Dec 1, 2010</i></small><br />
2376      Backbone.js now supports <a href="http://zeptojs.com">Zepto</a>, alongside
2377      jQuery, as a framework for DOM manipulation and Ajax support.
2378      Implemented <a href="#Model-escape">Model#escape</a>, to efficiently handle
2379      attributes intended for HTML interpolation. When trying to persist a model,
2380      failed requests will now trigger an <tt>"error"</tt> event. The
2381      ubiquitous <tt>options</tt> argument is now passed as the final argument
2382      to all <tt>"change"</tt> events.
2383    </p>
2384
2385    <p>
2386      <b class="header">0.3.2</b> &mdash; <small><i>Nov 23, 2010</i></small><br />
2387      Bugfix for IE7 + iframe-based "hashchange" events. <tt>sync</tt> may now be
2388      overridden on a per-model, or per-collection basis. Fixed recursion error
2389      when calling <tt>save</tt> with no changed attributes, within a
2390      <tt>"change"</tt> event.
2391    </p>
2392
2393    <p>
2394      <b class="header">0.3.1</b> &mdash; <small><i>Nov 15, 2010</i></small><br />
2395      All <tt>"add"</tt> and <tt>"remove"</tt> events are now sent through the
2396      model, so that views can listen for them without having to know about the
2397      collection. Added a <tt>remove</tt> method to <a href="#View">Backbone.View</a>.
2398      <tt>toJSON</tt> is no longer called at all for <tt>'read'</tt> and <tt>'delete'</tt> requests.
2399      Backbone routes are now able to load empty URL fragments.
2400    </p>
2401
2402    <p>
2403      <b class="header">0.3.0</b> &mdash; <small><i>Nov 9, 2010</i></small><br />
2404      Backbone now has <a href="#Controller">Controllers</a> and
2405      <a href="#History">History</a>, for doing client-side routing based on
2406      URL fragments.
2407      Added <tt>emulateHTTP</tt> to provide support for legacy servers that don't
2408      do <tt>PUT</tt> and <tt>DELETE</tt>.
2409      Added <tt>emulateJSON</tt> for servers that can't accept <tt>application/json</tt>
2410      encoded requests.
2411      Added <a href="#Model-clear">Model#clear</a>, which removes all attributes
2412      from a model.
2413      All Backbone classes may now be seamlessly inherited by CoffeeScript classes.
2414    </p>
2415
2416    <p>
2417      <b class="header">0.2.0</b> &mdash; <small><i>Oct 25, 2010</i></small><br />
2418      Instead of requiring server responses to be namespaced under a <tt>model</tt>
2419      key, now you can define your own <a href="#Model-parse">parse</a> method
2420      to convert responses into attributes for Models and Collections.
2421      The old <tt>handleEvents</tt> function is now named
2422      <a href="#View-delegateEvents">delegateEvents</a>, and is automatically
2423      called as part of the View's constructor.
2424      Added a <a href="#Collection-toJSON">toJSON</a> function to Collections.
2425      Added <a href="#Collection-chain">Underscore's chain</a> to Collections.
2426    </p>
2427
2428    <p>
2429      <b class="header">0.1.2</b> &mdash; <small><i>Oct 19, 2010</i></small><br />
2430      Added a <a href="#Model-fetch">Model#fetch</a> method for refreshing the
2431      attributes of single model from the server.
2432      An <tt>error</tt> callback may now be passed to <tt>set</tt> and <tt>save</tt>
2433      as an option, which will be invoked if validation fails, overriding the
2434      <tt>"error"</tt> event.
2435      You can now tell backbone to use the <tt>_method</tt> hack instead of HTTP
2436      methods by setting <tt>Backbone.emulateHTTP = true</tt>.
2437      Existing Model and Collection data is no longer sent up unnecessarily with
2438      <tt>GET</tt> and <tt>DELETE</tt> requests. Added a <tt>rake lint</tt> task.
2439      Backbone is now published as an <a href="http://npmjs.org">NPM</a> module.
2440    </p>
2441
2442    <p>
2443      <b class="header">0.1.1</b> &mdash; <small><i>Oct 14, 2010</i></small><br />
2444      Added a convention for <tt>initialize</tt> functions to be called
2445      upon instance construction, if defined. Documentation tweaks.
2446    </p>
2447
2448    <p>
2449      <b class="header">0.1.0</b> &mdash; <small><i>Oct 13, 2010</i></small><br />
2450      Initial Backbone release.
2451    </p>
2452
2453    <p>
2454      <br />
2455      <a href="http://documentcloud.org/" title="A DocumentCloud Project" style="background:none;">
2456        <img src="http://jashkenas.s3.amazonaws.com/images/a_documentcloud_project.png" alt="A DocumentCloud Project" style="position:relative;left:-10px;" />
2457      </a>
2458    </p>
2459
2460  </div>
2461
2462  <script src="test/vendor/underscore-1.1.6.js"></script>
2463  <script src="test/vendor/jquery-1.5.js"></script>
2464  <script src="test/vendor/json2.js"></script>
2465  <script src="backbone.js"></script>
2466
2467  <script>
2468    // Set up the "play" buttons for each runnable code example.
2469    $(function() {
2470      $('.runnable').each(function() {
2471        var code = this;
2472        var button = $('<div class="run" title="Run"></div>');
2473        $(button).insertBefore(code).bind('click', function(){
2474          eval($(code).text());
2475        });
2476      });
2477    });
2478  </script>
2479
2480</body>
2481</html>