PageRenderTime 111ms CodeModel.GetById 6ms app.highlight 83ms RepoModel.GetById 1ms app.codeStats 1ms

/index.html

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

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