PageRenderTime 100ms CodeModel.GetById 5ms app.highlight 74ms RepoModel.GetById 1ms app.codeStats 1ms

/index.html

https://gitlab.com/JJVV27/backbone
HTML | 4878 lines | 4294 code | 584 blank | 0 comment | 0 complexity | 41a36c312559ec3f0f3e76d2dc9504fb 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  <meta name="viewport" content="width=device-width">
   7  <link rel="canonical" href="http://backbonejs.org" />
   8  <title>Backbone.js</title>
   9  <style>
  10    body {
  11      font-size: 14px;
  12      line-height: 22px;
  13      font-family: Helvetica Neue, Helvetica, Arial;
  14      background: #f4f4f4 url(docs/images/background.png);
  15    }
  16    .interface {
  17      font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
  18    }
  19    div#sidebar {
  20      background: #fff;
  21      position: fixed;
  22      z-index: 10;
  23      top: 0; left: 0; bottom: 0;
  24      width: 200px;
  25      overflow-y: auto;
  26      overflow-x: hidden;
  27      -webkit-overflow-scrolling: touch;
  28      padding: 15px 0 30px 30px;
  29      border-right: 1px solid #bbb;
  30      box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; -moz-box-shadow: 0 0 20px #ccc;
  31    }
  32      a.toc_title, a.toc_title:visited {
  33        display: block;
  34        color: black;
  35        font-weight: bold;
  36        margin-top: 15px;
  37      }
  38        a.toc_title:hover {
  39          text-decoration: underline;
  40        }
  41        #sidebar .version {
  42          font-size: 10px;
  43          font-weight: normal;
  44        }
  45      ul.toc_section {
  46        font-size: 11px;
  47        line-height: 14px;
  48        margin: 5px 0 0 0;
  49        padding-left: 0px;
  50        list-style-type: none;
  51        font-family: Lucida Grande;
  52      }
  53        .toc_section li {
  54          cursor: pointer;
  55          margin: 0 0 3px 0;
  56        }
  57          .toc_section li a {
  58            text-decoration: none;
  59            color: black;
  60          }
  61            .toc_section li a:hover {
  62              text-decoration: underline;
  63            }
  64    div.container {
  65      position: relative;
  66      width: 550px;
  67      margin: 40px 0 50px 260px;
  68    }
  69    img#logo {
  70      width: 450px;
  71      height: 80px;
  72    }
  73    div.run {
  74      position: absolute;
  75      right: 15px;
  76      width: 26px; height: 18px;
  77      background: url('docs/images/arrows.png') no-repeat -26px 0;
  78    }
  79      div.run:active {
  80        background-position: -51px 0;
  81      }
  82    p, div.container ul {
  83      margin: 25px 0;
  84      width: 550px;
  85    }
  86      p.warning {
  87        font-size: 12px;
  88        line-height: 18px;
  89        font-style: italic;
  90      }
  91      div.container ul {
  92        list-style: circle;
  93        padding-left: 15px;
  94        font-size: 13px;
  95        line-height: 18px;
  96      }
  97        div.container ul li {
  98          margin-bottom: 10px;
  99        }
 100        div.container ul.small {
 101          font-size: 12px;
 102        }
 103    a, a:visited {
 104      color: #444;
 105    }
 106    a:active, a:hover {
 107      color: #000;
 108    }
 109    a.punch {
 110      display: inline-block;
 111      background: #4162a8;
 112      border-top: 1px solid #38538c;
 113      border-right: 1px solid #1f2d4d;
 114      border-bottom: 1px solid #151e33;
 115      border-left: 1px solid #1f2d4d;
 116      -webkit-border-radius: 4px;
 117      -moz-border-radius: 4px;
 118      -ms-border-radius: 4px;
 119      -o-border-radius: 4px;
 120      border-radius: 4px;
 121      -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 122      -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 123      -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 124      -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 125      box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 126      color: #fff;
 127      font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
 128      line-height: 1;
 129      margin-bottom: 15px;
 130      padding: 8px 0 10px 0;
 131      text-align: center;
 132      text-shadow: 0px -1px 1px #1e2d4d;
 133      text-decoration: none;
 134      width: 225px;
 135      -webkit-background-clip: padding-box; }
 136      a.punch:hover {
 137        -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 138        -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 139        -ms-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 140        -o-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 141        box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 142        cursor: pointer; }
 143      a.punch:active {
 144        -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 145        -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 146        -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 147        -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 148        box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 149        margin-top: 5px; margin-bottom: 10px; }
 150    a img {
 151      border: 0;
 152    }
 153    a.travis-badge {
 154      display: block;
 155    }
 156    h1, h2, h3, h4, h5, h6 {
 157      padding-top: 20px;
 158    }
 159      h2 {
 160        font-size: 22px;
 161      }
 162    b.header {
 163      font-size: 18px;
 164      line-height: 35px;
 165    }
 166    span.alias {
 167      font-size: 14px;
 168      font-style: italic;
 169      margin-left: 20px;
 170    }
 171    table {
 172      margin: 15px 0 0; padding: 0;
 173    }
 174      tr, td {
 175        margin: 0; padding: 0;
 176      }
 177        td {
 178          padding: 0px 15px 5px 0;
 179        }
 180        table .rule {
 181          height: 1px;
 182          background: #ccc;
 183          margin: 5px 0;
 184        }
 185    code, pre, tt {
 186      font-family: Monaco, Consolas, "Lucida Console", monospace;
 187      font-size: 12px;
 188      line-height: 18px;
 189      font-style: normal;
 190    }
 191      tt {
 192        padding: 0px 3px;
 193        background: #fff;
 194        border: 1px solid #ddd;
 195        zoom: 1;
 196      }
 197      code {
 198        margin-left: 20px;
 199      }
 200      pre {
 201        font-size: 12px;
 202        padding: 2px 0 2px 15px;
 203        border: 4px solid #bbb; border-top: 0; border-bottom: 0;
 204        margin: 0px 0 25px;
 205      }
 206      img.example_image {
 207        margin: 0px auto;
 208      }
 209        img.example_retina {
 210          margin: 20px;
 211          box-shadow: 0 8px 15px rgba(0,0,0,0.4);
 212        }
 213    @media only screen and (-webkit-max-device-pixel-ratio: 1) and (max-width: 600px),
 214           only screen and (max--moz-device-pixel-ratio: 1) and (max-width: 600px) {
 215      div#sidebar {
 216        display: none;
 217      }
 218      img#logo {
 219        max-width: 450px;
 220        width: 100%;
 221        height: auto;
 222      }
 223      div.container {
 224        width: auto;
 225        margin-left: 15px;
 226        margin-right: 15px;
 227      }
 228        p, div.container ul {
 229          width: auto;
 230        }
 231    }
 232    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 640px),
 233          only screen and (-o-min-device-pixel-ratio: 3/2) and (max-width: 640px),
 234          only screen and (min-device-pixel-ratio: 1.5) and (max-width: 640px) {
 235      img {
 236        max-width: 100%;
 237        height: auto;
 238      }
 239      div#sidebar {
 240        -webkit-overflow-scrolling: initial;
 241        position: relative;
 242        width: 90%;
 243        height: 120px;
 244        left: 0;
 245        top: -7px;
 246        padding: 10px 0 10px 30px;
 247        border: 0;
 248      }
 249      img#logo {
 250        width: auto;
 251        height: auto;
 252      }
 253      div.container {
 254        margin: 0;
 255        width: 100%;
 256      }
 257      p, div.container ul {
 258        max-width: 98%;
 259        overflow-x: scroll;
 260      }
 261      table {
 262        position: relative;
 263      }
 264        tr:first-child td {
 265          padding-bottom: 25px;
 266        }
 267        td.text {
 268          line-height: 12px;
 269          padding: 0;
 270          position: absolute;
 271          left: 0;
 272          top: 48px;
 273        }
 274        tr:last-child td.text {
 275          top: 122px;
 276        }
 277      pre {
 278        overflow: scroll;
 279      }
 280    }
 281    img.figure {
 282      width: 100%;
 283    }
 284    div.columns {
 285      display: table;
 286      table-layout: fixed;
 287      width: 100%;
 288    }
 289      div.columns ul {
 290        margin: 10px 0;
 291      }
 292    div.col-50 {
 293      display: table-cell;
 294      width: 50%;
 295    }
 296  </style>
 297</head>
 298<body>
 299
 300  <div id="sidebar" class="interface">
 301
 302    <a class="toc_title" href="#">
 303      Backbone.js <span class="version">(1.2.0)</span>
 304    </a>
 305    <ul class="toc_section">
 306      <li>&raquo; <a href="http://github.com/jashkenas/backbone">GitHub Repository</a></li>
 307      <li>&raquo; <a href="docs/backbone.html">Annotated Source</a></li>
 308    </ul>
 309
 310    <a class="toc_title" href="#Getting-started">
 311      Getting Started
 312    </a>
 313    <ul class="toc_section">
 314      <li>- <a href="#Getting-Started">Introduction</a></li>
 315      <li><a href="#Model-View-separation">Models and Views</a></li>
 316      <li><a href="#Model-Collections">Collections</a></li>
 317      <li><a href="#API-integration">API Integration</a></li>
 318      <li><a href="#View-rendering">Rendering</a></li>
 319      <li><a href="#Routing">Routing</a></li>
 320    </ul>
 321
 322    <a class="toc_title" href="#Events">
 323      Events
 324    </a>
 325    <ul class="toc_section">
 326      <li><a href="#Events-on">on</a></li>
 327      <li><a href="#Events-off">off</a></li>
 328      <li><a href="#Events-trigger">trigger</a></li>
 329      <li><a href="#Events-once">once</a></li>
 330      <li><a href="#Events-listenTo">listenTo</a></li>
 331      <li><a href="#Events-stopListening">stopListening</a></li>
 332      <li><a href="#Events-listenToOnce">listenToOnce</a></li>
 333      <li>- <a href="#Events-catalog"><b>Catalog of Built-in Events</b></a></li>
 334    </ul>
 335
 336    <a class="toc_title" href="#Model">
 337      Model
 338    </a>
 339    <ul class="toc_section">
 340      <li><a href="#Model-extend">extend</a></li>
 341      <li><a href="#Model-constructor">constructor / initialize</a></li>
 342      <li><a href="#Model-get">get</a></li>
 343      <li><a href="#Model-set">set</a></li>
 344      <li><a href="#Model-escape">escape</a></li>
 345      <li><a href="#Model-has">has</a></li>
 346      <li><a href="#Model-unset">unset</a></li>
 347      <li><a href="#Model-clear">clear</a></li>
 348      <li><a href="#Model-id">id</a></li>
 349      <li><a href="#Model-idAttribute">idAttribute</a></li>
 350      <li><a href="#Model-cid">cid</a></li>
 351      <li><a href="#Model-attributes">attributes</a></li>
 352      <li><a href="#Model-changed">changed</a></li>
 353      <li><a href="#Model-defaults">defaults</a></li>
 354      <li><a href="#Model-toJSON">toJSON</a></li>
 355      <li><a href="#Model-sync">sync</a></li>
 356      <li><a href="#Model-fetch">fetch</a></li>
 357      <li><a href="#Model-save">save</a></li>
 358      <li><a href="#Model-destroy">destroy</a></li>
 359      <li><a href="#Model-Underscore-Methods"><b>Underscore Methods (9)</b></a></li>
 360      <li><a href="#Model-validate">validate</a></li>
 361      <li><a href="#Model-validationError">validationError</a></li>
 362      <li><a href="#Model-isValid">isValid</a></li>
 363      <li><a href="#Model-url">url</a></li>
 364      <li><a href="#Model-urlRoot">urlRoot</a></li>
 365      <li><a href="#Model-parse">parse</a></li>
 366      <li><a href="#Model-clone">clone</a></li>
 367      <li><a href="#Model-isNew">isNew</a></li>
 368      <li><a href="#Model-hasChanged">hasChanged</a></li>
 369      <li><a href="#Model-changedAttributes">changedAttributes</a></li>
 370      <li><a href="#Model-previous">previous</a></li>
 371      <li><a href="#Model-previousAttributes">previousAttributes</a></li>
 372    </ul>
 373
 374    <a class="toc_title" href="#Collection">
 375      Collection
 376    </a>
 377    <ul class="toc_section">
 378      <li><a href="#Collection-extend">extend</a></li>
 379      <li><a href="#Collection-model">model</a></li>
 380      <li><a href="#Collection-constructor">constructor / initialize</a></li>
 381      <li><a href="#Collection-models">models</a></li>
 382      <li><a href="#Collection-toJSON">toJSON</a></li>
 383      <li><a href="#Collection-sync">sync</a></li>
 384      <li><a href="#Collection-Underscore-Methods"><b>Underscore Methods (46)</b></a></li>
 385      <li><a href="#Collection-add">add</a></li>
 386      <li><a href="#Collection-remove">remove</a></li>
 387      <li><a href="#Collection-reset">reset</a></li>
 388      <li><a href="#Collection-set">set</a></li>
 389      <li><a href="#Collection-get">get</a></li>
 390      <li><a href="#Collection-at">at</a></li>
 391      <li><a href="#Collection-push">push</a></li>
 392      <li><a href="#Collection-pop">pop</a></li>
 393      <li><a href="#Collection-unshift">unshift</a></li>
 394      <li><a href="#Collection-shift">shift</a></li>
 395      <li><a href="#Collection-slice">slice</a></li>
 396      <li><a href="#Collection-length">length</a></li>
 397      <li><a href="#Collection-comparator">comparator</a></li>
 398      <li><a href="#Collection-sort">sort</a></li>
 399      <li><a href="#Collection-pluck">pluck</a></li>
 400      <li><a href="#Collection-where">where</a></li>
 401      <li><a href="#Collection-findWhere">findWhere</a></li>
 402      <li><a href="#Collection-url">url</a></li>
 403      <li><a href="#Collection-parse">parse</a></li>
 404      <li><a href="#Collection-clone">clone</a></li>
 405      <li><a href="#Collection-fetch">fetch</a></li>
 406      <li><a href="#Collection-create">create</a></li>
 407    </ul>
 408
 409    <a class="toc_title" href="#Router">
 410      Router
 411    </a>
 412    <ul class="toc_section">
 413      <li><a href="#Router-extend">extend</a></li>
 414      <li><a href="#Router-routes">routes</a></li>
 415      <li><a href="#Router-constructor">constructor / initialize</a></li>
 416      <li><a href="#Router-route">route</a></li>
 417      <li><a href="#Router-navigate">navigate</a></li>
 418      <li><a href="#Router-execute">execute</a></li>
 419    </ul>
 420
 421    <a class="toc_title" href="#History">
 422      History
 423    </a>
 424    <ul class="toc_section">
 425      <li><a href="#History-start">start</a></li>
 426    </ul>
 427
 428    <a class="toc_title" href="#Sync">
 429      Sync
 430    </a>
 431    <ul class="toc_section">
 432      <li><a href="#Sync">Backbone.sync</a></li>
 433      <li><a href="#Sync-ajax">Backbone.ajax</a></li>
 434      <li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
 435      <li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
 436    </ul>
 437
 438    <a class="toc_title" href="#View">
 439      View
 440    </a>
 441    <ul class="toc_section">
 442      <li><a href="#View-extend">extend</a></li>
 443      <li><a href="#View-constructor">constructor / initialize</a></li>
 444      <li><a href="#View-el">el</a></li>
 445      <li><a href="#View-$el">$el</a></li>
 446      <li><a href="#View-setElement">setElement</a></li>
 447      <li><a href="#View-attributes">attributes</a></li>
 448      <li><a href="#View-dollar">$ (jQuery)</a></li>
 449      <li><a href="#View-template">template</a></li>
 450      <li><a href="#View-render">render</a></li>
 451      <li><a href="#View-remove">remove</a></li>
 452      <li><a href="#View-delegateEvents">delegateEvents</a></li>
 453      <li><a href="#View-undelegateEvents">undelegateEvents</a></li>
 454    </ul>
 455
 456    <a class="toc_title" href="#Utility">
 457      Utility
 458    </a>
 459    <ul class="toc_section">
 460      <li><a href="#Utility-Backbone-noConflict">Backbone.noConflict</a></li>
 461      <li><a href="#Utility-Backbone-$">Backbone.$</a></li>
 462    </ul>
 463
 464    <a class="toc_title" href="#faq">
 465      F.A.Q.
 466    </a>
 467    <ul class="toc_section">
 468      <li><a href="#FAQ-why-backbone">Why Backbone?</a></li>
 469      <li><a href="#FAQ-tim-toady">More Than One Way To Do It</a></li>
 470      <li><a href="#FAQ-nested">Nested Models &amp; Collections</a></li>
 471      <li><a href="#FAQ-bootstrap">Loading Bootstrapped Models</a></li>
 472      <li><a href="#FAQ-extending">Extending Backbone</a></li>
 473      <li><a href="#FAQ-mvc">Traditional MVC</a></li>
 474      <li><a href="#FAQ-this">Binding "this"</a></li>
 475      <li><a href="#FAQ-rails">Working with Rails</a></li>
 476    </ul>
 477
 478    <a class="toc_title" href="#examples">
 479      Examples
 480    </a>
 481    <ul class="toc_section">
 482      <li><a href="#examples-todos">Todos</a></li>
 483      <li><a href="#examples-documentcloud">DocumentCloud</a></li>
 484      <li><a href="#examples-usa-today">USA Today</a></li>
 485      <li><a href="#examples-rdio">Rdio</a></li>
 486      <li><a href="#examples-hulu">Hulu</a></li>
 487      <li><a href="#examples-quartz">Quartz</a></li>
 488      <li><a href="#examples-earth">Earth</a></li>
 489      <li><a href="#examples-vox">Vox</a></li>
 490      <li><a href="#examples-gawker">Gawker Media</a></li>
 491      <li><a href="#examples-flow">Flow</a></li>
 492      <li><a href="#examples-gilt">Gilt Groupe</a></li>
 493      <li><a href="#examples-enigma">Enigma</a></li>
 494      <li><a href="#examples-newsblur">NewsBlur</a></li>
 495      <li><a href="#examples-wordpress">WordPress.com</a></li>
 496      <li><a href="#examples-foursquare">Foursquare</a></li>
 497      <li><a href="#examples-bitbucket">Bitbucket</a></li>
 498      <li><a href="#examples-disqus">Disqus</a></li>
 499      <li><a href="#examples-delicious">Delicious</a></li>
 500      <li><a href="#examples-khan-academy">Khan Academy</a></li>
 501      <li><a href="#examples-irccloud">IRCCloud</a></li>
 502      <li><a href="#examples-pitchfork">Pitchfork</a></li>
 503      <li><a href="#examples-spin">Spin</a></li>
 504      <li><a href="#examples-zocdoc">ZocDoc</a></li>
 505      <li><a href="#examples-walmart">Walmart Mobile</a></li>
 506      <li><a href="#examples-groupon">Groupon Now!</a></li>
 507      <li><a href="#examples-basecamp">Basecamp</a></li>
 508      <li><a href="#examples-slavery-footprint">Slavery Footprint</a></li>
 509      <li><a href="#examples-stripe">Stripe</a></li>
 510      <li><a href="#examples-airbnb">Airbnb</a></li>
 511      <li><a href="#examples-soundcloud">SoundCloud Mobile</a></li>
 512      <li>- <a href="#examples-artsy">Art.sy</a></li>
 513      <li><a href="#examples-pandora">Pandora</a></li>
 514      <li><a href="#examples-inkling">Inkling</a></li>
 515      <li><a href="#examples-code-school">Code School</a></li>
 516      <li><a href="#examples-cloudapp">CloudApp</a></li>
 517      <li><a href="#examples-seatgeek">SeatGeek</a></li>
 518      <li><a href="#examples-easel">Easel</a></li>
 519      <li>- <a href="#examples-jolicloud">Jolicloud</a></li>
 520      <li><a href="#examples-salon">Salon.io</a></li>
 521      <li><a href="#examples-tilemill">TileMill</a></li>
 522      <li><a href="#examples-blossom">Blossom</a></li>
 523      <li><a href="#examples-trello">Trello</a></li>
 524      <li><a href="#examples-tzigla">Tzigla</a></li>
 525    </ul>
 526
 527    <a class="toc_title" href="#changelog">
 528      Change Log
 529    </a>
 530
 531  </div>
 532
 533  <div class="container">
 534
 535    <p>
 536      <img id="logo" src="docs/images/backbone.png" alt="Backbone.js" />
 537    </p>
 538
 539    <p>
 540      Backbone.js gives structure to web applications
 541      by providing <b>models</b> with key-value binding and custom events,
 542      <b>collections</b> with a rich API of enumerable functions,
 543      <b>views</b> with declarative event handling, and connects it all to your
 544      existing API over a RESTful JSON interface.
 545    </p>
 546
 547    <p>
 548      The project is <a href="http://github.com/jashkenas/backbone/">hosted on GitHub</a>,
 549      and the <a href="docs/backbone.html">annotated source code</a> is available,
 550      as well as an online <a href="test/">test suite</a>,
 551      an <a href="examples/todos/index.html">example application</a>,
 552      a <a href="https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites">list of tutorials</a>
 553      and a <a href="#examples">long list of real-world projects</a> that use Backbone.
 554      Backbone is available for use under the <a href="http://github.com/jashkenas/backbone/blob/master/LICENSE">MIT software license</a>.
 555    </p>
 556
 557    <p>
 558      You can report bugs and discuss features on the
 559      <a href="http://github.com/jashkenas/backbone/issues">GitHub issues page</a>,
 560      on Freenode IRC in the <tt>#documentcloud</tt> channel, post questions to the
 561      <a href="https://groups.google.com/forum/#!forum/backbonejs">Google Group</a>,
 562      add pages to the <a href="https://github.com/jashkenas/backbone/wiki">wiki</a>
 563      or send tweets to <a href="http://twitter.com/documentcloud">@documentcloud</a>.
 564    </p>
 565
 566    <p>
 567      <i>
 568        Backbone is an open-source component of
 569        <a href="http://documentcloud.org/">DocumentCloud</a>.
 570      </i>
 571    </p>
 572
 573    <h2 id="downloads">
 574      Downloads &amp; Dependencies
 575      <span style="padding-left: 7px; font-size:11px; font-weight: normal;" class="interface">(Right-click, and use "Save As")</span>
 576    </h2>
 577
 578    <table>
 579      <tr>
 580        <td><a class="punch" href="backbone.js">Development Version (1.2.0)</a></td>
 581        <td class="text"><i>69kb, Full source, tons of comments</i></td>
 582      </tr>
 583      <tr>
 584        <td><a class="punch" href="backbone-min.js">Production Version (1.2.0)</a></td>
 585        <td class="text" style="line-height: 16px;">
 586          <i>7.3kb, Packed and gzipped</i><br />
 587          <small>(<a href="backbone-min.map">Source Map</a>)</small>
 588        </td>
 589      </tr>
 590      <tr>
 591        <td><a class="punch" href="https://raw.github.com/jashkenas/backbone/master/backbone.js">Edge Version (master)</a></td>
 592        <td>
 593          <i>Unreleased, use at your own risk</i>
 594          <a class="travis-badge" href="https://travis-ci.org/jashkenas/backbone">
 595            <img src="https://travis-ci.org/jashkenas/backbone.png" />
 596          </a>
 597        </td>
 598      </tr>
 599    </table>
 600
 601    <p>
 602      Backbone's only hard dependency is
 603      <a href="http://underscorejs.org/">Underscore.js</a> <small>( >= 1.7.0)</small>.
 604      For RESTful persistence and DOM manipulation with <a href="#View">Backbone.View</a>,
 605      include <b><a href="http://jquery.com">jQuery</a></b> ( >= 1.11.0), and
 606      <b><a href="https://github.com/douglascrockford/JSON-js">json2.js</a></b> for older
 607      Internet Explorer support.
 608      <i>(Mimics of the Underscore and jQuery APIs, such as
 609      <a href="http://lodash.com">Lo-Dash</a> and
 610      <a href="http://zeptojs.com">Zepto</a>, will
 611      also tend to work, with varying degrees of compatibility.)</i>
 612    </p>
 613    <h2 id="Getting-started">Getting Started</h2>
 614
 615    <p>
 616      When working on a web application that involves a lot of JavaScript, one
 617      of the first things you learn is to stop tying your data to the DOM. It's all
 618      too easy to create JavaScript applications that end up as tangled piles of
 619      jQuery selectors and callbacks, all trying frantically to keep data in
 620      sync between the HTML UI, your JavaScript logic, and the database on your
 621      server. For rich client-side applications, a more structured approach
 622      is often helpful.
 623    </p>
 624
 625    <p>
 626      With Backbone, you represent your data as
 627      <a href="#Model">Models</a>, which can be created, validated, destroyed,
 628      and saved to the server. Whenever a UI action causes an attribute of
 629      a model to change, the model triggers a <i>"change"</i> event; all
 630      the <a href="#View">Views</a> that display the model's state can be notified of the
 631      change, so that they are able to respond accordingly, re-rendering themselves with
 632      the new information. In a finished Backbone app, you don't have to write the glue
 633      code that looks into the DOM to find an element with a specific <i>id</i>,
 634      and update the HTML manually
 635      &mdash; when the model changes, the views simply update themselves.
 636    </p>
 637
 638    <p>
 639      Philosophically, Backbone is an attempt to discover the minimal set
 640      of data-structuring (models and collections) and user interface (views
 641      and URLs) primitives that are generally useful when building web applications with
 642      JavaScript. In an ecosystem where overarching, decides-everything-for-you
 643      frameworks are commonplace, and many libraries require your site to be
 644      reorganized to suit their look, feel, and default behavior — Backbone should
 645      continue to be a tool that gives you the <i>freedom</i> to design the full
 646      experience of your web application.
 647    </p>
 648
 649    <p>
 650      If you're new here, and aren't yet quite sure what Backbone is for, start by
 651      browsing the <a href="#examples">list of Backbone-based projects</a>.
 652    </p>
 653
 654    <p>
 655      Many of the code examples in this documentation are runnable, because
 656      Backbone is included on this page.
 657      Click the <i>play</i> button to execute them.
 658    </p>
 659
 660    <h2 id="Model-View-separation">Models and Views</h2>
 661
 662    <img class="figure" src="docs/images/intro-model-view.svg" alt="Model-View Separation.">
 663
 664    <p>
 665      The single most important thing that Backbone can help you with is keeping
 666      your business logic separate from your user interface. When the two are
 667      entangled, change is hard; when logic doesn't depend on UI, your
 668      interface becomes easier to work with.
 669    </p>
 670
 671    <div class="columns">
 672      <div class="col-50">
 673        <b>Model</b>
 674        <ul>
 675          <li>Orchestrates data and business logic.</li>
 676          <li>Loads and saves from the server.</li>
 677          <li>Emits events when data changes.</li>
 678        </ul>
 679      </div>
 680      <div class="col-50">
 681        <b>View</b>
 682        <ul>
 683          <li>Listens for changes and renders UI.</li>
 684          <li>Handles user input and interactivity.</li>
 685          <li>Sends captured input to the model.</li>
 686        </ul>
 687      </div>
 688    </div>
 689
 690    <p>
 691      A <b>Model</b> manages an internal table of data attributes, and
 692      triggers <tt>"change"</tt> events when any of its data is modified.
 693      Models handle syncing data with a persistence layer — usually a REST API
 694      with a backing database. Design your models as the atomic reusable objects
 695      containing all of the helpful functions for manipulating their particular
 696      bit of data. Models should be able to be passed around throughout your app,
 697      and used anywhere that bit of data is needed.
 698    </p>
 699
 700    <p>
 701      A <b>View</b> is an atomic chunk of user interface. It often renders the
 702      data from a specific model, or number of models &mdash; but views can
 703      also be data-less chunks of UI that stand alone.
 704      Models should be generally unaware of views. Instead, views listen to
 705      the model <tt>"change"</tt> events, and react or re-render themselves
 706      appropriately.
 707    </p>
 708
 709    <h2 id="Model-Collections">Collections</h2>
 710
 711    <img class="figure" src="docs/images/intro-collections.svg" alt="Model Collections.">
 712
 713    <p>
 714      A <b>Collection</b> helps you deal with a group of related models, handling
 715      the loading and saving of new models to the server and providing helper
 716      functions for performing aggregations or computations against a list of models.
 717      Aside from their own events, collections also proxy through all of the
 718      events that occur to models within them, allowing you to listen in one place
 719      for any change that might happen to any model in the collection.
 720    </p>
 721
 722    <h2 id="API-integration">API Integration</h2>
 723
 724    <p>
 725      Backbone is pre-configured to sync with a RESTful API. Simply create a
 726      new Collection with the <tt>url</tt> of your resource endpoint:
 727    </p>
 728
 729<pre>
 730var Books = Backbone.Collection.extend({
 731  url: '/books'
 732});
 733</pre>
 734
 735    <p>
 736      The <b>Collection</b> and <b>Model</b> components together form a direct
 737      mapping of REST resources using the following methods:
 738    </p>
 739
 740<pre>
 741GET  /books/ .... collection.fetch();
 742POST /books/ .... collection.create();
 743GET  /books/1 ... model.fetch();
 744PUT  /books/1 ... model.save();
 745DEL  /books/1 ... model.destroy();
 746</pre>
 747
 748    <p>
 749      When fetching raw JSON data from an API, a <b>Collection</b> will
 750      automatically populate itself with data formatted as an array, while
 751      a <b>Model</b> will automatically populate itself with data formatted
 752      as an object:
 753    </p>
 754
 755<pre>
 756[{"id": 1}] ..... populates a Collection with one model.
 757{"id": 1} ....... populates a Model with one attribute.
 758</pre>
 759
 760    <p>
 761      However, it's fairly common to encounter APIs that return data in a
 762      different format than what Backbone expects. For example, consider
 763      fetching a <b>Collection</b> from an API that returns the real data
 764      array wrapped in metadata:
 765    </p>
 766
 767<pre>
 768{
 769  "page": 1,
 770  "limit": 10,
 771  "total": 2,
 772  "books": [
 773    {"id": 1, "title": "Pride and Prejudice"},
 774    {"id": 4, "title": "The Great Gatsby"}
 775  ]
 776}
 777</pre>
 778
 779    <p>
 780      In the above example data, a <b>Collection</b> should populate using the
 781      <tt>"books"</tt> array rather than the root object structure. This
 782      difference is easily reconciled using a <tt>parse</tt> method that
 783      returns (or transforms) the desired portion of API data:
 784    </p>
 785
 786<pre>
 787var Books = Backbone.Collection.extend({
 788  url: '/books',
 789  parse: function(data) {
 790    return data.books;
 791  }
 792});
 793</pre>
 794
 795    <h2 id="View-rendering">View Rendering</h2>
 796
 797    <img class="figure" src="docs/images/intro-views.svg" alt="View rendering.">
 798
 799    <p>
 800      Each <b>View</b> manages the rendering and user interaction within its own
 801      DOM element. If you're strict about not allowing views to reach outside
 802      of themselves, it helps keep your interface flexible &mdash; allowing
 803      views to be rendered in isolation in any place where they might be needed.
 804    </p>
 805
 806    <p>
 807      Backbone remains unopinionated about the process used to render <b>View</b>
 808      objects and their subviews into UI: you define how your models get translated
 809      into HTML (or SVG, or Canvas, or something even more exotic).
 810      It could be as prosaic as a simple
 811      <a href="http://underscorejs.org/#template">Underscore template</a>, or as fancy as the
 812      <a href="http://facebook.github.io/react/docs/tutorial.html">React virtual DOM</a>.
 813      Some basic approaches to rendering views can be found
 814      in the <a href="https://github.com/jashkenas/backbone/wiki/Backbone%2C-The-Primer">Backbone primer</a>.
 815    </p>
 816
 817    <h2 id="Routing">Routing with URLs</h2>
 818
 819    <img class="figure" src="docs/images/intro-routing.svg" alt="Routing">
 820
 821    <p>
 822      In rich web applications, we still want to provide linkable,
 823      bookmarkable, and shareable URLs to meaningful locations within an app.
 824      Use the <b>Router</b> to update the browser URL whenever the user
 825      reaches a new "place" in your app that they might want to bookmark or share.
 826      Conversely, the <b>Router</b> detects changes to the URL &mdash; say,
 827      pressing the "Back" button &mdash; and can tell your application exactly where you
 828      are now.
 829    </p>
 830
 831    <h2 id="Events">Backbone.Events</h2>
 832
 833    <p>
 834      <b>Events</b> is a module that can be mixed in to any object, giving the
 835      object the ability to bind and trigger custom named events. Events do not
 836      have to be declared before they are bound, and may take passed arguments.
 837      For example:
 838    </p>
 839
 840<pre class="runnable">
 841var object = {};
 842
 843_.extend(object, Backbone.Events);
 844
 845object.on("alert", function(msg) {
 846  alert("Triggered " + msg);
 847});
 848
 849object.trigger("alert", "an event");
 850</pre>
 851
 852    <p>
 853      For example, to make a handy event dispatcher that can coordinate events
 854      among different areas of your application: <tt>var dispatcher = _.clone(Backbone.Events)</tt>
 855    </p>
 856
 857    <p id="Events-on">
 858      <b class="header">on</b><code>object.on(event, callback, [context])</code><span class="alias">Alias: bind</span>
 859      <br />
 860      Bind a <b>callback</b> function to an object. The callback will be invoked
 861      whenever the <b>event</b> is fired.
 862      If you have a large number of different events on a page, the convention is to use colons to
 863      namespace them: <tt>"poll:start"</tt>, or <tt>"change:selection"</tt>.
 864      The event string may also be a space-delimited list of several events...
 865    </p>
 866
 867<pre>
 868book.on("change:title change:author", ...);
 869</pre>
 870
 871    <p>
 872      To supply a <b>context</b> value for <tt>this</tt> when the callback is invoked,
 873      pass the optional third argument: <tt>model.on('change', this.render, this)</tt>
 874    </p>
 875
 876    <p>
 877      Callbacks bound to the special
 878      <tt>"all"</tt> event will be triggered when any event occurs, and are passed
 879      the name of the event as the first argument. For example, to proxy all events
 880      from one object to another:
 881    </p>
 882
 883<pre>
 884proxy.on("all", function(eventName) {
 885  object.trigger(eventName);
 886});
 887</pre>
 888
 889    <p>
 890      All Backbone event methods also support an event map syntax, as an alternative
 891      to positional arguments:
 892    </p>
 893
 894<pre>
 895book.on({
 896  "change:title": titleView.update,
 897  "change:author": authorPane.update,
 898  "destroy": bookView.remove
 899});
 900</pre>
 901
 902    <p id="Events-off">
 903      <b class="header">off</b><code>object.off([event], [callback], [context])</code><span class="alias">Alias: unbind</span>
 904      <br />
 905      Remove a previously-bound <b>callback</b> function from an object. If no
 906      <b>context</b> is specified, all of the versions of the callback with
 907      different contexts will be removed. If no
 908      callback is specified, all callbacks for the <b>event</b> will be
 909      removed. If no event is specified, callbacks for <i>all</i> events
 910      will be removed.
 911    </p>
 912
 913<pre>
 914// Removes just the `onChange` callback.
 915object.off("change", onChange);
 916
 917// Removes all "change" callbacks.
 918object.off("change");
 919
 920// Removes the `onChange` callback for all events.
 921object.off(null, onChange);
 922
 923// Removes all callbacks for `context` for all events.
 924object.off(null, null, context);
 925
 926// Removes all callbacks on `object`.
 927object.off();
 928</pre>
 929
 930    <p>
 931      Note that calling <tt>model.off()</tt>, for example, will indeed remove <i>all</i> events
 932      on the model &mdash; including events that Backbone uses for internal bookkeeping.
 933    </p>
 934
 935    <p id="Events-trigger">
 936      <b class="header">trigger</b><code>object.trigger(event, [*args])</code>
 937      <br />
 938      Trigger callbacks for the given <b>event</b>, or space-delimited list of events.
 939      Subsequent arguments to <b>trigger</b> will be passed along to the
 940      event callbacks.
 941    </p>
 942
 943    <p id="Events-once">
 944      <b class="header">once</b><code>object.once(event, callback, [context])</code>
 945      <br />
 946      Just like <a href="#Events-on">on</a>, but causes the bound callback to fire
 947      only once before being removed. Handy for saying "the next time that X happens, do this".
 948      When multiple events are passed in using the space separated syntax, the event will fire once
 949      for every event you passed in, not once for a combination of all events
 950    </p>
 951
 952    <p id="Events-listenTo">
 953      <b class="header">listenTo</b><code>object.listenTo(other, event, callback)</code>
 954      <br />
 955      Tell an <b>object</b> to listen to a particular event on an <b>other</b>
 956      object.  The advantage of using this form, instead of <tt>other.on(event,
 957      callback, object)</tt>, is that <b>listenTo</b> allows the <b>object</b>
 958      to keep track of the events, and they can be removed all at once later
 959      on.  The <b>callback</b> will always be called with <b>object</b> as
 960      context.
 961    </p>
 962
 963<pre>
 964view.listenTo(model, 'change', view.render);
 965</pre>
 966
 967    <p id="Events-stopListening">
 968      <b class="header">stopListening</b><code>object.stopListening([other], [event], [callback])</code>
 969      <br />
 970      Tell an <b>object</b> to stop listening to events. Either call
 971      <b>stopListening</b> with no arguments to have the <b>object</b> remove
 972      all of its <a href="#Events-listenTo">registered</a> callbacks ... or be more
 973      precise by telling it to remove just the events it's listening to on a
 974      specific object, or a specific event, or just a specific callback.
 975    </p>
 976
 977<pre>
 978view.stopListening();
 979
 980view.stopListening(model);
 981</pre>
 982
 983    <p id="Events-listenToOnce">
 984      <b class="header">listenToOnce</b><code>object.listenToOnce(other, event, callback)</code>
 985      <br />
 986      Just like <a href="#Events-listenTo">listenTo</a>, but causes the bound
 987      callback to fire only once before being removed.
 988    </p>
 989
 990    <p id="Events-catalog">
 991      <b class="header">Catalog of Events</b>
 992      <br />
 993      Here's the complete list of built-in Backbone events, with arguments.
 994      You're also free to trigger your own events on Models, Collections and
 995      Views as you see fit. The <tt>Backbone</tt> object itself mixes in <tt>Events</tt>,
 996      and can be used to emit any global events that your application needs.
 997    </p>
 998
 999    <ul class="small">
