PageRenderTime 13ms CodeModel.GetById 7ms app.highlight 54ms RepoModel.GetById 1ms app.codeStats 1ms

/index.html

Relevant Search: With Applications for Solr and Elasticsearch

For more in depth reading about search, ranking and generally everything you could ever want to know about how lucene, elasticsearch or solr work under the hood I highly suggest this book. Easily one of the most interesting technical books I have read in a long time. If you are tasked with solving search relevance problems even if not in Solr or Elasticsearch it should be your first reference. Amazon Affiliate Link
https://github.com/jcteague/backbone
HTML | 3667 lines | 3177 code | 490 blank | 0 comment | 0 complexity | 1752e03d6946d58868d3999a0886457d MD5 | raw file

Large files files are truncated, but you can click here to view the full 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  <link rel="icon" href="docs/images/favicon.ico" />
   7  <title>Backbone.js</title>
   8  <style>
   9    body {
  10      font-size: 14px;
  11      line-height: 22px;
  12      font-family: Helvetica Neue, Helvetica, Arial;
  13      background: #f4f4f4 url(docs/images/background.png);
  14    }
  15    .interface {
  16      font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
  17    }
  18    div#sidebar {
  19      background: #fff;
  20      position: fixed;
  21      top: 0; left: 0; bottom: 0;
  22      width: 200px;
  23      overflow-y: auto;
  24      overflow-x: hidden;
  25      padding: 15px 0 30px 30px;
  26      border-right: 1px solid #bbb;
  27      box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; -moz-box-shadow: 0 0 20px #ccc;
  28    }
  29      a.toc_title, a.toc_title:visited {
  30        display: block;
  31        color: black;
  32        font-weight: bold;
  33        margin-top: 15px;
  34      }
  35        a.toc_title:hover {
  36          text-decoration: underline;
  37        }
  38        #sidebar .version {
  39          font-size: 10px;
  40          font-weight: normal;
  41        }
  42      ul.toc_section {
  43        font-size: 11px;
  44        line-height: 14px;
  45        margin: 5px 0 0 0;
  46        padding-left: 0px;
  47        list-style-type: none;
  48        font-family: Lucida Grande;
  49      }
  50        .toc_section li {
  51          cursor: pointer;
  52          margin: 0 0 3px 0;
  53        }
  54          .toc_section li a {
  55            text-decoration: none;
  56            color: black;
  57          }
  58            .toc_section li a:hover {
  59              text-decoration: underline;
  60            }
  61    div.container {
  62      position: relative;
  63      width: 550px;
  64      margin: 40px 0 50px 260px;
  65    }
  66    div.run {
  67      position: absolute;
  68      right: 15px;
  69      width: 26px; height: 18px;
  70      background: url('docs/images/arrows.png') no-repeat -26px 0;
  71    }
  72      div.run:active {
  73        background-position: -51px 0;
  74      }
  75    p, div.container ul {
  76      margin: 25px 0;
  77      width: 550px;
  78    }
  79      p.warning {
  80        font-size: 12px;
  81        line-height: 18px;
  82        font-style: italic;
  83      }
  84      div.container ul {
  85        list-style: circle;
  86        padding-left: 15px;
  87        font-size: 13px;
  88        line-height: 18px;
  89      }
  90        div.container ul li {
  91          margin-bottom: 10px;
  92        }
  93        div.container ul.small {
  94          font-size: 12px;
  95        }
  96    a, a:visited {
  97      color: #444;
  98    }
  99    a:active, a:hover {
 100      color: #000;
 101    }
 102    a.punch {
 103      display: inline-block;
 104      background: #4162a8;
 105      border-top: 1px solid #38538c;
 106      border-right: 1px solid #1f2d4d;
 107      border-bottom: 1px solid #151e33;
 108      border-left: 1px solid #1f2d4d;
 109      -webkit-border-radius: 4px;
 110      -moz-border-radius: 4px;
 111      -ms-border-radius: 4px;
 112      -o-border-radius: 4px;
 113      border-radius: 4px;
 114      -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 115      -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 116      -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 117      -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 118      box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 119      color: #fff;
 120      font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
 121      line-height: 1;
 122      margin-bottom: 15px;
 123      padding: 8px 0 10px 0;
 124      text-align: center;
 125      text-shadow: 0px -1px 1px #1e2d4d;
 126      text-decoration: none;
 127      width: 225px;
 128      -webkit-background-clip: padding-box; }
 129      a.punch:hover {
 130        -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 131        -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 132        -ms-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 133        -o-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 134        box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 135        cursor: pointer; }
 136      a.punch:active {
 137        -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 138        -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 139        -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 140        -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 141        box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 142        margin-top: 5px; margin-bottom: 10px }
 143    a img {
 144      border: 0;
 145    }
 146    h1, h2, h3, h4, h5, h6 {
 147      padding-top: 20px;
 148    }
 149      h2 {
 150        font-size: 22px;
 151      }
 152    b.header {
 153      font-size: 18px;
 154      line-height: 35px;
 155    }
 156    span.alias {
 157      font-size: 14px;
 158      font-style: italic;
 159      margin-left: 20px;
 160    }
 161    table {
 162      margin: 15px 0 0; padding: 0;
 163    }
 164      tr, td {
 165        margin: 0; padding: 0;
 166      }
 167        td {
 168          padding: 0px 15px 5px 0;
 169        }
 170    code, pre, tt {
 171      font-family: Monaco, Consolas, "Lucida Console", monospace;
 172      font-size: 12px;
 173      line-height: 18px;
 174      font-style: normal;
 175    }
 176      tt {
 177        padding: 0px 3px;
 178        background: #fff;
 179        border: 1px solid #ddd;
 180        zoom: 1;
 181      }
 182      code {
 183        margin-left: 20px;
 184      }
 185      pre {
 186        font-size: 12px;
 187        padding: 2px 0 2px 15px;
 188        border: 4px solid #bbb; border-top: 0; border-bottom: 0;
 189        margin: 0px 0 25px;
 190      }
 191      img.example_image {
 192        margin: 0px auto;
 193      }
 194  </style>
 195</head>
 196<body>
 197
 198  <div id="sidebar" class="interface">
 199
 200    <a class="toc_title" href="#">
 201      Backbone.js <span class="version">(0.9.2)</span>
 202    </a>
 203    <ul class="toc_section">
 204      <li>&raquo; <a href="http://github.com/documentcloud/backbone">GitHub Repository</a></li>
 205      <li>&raquo; <a href="docs/backbone.html">Annotated Source</a></li>
 206    </ul>
 207
 208    <a class="toc_title" href="#introduction">
 209      Introduction
 210    </a>
 211
 212    <a class="toc_title" href="#upgrading">
 213      Upgrading
 214    </a>
 215
 216    <a class="toc_title" href="#Events">
 217      Events
 218    </a>
 219    <ul class="toc_section">
 220      <li><a href="#Events-on">on</a></li>
 221      <li><a href="#Events-off">off</a></li>
 222      <li><a href="#Events-trigger">trigger</a></li>
 223    </ul>
 224
 225    <a class="toc_title" href="#Model">
 226      Model
 227    </a>
 228    <ul class="toc_section">
 229      <li><a href="#Model-extend">extend</a></li>
 230      <li><a href="#Model-constructor">constructor / initialize</a></li>
 231      <li><a href="#Model-get">get</a></li>
 232      <li><a href="#Model-set">set</a></li>
 233      <li><a href="#Model-escape">escape</a></li>
 234      <li><a href="#Model-has">has</a></li>
 235      <li><a href="#Model-unset">unset</a></li>
 236      <li><a href="#Model-clear">clear</a></li>
 237      <li><a href="#Model-id">id</a></li>
 238      <li><a href="#Model-idAttribute">idAttribute</a></li>
 239      <li><a href="#Model-cid">cid</a></li>
 240      <li><a href="#Model-attributes">attributes</a></li>
 241      <li><a href="#Model-changed">changed</a></li>
 242      <li><a href="#Model-defaults">defaults</a></li>
 243      <li><a href="#Model-toJSON">toJSON</a></li>
 244      <li><a href="#Model-fetch">fetch</a></li>
 245      <li><a href="#Model-save">save</a></li>
 246      <li><a href="#Model-destroy">destroy</a></li>
 247      <li><a href="#Model-validate">validate</a></li>
 248      <li><a href="#Model-isValid">isValid</a></li>
 249      <li><a href="#Model-url">url</a></li>
 250      <li><a href="#Model-urlRoot">urlRoot</a></li>
 251      <li><a href="#Model-parse">parse</a></li>
 252      <li><a href="#Model-clone">clone</a></li>
 253      <li><a href="#Model-isNew">isNew</a></li>
 254      <li><a href="#Model-change">change</a></li>
 255      <li><a href="#Model-hasChanged">hasChanged</a></li>
 256      <li><a href="#Model-changedAttributes">changedAttributes</a></li>
 257      <li><a href="#Model-previous">previous</a></li>
 258      <li><a href="#Model-previousAttributes">previousAttributes</a></li>
 259    </ul>
 260
 261    <a class="toc_title" href="#Collection">
 262      Collection
 263    </a>
 264    <ul class="toc_section">
 265      <li><a href="#Collection-extend">extend</a></li>
 266      <li><a href="#Collection-model">model</a></li>
 267      <li><a href="#Collection-constructor">constructor / initialize</a></li>
 268      <li><a href="#Collection-models">models</a></li>
 269      <li><a href="#Collection-toJSON">toJSON</a></li>
 270      <li><a href="#Collection-Underscore-Methods"><b>Underscore Methods (28)</b></a></li>
 271      <li><a href="#Collection-add">add</a></li>
 272      <li><a href="#Collection-remove">remove</a></li>
 273      <li><a href="#Collection-get">get</a></li>
 274      <li><a href="#Collection-getByCid">getByCid</a></li>
 275      <li><a href="#Collection-at">at</a></li>
 276      <li><a href="#Collection-push">push</a></li>
 277      <li><a href="#Collection-pop">pop</a></li>
 278      <li><a href="#Collection-unshift">unshift</a></li>
 279      <li><a href="#Collection-shift">shift</a></li>
 280      <li><a href="#Collection-length">length</a></li>
 281      <li><a href="#Collection-comparator">comparator</a></li>
 282      <li><a href="#Collection-sort">sort</a></li>
 283      <li><a href="#Collection-pluck">pluck</a></li>
 284      <li><a href="#Collection-where">where</a></li>
 285      <li><a href="#Collection-url">url</a></li>
 286      <li><a href="#Collection-parse">parse</a></li>
 287      <li><a href="#Collection-fetch">fetch</a></li>
 288      <li><a href="#Collection-reset">reset</a></li>
 289      <li><a href="#Collection-create">create</a></li>
 290    </ul>
 291
 292    <a class="toc_title" href="#Router">
 293      Router
 294    </a>
 295    <ul class="toc_section">
 296      <li><a href="#Router-extend">extend</a></li>
 297      <li><a href="#Router-routes">routes</a></li>
 298      <li><a href="#Router-constructor">constructor / initialize</a></li>
 299      <li><a href="#Router-route">route</a></li>
 300      <li><a href="#Router-navigate">navigate</a></li>
 301    </ul>
 302
 303    <a class="toc_title" href="#History">
 304      History
 305    </a>
 306    <ul class="toc_section">
 307      <li><a href="#History-start">start</a></li>
 308    </ul>
 309
 310    <a class="toc_title" href="#Sync">
 311      Sync
 312    </a>
 313    <ul class="toc_section">
 314      <li><a href="#Sync">Backbone.sync</a></li>
 315      <li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
 316      <li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
 317    </ul>
 318
 319    <a class="toc_title" href="#View">
 320      View
 321    </a>
 322    <ul class="toc_section">
 323      <li><a href="#View-extend">extend</a></li>
 324      <li><a href="#View-constructor">constructor / initialize</a></li>
 325      <li><a href="#View-el">el</a></li>
 326      <li><a href="#View-$el">$el</a></li>
 327      <li><a href="#View-setElement">setElement</a></li>
 328      <li><a href="#View-attributes">attributes</a></li>
 329      <li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>
 330      <li><a href="#View-render">render</a></li>
 331      <li><a href="#View-remove">remove</a></li>
 332      <li><a href="#View-make">make</a></li>
 333      <li><a href="#View-delegateEvents">delegateEvents</a></li>
 334      <li><a href="#View-undelegateEvents">undelegateEvents</a></li>
 335    </ul>
 336
 337    <a class="toc_title" href="#Utility">
 338      Utility
 339    </a>
 340    <ul class="toc_section">
 341      <li><a href="#Utility-noConflict">noConflict</a></li>
 342      <li><a href="#Utility-setDomLibrary">setDomLibrary</a></li>
 343    </ul>
 344
 345    <a class="toc_title" href="#examples">
 346      Examples
 347    </a>
 348    <ul class="toc_section">
 349      <li><a href="#examples-todos">Todos</a></li>
 350      <li><a href="#examples-documentcloud">DocumentCloud</a></li>
 351      <li><a href="#examples-linkedin">LinkedIn Mobile</a></li>
 352      <li><a href="#examples-flow">Flow</a></li>
 353      <li><a href="#examples-audiovroom">AudioVroom</a></li>
 354      <li><a href="#examples-foursquare">Foursquare</a></li>
 355      <li><a href="#examples-wunderkit">Wunderkit</a></li>
 356      <li><a href="#examples-khan-academy">Khan Academy</a></li>
 357      <li><a href="#examples-do">Do</a></li>
 358      <li><a href="#examples-posterous">Posterous Spaces</a></li>
 359      <li><a href="#examples-groupon">Groupon Now!</a></li>
 360      <li><a href="#examples-basecamp">Basecamp Mobile</a></li>
 361      <li><a href="#examples-slavery-footprint">Slavery Footprint</a></li>
 362      <li><a href="#examples-stripe">Stripe</a></li>
 363      <li><a href="#examples-airbnb">Airbnb Mobile</a></li>
 364      <li><a href="#examples-diaspora">Diaspora</a></li>
 365      <li><a href="#examples-soundcloud">SoundCloud Mobile</a></li>
 366      <li><a href="#examples-pandora">Pandora</a></li>
 367      <li><a href="#examples-code-school">Code School</a></li>
 368      <li><a href="#examples-cloudapp">CloudApp</a></li>
 369      <li><a href="#examples-seatgeek">SeatGeek</a></li>
 370      <li><a href="#examples-grove">Grove.io</a></li>
 371      <li><a href="#examples-kicksend">Kicksend</a></li>
 372      <li><a href="#examples-shortmail">Shortmail</a></li>
 373      <li><a href="#examples-battlefield">Battlefield Play4Free</a></li>
 374      <li><a href="#examples-salon">Salon.io</a></li>
 375      <li><a href="#examples-tilemill">TileMill</a></li>
 376      <li><a href="#examples-blossom">Blossom</a></li>
 377      <li><a href="#examples-animoto">Animoto</a></li>
 378      <li><a href="#examples-chaincal">ChainCal</a></li>
 379      <li><a href="#examples-attictv">AtticTV</a></li>
 380      <li><a href="#examples-decide">Decide</a></li>
 381      <li><a href="#examples-editd">EDITD</a></li>
 382      <li><a href="#examples-trello">Trello</a></li>
 383      <li><a href="#examples-ducksboard">Ducksboard</a></li>
 384      <li><a href="#examples-quietwrite">QuietWrite</a></li>
 385      <li><a href="#examples-tzigla">Tzigla</a></li>
 386    </ul>
 387
 388    <a class="toc_title" href="#faq">
 389      F.A.Q.
 390    </a>
 391    <ul class="toc_section">
 392      <li><a href="#FAQ-events">Catalog of Events</a></li>
 393      <li><a href="#FAQ-tim-toady">More Than One Way To Do It</a></li>
 394      <li><a href="#FAQ-nested">Nested Models &amp; Collections</a></li>
 395      <li><a href="#FAQ-bootstrap">Loading Bootstrapped Models</a></li>
 396      <li><a href="#FAQ-extending">Extending Backbone</a></li>
 397      <li><a href="#FAQ-mvc">Traditional MVC</a></li>
 398      <li><a href="#FAQ-this">Binding "this"</a></li>
 399      <li><a href="#FAQ-rails">Working with Rails</a></li>
 400    </ul>
 401
 402    <a class="toc_title" href="#changelog">
 403      Change Log
 404    </a>
 405
 406  </div>
 407
 408  <div class="container">
 409
 410    <p>
 411      <img style="width: 451px; height: 80px;" src="docs/images/backbone.png" alt="Backbone.js" />
 412    </p>
 413
 414    <p>
 415      Backbone.js gives structure to web applications
 416      by providing <b>models</b> with key-value binding and custom events,
 417      <b>collections</b> with a rich API of enumerable functions,
 418      <b>views</b> with declarative event handling, and connects it all to your
 419      existing API over a RESTful JSON interface.
 420    </p>
 421
 422    <p>
 423      The project is <a href="http://github.com/documentcloud/backbone/">hosted on GitHub</a>,
 424      and the <a href="docs/backbone.html">annotated source code</a> is available,
 425      as well as an online <a href="test/test.html">test suite</a>,
 426      an <a href="examples/todos/index.html">example application</a>,
 427      a <a href="https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites">list of tutorials</a>
 428      and a <a href="#examples">long list of real-world projects</a> that use Backbone.
 429      Backbone is available for use under the <a href="http://github.com/documentcloud/backbone/blob/master/LICENSE">MIT software license</a>.
 430    </p>
 431
 432    <p>
 433      You can report bugs and discuss features on the
 434      <a href="http://github.com/documentcloud/backbone/issues">GitHub issues page</a>,
 435      on Freenode IRC in the <tt>#documentcloud</tt> channel, post questions to the
 436      <a href="https://groups.google.com/forum/#!forum/backbonejs">Google Group</a>,
 437      add pages to the <a href="https://github.com/documentcloud/backbone/wiki">wiki</a>
 438      or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
 439    </p>
 440
 441    <p>
 442      <i>
 443        Backbone is an open-source component of
 444        <a href="http://documentcloud.org/">DocumentCloud</a>.
 445      </i>
 446    </p>
 447
 448    <h2 id="downloads">
 449      Downloads &amp; Dependencies
 450      <span style="padding-left: 7px; font-size:11px; font-weight: normal;" class="interface">(Right-click, and use "Save As")</span>
 451    </h2>
 452
 453    <table>
 454      <tr>
 455        <td><a class="punch" href="backbone.js">Development Version (0.9.2)</a></td>
 456        <td><i>52kb, Full source, lots of comments</i></td>
 457      </tr>
 458      <tr>
 459        <td><a class="punch" href="backbone-min.js">Production Version (0.9.2)</a></td>
 460        <td><i>5.6kb, Packed and gzipped</i></td>
 461      </tr>
 462    </table>
 463
 464    <p>
 465      Backbone's only hard dependency is
 466      <a href="http://documentcloud.github.com/underscore/">Underscore.js</a> <small>( > 1.3.1)</small>.
 467      For RESTful persistence, history support via <a href="#Router">Backbone.Router</a>
 468      and DOM manipulation with <a href="#View">Backbone.View</a>, include
 469      <a href="https://github.com/douglascrockford/JSON-js">json2.js</a>, and either
 470      <a href="http://jquery.com">jQuery</a> <small>( > 1.4.2)</small> or
 471      <a href="http://zeptojs.com/">Zepto</a>.
 472    </p>
 473
 474    <h2 id="introduction">Introduction</h2>
 475
 476    <p>
 477      When working on a web application that involves a lot of JavaScript, one
 478      of the first things you learn is to stop tying your data to the DOM. It's all
 479      too easy to create JavaScript applications that end up as tangled piles of
 480      jQuery selectors and callbacks, all trying frantically to keep data in
 481      sync between the HTML UI, your JavaScript logic, and the database on your
 482      server. For rich client-side applications, a more structured approach
 483      is often helpful.
 484    </p>
 485
 486    <p>
 487      With Backbone, you represent your data as
 488      <a href="#Model">Models</a>, which can be created, validated, destroyed,
 489      and saved to the server. Whenever a UI action causes an attribute of
 490      a model to change, the model triggers a <i>"change"</i> event; all
 491      the <a href="#View">Views</a> that display the model's state can be notified of the
 492      change, so that they are able to respond accordingly, re-rendering themselves with
 493      the new information. In a finished Backbone app, you don't have to write the glue
 494      code that looks into the DOM to find an element with a specific <i>id</i>,
 495      and update the HTML manually
 496      &mdash; when the model changes, the views simply update themselves.
 497    </p>
 498
 499    <p>
 500      If you're new here, and aren't yet quite sure what Backbone is for, start by
 501      browsing the <a href="#examples">list of Backbone-based projects</a>.
 502    </p>
 503
 504    <p>
 505      Many of the examples that follow are runnable. Click the <i>play</i> button
 506      to execute them.
 507    </p>
 508
 509    <h2 id="upgrading">Upgrading to 0.9</h2>
 510
 511    <p>
 512      Backbone's <b>0.9</b> series should be considered as a release candidate
 513      for an upcoming <b>1.0</b>. Some APIs have changed, and while there is a
 514      <a href="#changelog">change log</a> available, and many new features to
 515      take advantage of, there are a few specific changes where you'll need
 516      to take care:
 517    </p>
 518
 519    <ul>
 520      <li>
 521        If you've ever manually set <tt>this.el</tt> in a Backbone View to be a
 522        particular DOM element, you'll want to use
 523        <a href="#View-setElement">setElement</a> instead.
 524      </li>
 525      <li>
 526        Creating and destroying models is now optimistic. Pass <tt>{wait: true}</tt>
 527        if you need the previous behavior of waiting for the server to acknowledge
 528        success. You can now also pass <tt>{wait: true}</tt> to <a href="#Model-save">save</a> calls.
 529      </li>
 530      <li>
 531        If you have been writing a fair amount of <tt>$(view.el)</tt>, there's now
 532        a cached reference for that jQuery object: <a href="#View-$el">$el</a>.
 533      </li>
 534      <li>
 535        If you're upgrading, make sure you also upgrade your version of Underscore.js
 536        to the latest &mdash; 1.3.1 or greater.
 537      </li>
 538      <li>
 539        <tt>model.set</tt> will no longer trigger change events when setting a value
 540        with <tt>{silent: true}</tt> then setting it back to its original value.
 541        Similarly, after changing an attribute silently, that <tt>change:attribute</tt>
 542        event <i>will</i> fire during the next change.
 543      </li>
 544      <li>
 545        Since <tt>view.$(selector)</tt> is now equivalent to <tt>view.$el.find(selector)</tt>
 546        rather than <tt>$(selector, view.el)</tt> it can no longer be used when
 547        <tt>selector</tt> is an HTML string or DOM element.
 548      </li>
 549    </ul>
 550
 551    <h2 id="Events">Backbone.Events</h2>
 552
 553    <p>
 554      <b>Events</b> is a module that can be mixed in to any object, giving the
 555      object the ability to bind and trigger custom named events. Events do not
 556      have to be declared before they are bound, and may take passed arguments.
 557      For example:
 558    </p>
 559
 560<pre class="runnable">
 561var object = {};
 562
 563_.extend(object, Backbone.Events);
 564
 565object.on("alert", function(msg) {
 566  alert("Triggered " + msg);
 567});
 568
 569object.trigger("alert", "an event");
 570</pre>
 571
 572    <p>
 573      For example, to make a handy event dispatcher that can coordinate events
 574      among different areas of your application: <tt>var dispatcher = _.clone(Backbone.Events)</tt>
 575    </p>
 576
 577    <p id="Events-on">
 578      <b class="header">on</b><code>object.on(event, callback, [context])</code><span class="alias">Alias: bind</span>
 579      <br />
 580      Bind a <b>callback</b> function to an object. The callback will be invoked
 581      whenever the <b>event</b> is fired.
 582      If you have a large number of different events on a page, the convention is to use colons to
 583      namespace them: <tt>"poll:start"</tt>, or <tt>"change:selection"</tt>.
 584      The event string may also be a space-delimited list of several events...
 585    </p>
 586
 587<pre>
 588book.on("change:title change:author", ...);
 589</pre>
 590
 591    <p>
 592      To supply a <b>context</b> value for <tt>this</tt> when the callback is invoked,
 593      pass the optional third argument: <tt>model.on('change', this.render, this)</tt>
 594    </p>
 595
 596    <p>
 597      Callbacks bound to the special
 598      <tt>"all"</tt> event will be triggered when any event occurs, and are passed
 599      the name of the event as the first argument. For example, to proxy all events
 600      from one object to another:
 601    </p>
 602
 603<pre>
 604proxy.on("all", function(eventName) {
 605  object.trigger(eventName);
 606});
 607</pre>
 608
 609    <p id="Events-off">
 610      <b class="header">off</b><code>object.off([event], [callback], [context])</code><span class="alias">Alias: unbind</span>
 611      <br />
 612      Remove a previously-bound <b>callback</b> function from an object. If no
 613      <b>context</b> is specified, all of the versions of the callback with
 614      different contexts will be removed. If no
 615      callback is specified, all callbacks for the <b>event</b> will be
 616      removed. If no event is specified, <i>all</i> event callbacks on the object
 617      will be removed.
 618    </p>
 619
 620<pre>
 621// Removes just the `onChange` callback.
 622object.off("change", onChange);
 623
 624// Removes all "change" callbacks.
 625object.off("change");         
 626
 627// Removes the `onChange` callback for all events.
 628object.off(null, onChange);
 629
 630// Removes all callbacks for `context` for all events.
 631object.off(null, null, context);
 632
 633// Removes all callbacks on `object`.
 634object.off();
 635</pre>
 636
 637    <p id="Events-trigger">
 638      <b class="header">trigger</b><code>object.trigger(event, [*args])</code>
 639      <br />
 640      Trigger callbacks for the given <b>event</b>, or space-delimited list of events.
 641      Subsequent arguments to <b>trigger</b> will be passed along to the
 642      event callbacks.
 643    </p>
 644
 645    <h2 id="Model">Backbone.Model</h2>
 646
 647    <p>
 648      <b>Models</b> are the heart of any JavaScript application, containing
 649      the interactive data as well as a large part of the logic surrounding it:
 650      conversions, validations, computed properties, and access control. You
 651      extend <b>Backbone.Model</b> with your domain-specific methods, and
 652      <b>Model</b> provides a basic set of functionality for managing changes.
 653    </p>
 654
 655    <p>
 656      The following is a contrived example, but it demonstrates defining a model
 657      with a custom method, setting an attribute, and firing an event keyed
 658      to changes in that specific attribute.
 659      After running this code once, <tt>sidebar</tt> will be
 660      available in your browser's console, so you can play around with it.
 661    </p>
 662
 663<pre class="runnable">
 664var Sidebar = Backbone.Model.extend({
 665  promptColor: function() {
 666    var cssColor = prompt("Please enter a CSS color:");
 667    this.set({color: cssColor});
 668  }
 669});
 670
 671window.sidebar = new Sidebar;
 672
 673sidebar.on('change:color', function(model, color) {
 674  $('#sidebar').css({background: color});
 675});
 676
 677sidebar.set({color: 'white'});
 678
 679sidebar.promptColor();
 680</pre>
 681
 682    <p id="Model-extend">
 683      <b class="header">extend</b><code>Backbone.Model.extend(properties, [classProperties])</code>
 684      <br />
 685      To create a <b>Model</b> class of your own, you extend <b>Backbone.Model</b>
 686      and provide instance <b>properties</b>, as well as optional
 687      <b>classProperties</b> to be attached directly to the constructor function.
 688    </p>
 689
 690    <p>
 691      <b>extend</b> correctly sets up the prototype chain, so subclasses created
 692      with <b>extend</b> can be further extended and subclassed as far as you like.
 693    </p>
 694
 695<pre>
 696var Note = Backbone.Model.extend({
 697
 698  initialize: function() { ... },
 699
 700  author: function() { ... },
 701
 702  coordinates: function() { ... },
 703
 704  allowedToEdit: function(account) {
 705    return true;
 706  }
 707
 708});
 709
 710var PrivateNote = Note.extend({
 711
 712  allowedToEdit: function(account) {
 713    return account.owns(this);
 714  }
 715
 716});
 717</pre>
 718
 719    <p class="warning">
 720        Brief aside on <tt>super</tt>: JavaScript does not provide
 721        a simple way to call super &mdash; the function of the same name defined
 722        higher on the prototype chain. If you override a core function like
 723        <tt>set</tt>, or <tt>save</tt>, and you want to invoke the
 724        parent object's implementation, you'll have to explicitly call it, along these lines:
 725    </p>
 726
 727<pre>
 728var Note = Backbone.Model.extend({
 729  set: function(attributes, options) {
 730    Backbone.Model.prototype.set.call(this, attributes, options);
 731    ...
 732  }
 733});
 734</pre>
 735
 736    <p id="Model-constructor">
 737      <b class="header">constructor / initialize</b><code>new Model([attributes])</code>
 738      <br />
 739      When creating an instance of a model, you can pass in the initial values
 740      of the <b>attributes</b>, which will be <a href="#Model-set">set</a> on the
 741      model. If you define an <b>initialize</b> function, it will be invoked when
 742      the model is created.
 743    </p>
 744
 745<pre>
 746new Book({
 747  title: "One Thousand and One Nights",
 748  author: "Scheherazade"
 749});
 750</pre>
 751
 752    <p>
 753      In rare cases, if you're looking to get fancy,
 754      you may want to override <b>constructor</b>, which allows
 755      you to replace the actual constructor function for your model.
 756    </p>
 757
 758    <p id="Model-get">
 759      <b class="header">get</b><code>model.get(attribute)</code>
 760      <br />
 761      Get the current value of an attribute from the model. For example:
 762      <tt>note.get("title")</tt>
 763    </p>
 764
 765    <p id="Model-set">
 766      <b class="header">set</b><code>model.set(attributes, [options])</code>
 767      <br />
 768      Set a hash of attributes (one or many) on the model. If any of the attributes
 769      change the models state, a <tt>"change"</tt> event will be triggered, unless
 770      <tt>{silent: true}</tt> is passed as an option. Change events for specific
 771      attributes are also triggered, and you can bind to those as well, for example:
 772      <tt>change:title</tt>, and <tt>change:content</tt>. You may also pass
 773      individual keys and values.
 774    </p>
 775
 776<pre>
 777note.set({title: "March 20", content: "In his eyes she eclipses..."});
 778
 779book.set("title", "A Scandal in Bohemia");
 780</pre>
 781
 782    <p>
 783      If the model has a <a href="#Model-validate">validate</a> method,
 784      it will be validated before the attributes are set, no changes will
 785      occur if the validation fails, and <b>set</b> will return <tt>false</tt>.
 786      Otherwise, <b>set</b> returns a reference to the model.
 787      You may also pass an <tt>error</tt>
 788      callback in the options, which will be invoked instead of triggering an
 789      <tt>"error"</tt> event, should validation fail.
 790      If <tt>{silent: true}</tt> is passed as an option, the validation is deferred
 791      until the next change.
 792    </p>
 793
 794    <p id="Model-escape">
 795      <b class="header">escape</b><code>model.escape(attribute)</code>
 796      <br />
 797      Similar to <a href="#Model-get">get</a>, but returns the HTML-escaped version
 798      of a model's attribute. If you're interpolating data from the model into
 799      HTML, using <b>escape</b> to retrieve attributes will prevent
 800      <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">XSS</a> attacks.
 801    </p>
 802
 803<pre class="runnable">
 804var hacker = new Backbone.Model({
 805  name: "&lt;script&gt;alert('xss')&lt;/script&gt;"
 806});
 807
 808alert(hacker.escape('name'));
 809</pre>
 810
 811    <p id="Model-has">
 812      <b class="header">has</b><code>model.has(attribute)</code>
 813      <br />
 814      Returns <tt>true</tt> if the attribute is set to a non-null or non-undefined
 815      value.
 816    </p>
 817
 818<pre>
 819if (note.has("title")) {
 820  ...
 821}
 822</pre>
 823
 824    <p id="Model-unset">
 825      <b class="header">unset</b><code>model.unset(attribute, [options])</code>
 826      <br />
 827      Remove an attribute by deleting it from the internal attributes hash.
 828      Fires a <tt>"change"</tt> event unless <tt>silent</tt> is passed as an option.
 829    </p>
 830
 831    <p id="Model-clear">
 832      <b class="header">clear</b><code>model.clear([options])</code>
 833      <br />
 834      Removes all attributes from the model. Fires a <tt>"change"</tt> event unless
 835      <tt>silent</tt> is passed as an option.
 836    </p>
 837
 838    <p id="Model-id">
 839      <b class="header">id</b><code>model.id</code>
 840      <br />
 841      A special property of models, the <b>id</b> is an arbitrary string
 842      (integer id or UUID). If you set the <b>id</b> in the
 843      attributes hash, it will be copied onto the model as a direct property.
 844      Models can be retrieved by id from collections, and the id is used to generate
 845      model URLs by default.
 846    </p>
 847
 848    <p id="Model-idAttribute">
 849      <b class="header">idAttribute</b><code>model.idAttribute</code>
 850      <br />
 851      A model's unique identifier is stored under the <tt>id</tt> attribute.
 852      If you're directly communicating with a backend (CouchDB, MongoDB) that uses
 853      a different unique key, you may set a Model's <tt>idAttribute</tt> to
 854      transparently map from that key to <tt>id</tt>.
 855
 856<pre class="runnable">
 857var Meal = Backbone.Model.extend({
 858  idAttribute: "_id"
 859});
 860
 861var cake = new Meal({ _id: 1, name: "Cake" });
 862alert("Cake id: " + cake.id);
 863</pre>
 864    </p>
 865
 866    <p id="Model-cid">
 867      <b class="header">cid</b><code>model.cid</code>
 868      <br />
 869      A special property of models, the <b>cid</b> or client id is a unique identifier
 870      automatically assigned to all models when they're first created. Client ids
 871      are handy when the model has not yet been saved to the server, and does not
 872      yet have its eventual true <b>id</b>, but already needs to be visible in the UI.
 873      Client ids take the form: <tt>c1, c2, c3 ...</tt>
 874    </p>
 875
 876    <p id="Model-attributes">
 877      <b class="header">attributes</b><code>model.attributes</code>
 878      <br />
 879      The <b>attributes</b> property is the internal hash containing the model's
 880      state. Please use <a href="#Model-set">set</a> to update the attributes instead of modifying
 881      them directly. If you'd like to retrieve and munge a copy of the model's
 882      attributes, use <a href="#Model-toJSON">toJSON</a> instead.
 883    </p>
 884
 885    <p id="Model-changed">
 886      <b class="header">changed</b><code>model.changed</code>
 887      <br />
 888      The <b>changed</b> property is the internal hash containing all the attributes
 889      that have changed since the last <tt>"change"</tt> event was triggered.
 890      Please do not update <b>changed</b> directly.  Its state is maintained internally
 891      by <a href="#Model-set">set</a> and <a href="#Model-change">change</a>.
 892      A copy of <b>changed</b> can be acquired from
 893      <a href="#Model-changedAttributes">changedAttributes</a>.
 894    </p>
 895
 896    <p id="Model-defaults">
 897      <b class="header">defaults</b><code>model.defaults or model.defaults()</code>
 898      <br />
 899      The <b>defaults</b> hash (or function) can be used to specify the default
 900      attributes for your model. When creating an instance of the model,
 901      any unspecified attributes will be set to their default value.
 902    </p>
 903
 904<pre class="runnable">
 905var Meal = Backbone.Model.extend({
 906  defaults: {
 907    "appetizer":  "caesar salad",
 908    "entree":     "ravioli",
 909    "dessert":    "cheesecake"
 910  }
 911});
 912
 913alert("Dessert will be " + (new Meal).get('dessert'));
 914</pre>
 915
 916    <p class="warning">
 917      Remember that in JavaScript, objects are passed by reference, so if you
 918      include an object as a default value, it will be shared among all instances.
 919    </p>
 920
 921    <p id="Model-toJSON">
 922      <b class="header">toJSON</b><code>model.toJSON()</code>
 923      <br />
 924      Return a copy of the model's <a href="#Model-attributes">attributes</a> for JSON stringification.
 925      This can be used for persistence, serialization, or for augmentation before
 926      being handed off to a view. The name of this method is a bit confusing, as
 927      it doesn't actually return a JSON string &mdash; but I'm afraid that it's
 928      the way that the <a href="https://developer.mozilla.org/en/JSON#toJSON()_method">JavaScript API for <b>JSON.stringify</b> works</a>.
 929    </p>
 930
 931<pre class="runnable">
 932var artist = new Backbone.Model({
 933  firstName: "Wassily",
 934  lastName: "Kandinsky"
 935});
 936
 937artist.set({birthday: "December 16, 1866"});
 938
 939alert(JSON.stringify(artist));
 940</pre>
 941
 942    <p id="Model-fetch">
 943      <b class="header">fetch</b><code>model.fetch([options])</code>
 944      <br />
 945      Resets the model's state from the server by delegating to
 946      <a href="#Sync">Backbone.sync</a>. Returns a
 947      <a href="http://api.jquery.com/jQuery.ajax/#jqXHR">jqXHR</a>.
 948      Useful if the model has never
 949      been populated with data, or if you'd like to ensure that you have the
 950      latest server state. A <tt>"change"</tt> event will be triggered if the
 951      server's state differs from the current attributes. Accepts
 952      <tt>success</tt> and <tt>error</tt> callbacks in the options hash, which
 953      are passed <tt>(model, response)</tt> as arguments.
 954    </p>
 955
 956<pre>
 957// Poll every 10 seconds to keep the channel model up-to-date.
 958setInterval(function() {
 959  channel.fetch();
 960}, 10000);
 961</pre>
 962
 963    <p id="Model-save">
 964      <b class="header">save</b><code>model.save([attributes], [options])</code>
 965      <br />
 966      Save a model to your database (or alternative persistence layer),
 967      by delegating to <a href="#Sync">Backbone.sync</a>.  Returns a
 968      <a href="http://api.jquery.com/jQuery.ajax/#jqXHR">jqXHR</a> if
 969      validation is successful and <tt>false</tt> otherwise. The <b>attributes</b>
 970      hash (as in <a href="#Model-set">set</a>) should contain the attributes
 971      you'd like to change &mdash; keys that aren't mentioned won't be altered &mdash; but,
 972      a <i>complete representation</i> of the resource will be sent to the server.
 973      As with <tt>set</tt>, you may pass individual keys and values instead of a hash.
 974      If the model has a <a href="#Model-validate">validate</a>
 975      method, and validation fails, the model will not be saved. If the model
 976      <a href="#Model-isNew">isNew</a>, the save will be a <tt>"create"</tt>
 977      (HTTP <tt>POST</tt>), if the model already
 978      exists on the server, the save will be an <tt>"update"</tt> (HTTP <tt>PUT</tt>).
 979    </p>
 980
 981    <p>
 982      Calling <tt>save</tt> with new attributes will cause a <tt>"change"</tt>
 983      event immediately, and a <tt>"sync"</tt> event after the server has acknowledged
 984      the successful change. Pass <tt>{wait: true}</tt> if you'd like to wait
 985      for the server before setting the new attributes on the model.
 986    </p>
 987
 988    <p>
 989      In the following example, notice how our overridden version
 990      of <tt>Backbone.sync</tt> receives a <tt>"create"</tt> request
 991      the first time the model is saved and an <tt>"update"</tt>
 992      request the second time.
 993    </p>
 994
 995<pre class="runnable">
 996Backbone.sync = function(method, model) {
 997  alert(method + ": " + JSON.stringify(model));
 998  model.id = 1;
 999};
