/index.html
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>» <a href="http://github.com/jashkenas/backbone">GitHub Repository</a></li> 310 <li>» <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 & 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 & 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 — 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 — 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 — 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 — say, 855 pressing the "Back" button — 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 — 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) — when a model is added to a collection.</li> 1030 <li><b>"remove"</b> (model, collection, options) — when a model is removed from a collection.</li> 1031 <li><b>"update"</b> (collection, options) — 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) — when the collection's entire contents have been <a href="#Collection-reset">reset</a>.</li> 1033 <li><b>"sort"</b> (collection, options) — when the collection has been re-sorted.</li> 1034 <li><b>"change"</b> (model, options) — when a model's attributes have changed.</li> 1035 <li><b>"change:[attribute]"</b> (model, value, options) — when a specific attribute has been updated.</li> 1036 <li><b>"destroy"</b> (model, collection, options) — when a model is <a href="#Model-destroy">destroyed</a>.</li> 1037 <li><b>"request"</b> (model_or_collection, xhr, options) — when a model or collection has started a request to the server.</li> 1038 <li><b>"sync"</b> (model_or_collection, response, options) — when a model or collection has been successfully synced with the server.</li> 1039 <li><b>"error"</b> (model_or_collection, xhr, options) — when a model's or collection's request to the server has failed.</li> 1040 <li><b>"invalid"</b> (model, error, options) — when a model's <a href="#Model-validate">validation</a> fails on the client.</li> 1041 <li><b>"route:[name]"</b> (params) — Fired by the router when a specific route is matched.</li> 1042 <li><b>"route"</b> (route, params) — Fired by the router when <i>any</i> route has been matched.</li> 1043 <li><b>"route"</b> (router, route, params) — Fired by history when <i>any</i> route has been matched.</li> 1044 <li><b>"all"</b> — 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 — 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