1000      <li><b>"add"</b> (model, collection, options) &mdash; when a model is added to a collection.</li>
1001      <li><b>"remove"</b> (model, collection, options) &mdash; when a model is removed from a collection.</li>
1002      <li><b>"update"</b> (collection, options) &mdash; single event triggered after any number of models have been added or removed from a collection.</li>
1003      <li><b>"reset"</b> (collection, options) &mdash; when the collection's entire contents have been replaced.</li>
1004      <li><b>"sort"</b> (collection, options) &mdash; when the collection has been re-sorted.</li>
1005      <li><b>"change"</b> (model, options) &mdash; when a model's attributes have changed.</li>
1006      <li><b>"change:[attribute]"</b> (model, value, options) &mdash; when a specific attribute has been updated.</li>
1007      <li><b>"destroy"</b> (model, collection, options) &mdash; when a model is <a href="#Model-destroy">destroyed</a>.</li>
1008      <li><b>"request"</b> (model_or_collection, xhr, options) &mdash; when a model or collection has started a request to the server.</li>
1009      <li><b>"sync"</b> (model_or_collection, resp, options) &mdash; when a model or collection has been successfully synced with the server.</li>
1010      <li><b>"error"</b> (model_or_collection, resp, options) &mdash; when a model's or collection's request to the server has failed.</li>
1011      <li><b>"invalid"</b> (model, error, options) &mdash; when a model's <a href="#Model-validate">validation</a> fails on the client.</li>
1012      <li><b>"route:[name]"</b> (params) &mdash; Fired by the router when a specific route is matched.</li>
1013      <li><b>"route"</b> (route, params) &mdash; Fired by the router when <i>any</i> route has been matched.</li>
1014      <li><b>"route"</b> (router, route, params) &mdash; Fired by history when <i>any</i> route has been matched.</li>
1015      <li><b>"all"</b> &mdash; this special event fires for <i>any</i> triggered event, passing the event name as the first argument.</li>
1016    </ul>
1017
1018    <p>
1019      Generally speaking, when calling a function that emits an event
1020      (<tt>model.set</tt>, <tt>collection.add</tt>, and so on...),
1021      if you'd like to prevent the event from being triggered, you may pass
1022      <tt>{silent: true}</tt> as an option. Note that this is <i>rarely</i>,
1023      perhaps even never, a good idea. Passing through a specific flag
1024      in the options for your event callback to look at, and choose to ignore,
1025      will usually work out better.
1026    </p>
1027
1028    <h2 id="Model">Backbone.Model</h2>
1029
1030    <p>
1031      <b>Models</b> are the heart of any JavaScript application, containing
1032      the interactive data as well as a large part of the logic surrounding it:
1033      conversions, validations, computed properties, and access control. You
1034      extend <b>Backbone.Model</b> with your domain-specific methods, and
1035      <b>Model</b> provides a basic set of functionality for managing changes.
1036    </p>
1037
1038    <p>
1039      The following is a contrived example, but it demonstrates defining a model
1040      with a custom method, setting an attribute, and firing an event keyed
1041      to changes in that specific attribute.
1042      After running this code once, <tt>sidebar</tt> will be
1043      available in your browser's console, so you can play around with it.
1044    </p>
1045
1046<pre class="runnable">
1047var Sidebar = Backbone.Model.extend({
1048  promptColor: function() {
1049    var cssColor = prompt("Please enter a CSS color:");
1050    this.set({color: cssColor});
1051  }
1052});
1053
1054window.sidebar = new Sidebar;
1055
1056sidebar.on('change:color', function(model, color) {
1057  $('#sidebar').css({background: color});
1058});
1059
1060sidebar.set({color: 'white'});
1061
1062sidebar.promptColor();
1063</pre>
1064
1065    <p id="Model-extend">
1066      <b class="header">extend</b><code>Backbone.Model.extend(properties, [classProperties])</code>
1067      <br />
1068      To create a <b>Model</b> class of your own, you extend <b>Backbone.Model</b>
1069      and provide instance <b>properties</b>, as well as optional
1070      <b>classProperties</b> to be attached directly to the constructor function.
1071    </p>
1072
1073    <p>
1074      <b>extend</b> correctly sets up the prototype chain, so subclasses created
1075      with <b>extend</b> can be further extended and subclassed as far as you like.
1076    </p>
1077
1078<pre>
1079var Note = Backbone.Model.extend({
1080
1081  initialize: function() { ... },
1082
1083  author: function() { ... },
1084
1085  coordinates: function() { ... },
1086
1087  allowedToEdit: function(account) {
1088    return true;
1089  }
1090
1091});
1092
1093var PrivateNote = Note.extend({
1094
1095  allowedToEdit: function(account) {
1096    return account.owns(this);
1097  }
1098
1099});
1100</pre>
1101
1102    <p class="warning">
1103        Brief aside on <tt>super</tt>: JavaScript does not provide
1104        a simple way to call super &mdash; the function of the same name defined
1105        higher on the prototype chain. If you override a core function like
1106        <tt>set</tt>, or <tt>save</tt>, and you want to invoke the
1107        parent object's implementation, you'll have to explicitly call it, along these lines:
1108    </p>
1109
1110<pre>
1111var Note = Backbone.Model.extend({
1112  set: function(attributes, options) {
1113    Backbone.Model.prototype.set.apply(this, arguments);
1114    ...
1115  }
1116});
1117</pre>
1118
1119    <p id="Model-constructor">
1120      <b class="header">constructor / initialize</b><code>new Model([attributes], [options])</code>
1121      <br />
1122      When creating an instance of a model, you can pass in the initial values
1123      of the <b>attributes</b>, which will be <a href="#Model-set">set</a> on the
1124      model. If you define an <b>initialize</b> function, it will be invoked when
1125      the model is created.
1126    </p>
1127
1128<pre>
1129new Book({
1130  title: "One Thousand and One Nights",
1131  author: "Scheherazade"
1132});
1133</pre>
1134
1135    <p>
1136      In rare cases, if you're looking to get fancy,
1137      you may want to override <b>constructor</b>, which allows
1138      you to replace the actual constructor function for your model.
1139    </p>
1140
1141<pre>
1142var Library = Backbone.Model.extend({
1143  constructor: function() {
1144    this.books = new Books();
1145    Backbone.Model.apply(this, arguments);
1146  },
1147  parse: function(data, options) {
1148    this.books.reset(data.books);
1149    return data.library;
1150  }
1151});
1152</pre>
1153
1154    <p>
1155      If you pass a <tt>{collection: ...}</tt> as the <b>options</b>, the model
1156      gains a <tt>collection</tt> property that will be used to indicate which
1157      collection the model belongs to, and is used to help compute the model's
1158      <a href="#Model-url">url</a>. The <tt>model.collection</tt> property is
1159      normally created automatically when you first add a model to a collection.
1160      Note that the reverse is not true, as passing this option to the constructor
1161      will not automatically add the model to the collection. Useful, sometimes.
1162    </p>
1163
1164    <p>
1165      If <tt>{parse: true}</tt> is passed as an <b>option</b>, the <b>attributes</b>
1166      will first be converted by <a href="#Model-parse">parse</a> before being
1167      <a href="#Model-set">set</a> on the model.
1168    </p>
1169
1170    <p id="Model-get">
1171      <b class="header">get</b><code>model.get(attribute)</code>
1172      <br />
1173      Get the current value of an attribute from the model. For example:
1174      <tt>note.get("title")</tt>
1175    </p>
1176
1177    <p id="Model-set">
1178      <b class="header">set</b><code>model.set(attributes, [options])</code>
1179      <br />
1180      Set a hash of attributes (one or many) on the model. If any of the attributes
1181      change the model's state, a <tt>"change"</tt> event will be triggered on the model.
1182      Change events for specific attributes are also triggered, and you can bind
1183      to those as well, for example: <tt>change:title</tt>, and <tt>change:content</tt>.
1184      You may also pass individual keys and values.
1185    </p>
1186
1187<pre>
1188note.set({title: "March 20", content: "In his eyes she eclipses..."});
1189
1190book.set("title", "A Scandal in Bohemia");
1191</pre>
1192
1193    <p id="Model-escape">
1194      <b class="header">escape</b><code>model.escape(attribute)</code>
1195      <br />
1196      Similar to <a href="#Model-get">get</a>, but returns the HTML-escaped version
1197      of a model's attribute. If you're interpolating data from the model into
1198      HTML, using <b>escape</b> to retrieve attributes will prevent
1199      <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">XSS</a> attacks.
1200    </p>
1201
1202<pre class="runnable">
1203var hacker = new Backbone.Model({
1204  name: "&lt;script&gt;alert('xss')&lt;/script&gt;"
1205});
1206
1207alert(hacker.escape('name'));
1208</pre>
1209
1210    <p id="Model-has">
1211      <b class="header">has</b><code>model.has(attribute)</code>
1212      <br />
1213      Returns <tt>true</tt> if the attribute is set to a non-null or non-undefined
1214      value.
1215    </p>
1216
1217<pre>
1218if (note.has("title")) {
1219  ...
1220}
1221</pre>
1222
1223    <p id="Model-unset">
1224      <b class="header">unset</b><code>model.unset(attribute, [options])</code>
1225      <br />
1226      Remove an attribute by deleting it from the internal attributes hash.
1227      Fires a <tt>"change"</tt> event unless <tt>silent</tt> is passed as an option.
1228    </p>
1229
1230    <p id="Model-clear">
1231      <b class="header">clear</b><code>model.clear([options])</code>
1232      <br />
1233      Removes all attributes from the model, including the <tt>id</tt> attribute. Fires a <tt>"change"</tt> event unless
1234      <tt>silent</tt> is passed as an option.
1235    </p>
1236
1237    <p id="Model-id">
1238      <b class="header">id</b><code>model.id</code>
1239      <br />
1240      A special property of models, the <b>id</b> is an arbitrary string
1241      (integer id or UUID). If you set the <b>id</b> in the
1242      attributes hash, it will be copied onto the model as a direct property.
1243      Models can be retrieved by id from collections, and the id is used to generate
1244      model URLs by default.
1245    </p>
1246
1247    <p id="Model-idAttribute">
1248      <b class="header">idAttribute</b><code>model.idAttribute</code>
1249      <br />
1250      A model's unique identifier is stored under the <tt>id</tt> attribute.
1251      If you're directly communicating with a backend (CouchDB, MongoDB) that uses
1252      a different unique key, you may set a Model's <tt>idAttribute</tt> to
1253      transparently map from that key to <tt>id</tt>.
1254
1255<pre class="runnable">
1256var Meal = Backbone.Model.extend({
1257  idAttribute: "_id"
1258});
1259
1260var cake = new Meal({ _id: 1, name: "Cake" });
1261alert("Cake id: " + cake.id);
1262</pre>
1263    </p>
1264
1265    <p id="Model-cid">
1266      <b class="header">cid</b><code>model.cid</code>
1267      <br />
1268      A special property of models, the <b>cid</b> or client id is a unique identifier
1269      automatically assigned to all models when they're first created. Client ids
1270      are handy when the model has not yet been saved to the server, and does not
1271      yet have its eventual true <b>id</b>, but already needs to be visible in the UI.
1272    </p>
1273
1274    <p id="Model-attributes">
1275      <b class="header">attributes</b><code>model.attributes</code>
1276      <br />
1277      The <b>attributes</b> property is the internal hash containing the model's
1278      state &mdash; usually (but not necessarily) a form of the JSON object
1279      representing the model data on the server. It's often a straightforward
1280      serialization of a row from the database, but it could also be client-side
1281      computed state.
1282    </p>
1283
1284    <p>
1285      Please use <a href="#Model-set">set</a> to update the <b>attributes</b>
1286      instead of modifying them directly. If you'd like to retrieve and munge a
1287      copy of the model's attributes, use <tt>_.clone(model.attributes)</tt>
1288      instead.
1289    </p>
1290
1291    <p class="warning">
1292      Due to the fact that <a href="#Events">Events</a> accepts space separated
1293      lists of events, attribute names should not include spaces.
1294    </p>
1295
1296    <p id="Model-changed">
1297      <b class="header">changed</b><code>model.changed</code>
1298      <br />
1299      The <b>changed</b> property is the internal hash containing all the attributes
1300      that have changed since its last <a href="#Model-set">set</a>.
1301      Please do not update <b>changed</b> directly since its state is internally maintained
1302      by <a href="#Model-set">set</a>.  A copy of <b>changed</b> can be acquired from
1303      <a href="#Model-changedAttributes">changedAttributes</a>.
1304    </p>
1305
1306    <p id="Model-defaults">
1307      <b class="header">defaults</b><code>model.defaults or model.defaults()</code>
1308      <br />
1309      The <b>defaults</b> hash (or function) can be used to specify the default
1310      attributes for your model. When creating an instance of the model,
1311      any unspecified attributes will be set to their default value.
1312    </p>
1313
1314<pre class="runnable">
1315var Meal = Backbone.Model.extend({
1316  defaults: {
1317    "appetizer":  "caesar salad",
1318    "entree":     "ravioli",
1319    "dessert":    "cheesecake"
1320  }
1321});
1322
1323alert("Dessert will be " + (new Meal).get('dessert'));
1324</pre>
1325
1326    <p class="warning">
1327      Remember that in JavaScript, objects are passed by reference, so if you
1328      include an object as a default value, it will be s…

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