1000
1001var book = new Backbone.Model({
1002  title: "The Rough Riders",
1003  author: "Theodore Roosevelt"
1004});
1005
1006book.save();
1007
1008book.save({author: "Teddy"});
1009</pre>
1010
1011    <p>
1012      <b>save</b> accepts <tt>success</tt> and <tt>error</tt> callbacks in the
1013      options hash, which are passed <tt>(model, response)</tt> as arguments.
1014      The <tt>error</tt> callback will also be invoked if the model has a
1015      <tt>validate</tt> method, and validation fails. If a server-side
1016      validation fails, return a non-<tt>200</tt> HTTP response code, along with
1017      an error response in text or JSON.
1018    </p>
1019
1020<pre>
1021book.save("author", "F.D.R.", {error: function(){ ... }});
1022</pre>
1023
1024    <p id="Model-destroy">
1025      <b class="header">destroy</b><code>model.destroy([options])</code>
1026      <br />
1027      Destroys the model on the server by delegating an HTTP <tt>DELETE</tt>
1028      request to <a href="#Sync">Backbone.sync</a>. Returns a
1029      <a href="http://api.jquery.com/jQuery.ajax/#jqXHR">jqXHR</a> object, or
1030      <tt>false</tt> if the model <a href="#Model-isNew">isNew</a>. Accepts
1031      <tt>success</tt> and <tt>error</tt> callbacks in the options hash.
1032      Triggers a <tt>"destroy"</tt> event on the model, which will bubble up
1033      through any collections that contain it, and a <tt>"sync"</tt> event, after
1034      the server has successfully acknowledged the model's deletion. Pass
1035      <tt>{wait: true}</tt> if you'd like to wait for the server to respond
1036      before removing the model from the collection.
1037    </p>
1038
1039<pre>
1040book.destroy({success: function(model, response) {
1041  ...
1042}});
1043</pre>
1044
1045    <p id="Model-validate">
1046      <b class="header">validate</b><code>model.validate(attributes)</code>
1047      <br />
1048      This method is left undefined, and you're encouraged to override it with
1049      your custom validation logic, if you have any that can be performed
1050      in JavaScript. <b>validate</b> is called before <tt>set</tt> and
1051      <tt>save</tt>, and is passed the model attributes updated with the values
1052      from <tt>set</tt> or <tt>save</tt>.
1053      If the attributes are valid, don't return anything from <b>validate</b>;
1054      if they are invalid, return an error of your choosing. It
1055      can be as simple as a string error message to be displayed, or a complete
1056      error object that describes the error programmatically. If <b>validate</b>
1057      returns an error, <tt>set</tt> and <tt>save</tt> will not continue, and the
1058      model attributes will not be modified.
1059      Failed validations trigger an <tt>"error"</tt> event.
1060    </p>
1061
1062<pre class="runnable">
1063var Chapter = Backbone.Model.extend({
1064  validate: function(attrs) {
1065    if (attrs.end < attrs.start) {
1066      return "can't end before it starts";
1067    }
1068  }
1069});
1070
1071var one = new Chapter({
1072  title : "Chapter One: The Beginning"
1073});
1074
1075one.on("error", function(model, error) {
1076  alert(model.get("title") + " " + error);
1077});
1078
1079one.set({
1080  start: 15,
1081  end:   10
1082});
1083</pre>
1084
1085    <p>
1086      <tt>"error"</tt> events are useful for providing coarse-grained error
1087      messages at the model or collection level, but if you have a specific view
1088      that can better handle the error, you may override and suppress the event
1089      by passing an <tt>error</tt> callback directly:
1090    </p>
1091
1092<pre>
1093account.set({access: "unlimited"}, {
1094  error: function(model, error) {
1095    alert(error);
1096  }
1097});
1098</pre>
1099
1100    <p id="Model-isValid">
1101      <b class="header">isValid</b><code>model.isValid()</code>
1102      <br />
1103      Models may enter an invalid state if you make changes to them silently
1104      ... useful when dealing with form input. Call <tt>model.isValid()</tt>
1105      to check if the model is currently in a valid state, according to your
1106      <tt>validate</tt> function.
1107    </p>
1108
1109    <p id="Model-url">
1110      <b class="header">url</b><code>model.url()</code>
1111      <br />
1112      Returns the relative URL where the model's resource would be located on
1113      the server. If your models are located somewhere else, override this method
1114      with the correct logic. Generates URLs of the form: <tt>"/[collection.url]/[id]"</tt>,
1115      falling back to <tt>"/[urlRoot]/id"</tt> if the model is not part of a collection.
1116    </p>
1117
1118    <p>
1119      Delegates to <a href="#Collection-url">Collection#url</a> to generate the
1120      URL, so make sure that you have it defined, or a <a href="#Model-urlRoot">urlRoot</a>
1121      property, if all models of this class share a common root URL.
1122      A model with an id of <tt>101</tt>, stored in a
1123      <a href="#Collection">Backbone.Collection</a> with a <tt>url</tt> of <tt>"/documents/7/notes"</tt>,
1124      would have this URL: <tt>"/documents/7/notes/101"</tt>
1125    </p>
1126
1127    <p id="Model-urlRoot">
1128      <b class="header">urlRoot</b><code>model.urlRoot or model.urlRoot()</code>
1129      <br />
1130      Specify a <tt>urlRoot</tt> if you're using a model outside of a collection,
1131      to enable the default <a href="#Model-url">url</a> function to generate
1132      URLs based on the model id. <tt>"/[urlRoot]/id"</tt><br />
1133      Note that <tt>urlRoot</tt> may also be defined as a function.
1134    </p>
1135
1136<pre class="runnable">
1137var Book = Backbone.Model.extend({urlRoot : '/books'});
1138
1139var solaris = new Book({id: "1083-lem-solaris"});
1140
1141alert(solaris.url());
1142</pre>
1143
1144    <p id="Model-parse">
1145      <b class="header">parse</b><code>model.parse(response)</code>
1146      <br />
1147      <b>parse</b> is called whenever a model's data is returned by the
1148      server, in <a href="#Model-fetch">fetch</a>, and <a href="#Model-save">save</a>.
1149      The function is passed the raw <tt>response</tt> object, and should return
1150      the attributes hash to be <a href="#Model-set">set</a> on the model. The
1151      default implementation is a no-op, simply passing through the JSON response.
1152      Override this if you need to work with a preexisting API, or better namespace
1153      your responses.
1154    </p>
1155
1156    <p>
1157      If you're working with a Rails backend, you'll notice that Rails' default
1158      <tt>to_json</tt> implementation includes a model's attributes under a
1159      namespace. To disable this behavior for seamless Backbone integration, set:
1160    </p>
1161
1162<pre>
1163ActiveRecord::Base.include_root_in_json = false
1164</pre>
1165
1166    <p id="Model-clone">
1167      <b class="header">clone</b><code>model.clone()</code>
1168      <br />
1169      Returns a new instance of the model with identical attributes.
1170    </p>
1171
1172    <p id="Model-isNew">
1173      <b class="header">isNew</b><code>model.isNew()</code>
1174      <br />
1175      Has this model been saved to the server yet? If the model does not yet have
1176      an <tt>id</tt>, it is considered to be new.
1177    </p>
1178
1179    <p id="Model-change">
1180      <b class="header">change</b><code>model.change()</code>
1181      <br />
1182      Manually trigger the <tt>"change"</tt> event and a <tt>"change:attribute"</tt>
1183      event for each attribute that has changed. If you've been passing
1184      <tt>{silent: true}</tt> to the <a href="#Model-set">set</a> function in order to
1185      aggregate rapid changes to a model, you'll want to call <tt>model.change()</tt>
1186      when you're all finished.
1187    </p>
1188
1189    <p id="Model-hasChanged">
1190      <b class="header">hasChanged</b><code>model.hasChanged([attribute])</code>
1191      <br />
1192      Has the model changed since the last <tt>"change"</tt> event? If an <b>attribute</b>
1193      is passed, returns <tt>true</tt> if that specific attribute has changed.
1194    </p>
1195
1196    <p class="warning">
1197      Note that this method, and the following change-related ones,
1198      are only useful during the course of a <tt>"change"</tt> event.
1199    </p>
1200
1201<pre>
1202book.on("change", function() {
1203  if (book.hasChanged("title")) {
1204    ...
1205  }
1206});
1207</pre>
1208
1209    <p id="Model-changedAttributes">
1210      <b class="header">changedAttributes</b><code>model.changedAttributes([attributes])</code>
1211      <br />
1212      Retrieve a hash of only the model's attributes that have changed. Optionally,
1213      an external <b>attributes</b> hash can be passed in, returning
1214      the attributes in that hash which differ from the model. This can be used
1215      to figure out which portions of a view should be updated, or what calls
1216      need to be made to sync the changes to the server.
1217    </p>
1218
1219    <p id="Model-previous">
1220      <b class="header">previous</b><code>model.previous(attribute)</code>
1221      <br />
1222      During a <tt>"change"</tt> event, this method can be used to get the
1223      previous value of a changed attribute.
1224    </p>
1225
1226<pre class="runnable">
1227var bill = new Backbone.Model({
1228  name: "Bill Smith"
1229});
1230
1231bill.on("change:name", function(model, name) {
1232  alert("Changed name from " + bill.previous("name") + " to " + name);
1233});
1234
1235bill.set({name : "Bill Jones"});
1236</pre>
1237
1238    <p id="Model-previousAttributes">
1239      <b class="header">previousAttributes</b><code>model.previousAttributes()</code>
1240      <br />
1241      Return a copy of the model's previous attributes. Useful for getting a
1242      diff between versions of a model, or getting back to a valid state after
1243      an error occurs.
1244    </p>
1245
1246    <h2 id="Collection">Backbone.Collection</h2>
1247
1248    <p>
1249      Collections are ordered sets of models. You can bind <tt>"change"</tt> events
1250      to be notified when any model in the collection has been modified,
1251      listen for <tt>"add"</tt> and <tt>"remove"</tt> events, <tt>fetch</tt>
1252      the collection from the server, and use a full suite of
1253      <a href="#Collection-Underscore-Methods">Underscore.js methods</a>.
1254    </p>
1255
1256    <p>
1257      Any event that is triggered on a model in a collection will also be
1258      triggered on the collection directly, for convenience.
1259      This allows you to listen for changes to specific attributes in any
1260      model in a collection, for example:
1261      <tt>Documents.on("change:selected", ...)</tt>
1262    </p>
1263
1264    <p id="Collection-extend">
1265      <b class="header">extend</b><code>Backbone.Collection.extend(properties, [classProperties])</code>
1266      <br />
1267      To create a <b>Collection</b> class of your own, extend <b>Backbone.Collection</b>,
1268      providing instance <b>properties</b>, as well as optional <b>classProperties</b> to be attached
1269      directly to the collection's constructor function.
1270    </p>
1271
1272    <p id="Collection-model">
1273      <b class="header">model</b><code>collection.model</code>
1274      <br />
1275      Override this property to specify the model class that the collection
1276      contains. If defined, you can pass raw attributes objects (and arrays) to
1277      <a href="#Collection-add">add</a>, <a href="#Collection-create">create</a>,
1278      and <a href="#Collection-reset">reset</a>, and the attributes will be
1279      converted into a model of the proper type.
1280    </p>
1281
1282<pre>
1283var Library = Backbone.Collection.extend({
1284  model: Book
1285});
1286</pre>
1287
1288    <p id="Collection-constructor">
1289      <b class="header">constructor / initialize</b><code>new Collection([models], [options])</code>
1290      <br />
1291      When creating a Collection, you may choose to pass in the initial array of <b>models</b>.
1292      The collection's <a href="#Collection-comparator">comparator</a> function
1293      may be included as an option. If you define an <b>initialize</b> function, it will be
1294      invoked when the collection is created.
1295    </p>
1296
1297<pre>
1298var tabs = new TabSet([tab1, tab2, tab3]);
1299</pre>
1300
1301    <p id="Collection-models">
1302      <b class="header">models</b><code>collection.models</code>
1303      <br />
1304      Raw access to the JavaScript array of models inside of the collection. Usually you'll
1305      want to use <tt>get</tt>, <tt>at</tt>, or the <b>Underscore methods</b>
1306      to access model objects, but occasionally a direct reference to the array
1307      is desired.
1308    </p>
1309
1310    <p id="Collection-toJSON">
1311      <b class="header">toJSON</b><code>collection.toJSON()</code>
1312      <br />
1313      Return an array containing the attributes hash of each model in the
1314      collection. This can be used to serialize and persist the
1315      collection as a whole. The name of this method is a bit confusing, because
1316      it conforms to
1317      <a href="https://developer.mozilla.org/en/JSON#toJSON()_method">JavaScript's JSON API</a>.
1318    </p>
1319
1320<pre class="runnable">
1321var collection = new Backbone.Collection([
1322  {name: "Tim", age: …

Large files files are truncated, but you can click here to view the full file