PageRenderTime 8ms CodeModel.GetById 4ms app.highlight 33ms RepoModel.GetById 1ms app.codeStats 0ms

/index.html

https://github.com/ando19721226/Backbone
HTML | 2735 lines | 2371 code | 300 blank | 64 comment | 0 complexity | a02703c3e5763caf34b6b672acf16a5e MD5 | raw file

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

   1<!DOCTYPE HTML>
   2<html lang="ja">
   3<head>
   4    <meta charset="UTF-8" />
   5    <title>Backbone.js 日本語リファレンス</title>
   6    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
   7    <link rel="icon" href="http://backbonejs.org/docs/images/favicon.ico" />
   8	<style type="text/css">
   9		@media print {
  10			.no-print { display: none }
  11		}
  12	</style>
  13</head>
  14<body>
  15   	<div class="container">
  16
  17   		<h1>Backbone.js 日本語リファレンス</h1>
  18
  19		<div class="alert alert-info">
  20			このドキュメントは、<a href="http://www.adventar.org/calendars/15">Backbone.js Advent Calendar 2012</a> 6日目にエントリーしたものです。<br />2012年12月現在での <code>Edge Version</code> を元に作成しました。安定版の0.9.2とは異なる部分があります。
  21		</div>
  22
  23		<ul class="no-print">
  24			<li>Events</li>
  25			<ul>
  26				<li><a href="#Events-on">on</a></li>
  27				<li><a href="#Events-off">off</a></li>
  28				<li><a href="#Events-trigger">trigger</a></li>
  29				<li><a href="#Events-once">once</a></li>
  30				<li><a href="#Events-listenTo">listenTo</a></li>
  31				<li><a href="#Events-stopListening">stopListening</a></li>
  32			</ul>
  33			<li>Model</li>
  34			<ul>
  35				<li><a href="#Model-extend">extend</a></li>
  36				<li><a href="#Model-constractor">constractor</a></li>
  37				<li><a href="#Model-initialize">initialize</a></li>
  38				<li><a href="#Model-get">get</a></li>
  39				<li><a href="#Model-set">set</a></li>
  40				<li><a href="#Model-escape">escape</a></li>
  41				<li><a href="#Model-has">has</a></li>
  42				<li><a href="#Model-unset">unset</a></li>
  43				<li><a href="#Model-clear">clear</a></li>
  44				<li><a href="#Model-id">id</a></li>
  45				<li><a href="#Model-idAttribute">idAttribute</a></li>
  46				<li><a href="#Model-cid">cid</a></li>
  47				<li><a href="#Model-attributes">attributes</a></li>
  48				<li><a href="#Model-defaults">defaults</a></li>
  49				<li><a href="#Model-toJSON">toJSON</a></li>
  50				<li><a href="#Model-fetch">fetch</a></li>
  51				<li><a href="#Model-save">save</a></li>
  52				<li><a href="#Model-destroy">destroy</a></li>
  53				<li><a href="#Model-validate">validate</a></li>
  54				<li><a href="#Model-url">url</a></li>
  55				<li><a href="#Model-urlRoot">urlRoot</a></li>
  56				<li><a href="#Model-parse">parse</a></li>
  57				<li><a href="#Model-clone">clone</a></li>
  58				<li><a href="#Model-isNew">isNew</a></li>
  59				<li><a href="#Model-change">change</a></li>
  60				<li><a href="#Model-hasChanged">hasChanged</a></li>
  61				<li><a href="#Model-changedAttributes">changedAttributes</a></li>
  62				<li><a href="#Model-previous">previous</a></li>
  63				<li><a href="#Model-previousAttributes">previousAttributes</a></li>
  64			</ul>
  65			<li>Collection</li>
  66			<ul>
  67				<li><a href="#Collection-extend">extend</a></li>
  68				<li><a href="#Collection-constractor">constractor</a></li>
  69				<li><a href="#Collection-initialize">initialize</a></li>
  70				<li><a href="#Collection-model">model</a></li>
  71				<li><a href="#Collection-models">models</a></li>
  72				<li><a href="#Collection-toJSON">toJSON</a></li>
  73				<li><a href="#Collection-sync">sync</a></li>
  74				<li><a href="#Collection-UnderscoreMethods">Underscore Methods</a></li>
  75				<li><a href="#Collection-add">add</a></li>
  76				<li><a href="#Collection-remove">remove</a></li>
  77				<li><a href="#Collection-reset">reset</a></li>
  78				<li><a href="#Collection-update">update</a></li>
  79				<li><a href="#Collection-get">get</a></li>
  80				<li><a href="#Collection-at">at</a></li>
  81				<li><a href="#Collection-push">push</a></li>
  82				<li><a href="#Collection-pop">pop</a></li>
  83				<li><a href="#Collection-unshift">unshift</a></li>
  84				<li><a href="#Collection-shift">shift</a></li>
  85				<li><a href="#Collection-slice">slice</a></li>
  86				<li><a href="#Collection-length">length</a></li>
  87				<li><a href="#Collection-comparator">comparator</a></li>
  88				<li><a href="#Collection-sort">sort</a></li>
  89				<li><a href="#Collection-pluck">pluck</a></li>
  90				<li><a href="#Collection-where">where</a></li>
  91				<li><a href="#Collection-url">url</a></li>
  92				<li><a href="#Collection-parse">parse</a></li>
  93				<li><a href="#Collection-clone">clone</a></li>
  94				<li><a href="#Collection-fetch">fetch</a></li>
  95				<li><a href="#Collection-create">create</a></li>
  96			</ul>
  97			<li>Router</li>
  98			<ul>
  99				<li><a href="#Router-extend">extend</a></li>
 100				<li><a href="#Router-constractor">constractor</a></li>
 101				<li><a href="#Router-initialize">initialize</a></li>
 102				<li><a href="#Router-routes">routes</a></li>
 103				<li><a href="#Router-route">route</a></li>
 104				<li><a href="#Router-navigate">navigate</a></li>
 105			</ul>
 106			<li>Sync</li>
 107			<ul>
 108				<li><a href="#Sync">Backbone.sync</a></li>
 109				<li><a href="#Sync-ajax">Backbone.ajax</a></li>
 110				<li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
 111				<li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
 112			</ul>
 113			<li>View</li>
 114			<ul>
 115				<li><a href="#View-extend">extend</a></li>
 116				<li><a href="#View-constractor">constractor</a></li>
 117				<li><a href="#View-initialize">initialize</a></li>
 118				<li><a href="#View-options">options</a></li>
 119				<li><a href="#View-el">el</a></li>
 120				<li><a href="#View-$el">$el</a></li>
 121				<li><a href="#View-setElement">setElement</a></li>
 122				<li><a href="#View-model">model</a></li>
 123				<li><a href="#View-collection">collection</a></li>
 124				<li><a href="#View-id">id</a></li>
 125				<li><a href="#View-attributes">attributes</a></li>
 126				<li><a href="#View-className">className</a></li>
 127				<li><a href="#View-tagName">tagName</a></li>
 128				<li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>
 129				<li><a href="#View-render">render</a></li>
 130				<li><a href="#View-remove">remove</a></li>
 131				<li><a href="#View-make">make</a></li>
 132				<li><a href="#View-events">events</a></li>
 133				<li><a href="#View-delegateEvents">delegateEvents</a></li>
 134				<li><a href="#View-undelegateEvents">undelegateEvents</a></li>
 135				<li><a href="#View-cid">cid</a></li>
 136			</ul>
 137		</ul>
 138
 139		<hr />
 140
 141		<h2>Backbone.Events</h2>
 142		<hr />
 143
 144		<!-- on -->
 145		<h3 id="Events-on">object.on(events, callback, [context])</h3>
 146		<p>
 147			オブジェクトに対して、イベントが発火した時に呼び出したいコールバック関数を設定します。
 148		</p>
 149		<h4>events</h4>
 150		<p>
 151			イベント名です。半角スペースで区切って複数のイベント名を指定することもできます。<code>all</code> を指定すると、どのイベントが発火した場合にもコールバック関数が呼ばれます。
 152		</p>
 153		<p>
 154			イベント名とコールバック関数のペアをオブジェクトリテラルで設定することもできます。この場合、第2引数はcontextになります。
 155		</p>
 156		<pre>
 157var func1 = function () {
 158	console.log(this.msg1);
 159};
 160
 161var func2 = function (model) {
 162	console.log(this.msg2);
 163};
 164
 165var msg = {
 166	msg1: "Changed!",
 167	msg2: "Destroyed!"
 168};
 169
 170var model = new Backbone.Model();
 171model.on({change: func1, destroy: func2}, msg);
 172
 173model.set({name: "Tanaka"});	//-> Changed!
 174model.destroy();				//-> Destroyed!
 175		</pre>
 176		<h4>callback</h4>
 177		<p>
 178			イベントが発火すると呼ばれるコールバック関数です。コールバック関数に渡される引数は、イベントを発火させる<a href="#Events-trigger">triggerメソッド</a>が決定します。
 179		</p>
 180		<p>
 181			Backbone.jsが発火するイベントとコールバック関数の引数の対応は以下の通りです。
 182		</p>
 183		<p id="Events-eventList">
 184			<table class="table table-condensed table-bordered">
 185				<thead>
 186					<tr>
 187						<th>
 188							イベント
 189						</th>
 190						<th>
 191							引数
 192						</th>
 193					</tr>
 194				</thead>
 195				<tbody>
 196					<tr>
 197						<td>
 198							add
 199						</td>
 200						<td>
 201							model, collection, options
 202						</td>
 203					</tr>
 204					<tr>
 205						<td>
 206							remove
 207						</td>
 208						<td>
 209							model, collection, options
 210						</td>
 211					</tr>
 212					<tr>
 213						<td>
 214							reset
 215						</td>
 216						<td>
 217							collection, options
 218						</td>
 219					</tr>
 220					<tr>
 221						<td>
 222							sort
 223						</td>
 224						<td>
 225							collection, options
 226						</td>
 227					</tr>
 228					<tr>
 229						<td>
 230							change
 231						</td>
 232						<td>
 233							model, options
 234						</td>
 235					</tr>
 236					<tr>
 237						<td>
 238							change:[attribute]
 239						</td>
 240						<td>
 241							model, value, options
 242						</td>
 243					</tr>
 244					<tr>
 245						<td>
 246							destroy
 247						</td>
 248						<td>
 249							model, collection, options
 250						</td>
 251					</tr>
 252					<tr>
 253						<td>
 254							request
 255						</td>
 256						<td>
 257							model, xhr, options
 258						</td>
 259					</tr>
 260					<tr>
 261						<td>
 262							sync
 263						</td>
 264						<td>
 265							model, resp, options
 266						</td>
 267					</tr>
 268					<tr>
 269						<td>
 270							error
 271						</td>
 272						<td>
 273							model, xhr, options または model, error, options
 274						</td>
 275					</tr>
 276					<tr>
 277						<td>
 278							route:[name]
 279						</td>
 280						<td>
 281							*args(URLと関連付けたコールバック関数に渡される引数)
 282						</td>
 283					</tr>
 284					<tr>
 285						<td>
 286							all
 287						</td>
 288						<td>
 289							eventName, *args(イベントと関連付けたコールバック関数に渡される引数)
 290						</td>
 291					</tr>
 292				</tbody>
 293			</table>
 294		</p>
 295
 296		<h4>context</h4>
 297		<p>
 298			コールバック関数の中の<code>this</code>キーワードを束縛します。
 299		</p>
 300
 301		<hr />
 302
 303		<!-- off -->
 304		<h3 id="Events-off">object.off([events], [callback], [context])</h3>
 305		<p>
 306			設定されているイベントを削除します。全ての引数を省略すると、オブジェクトに設定されているイベントを全て削除します。
 307		</p>
 308		<h4>events</h4>
 309		<p>
 310			削除するイベント名です。半角スペースで区切って複数のイベント名を指定することもできます。省略する場合はnullを渡します。
 311		</p>
 312		<h4>callback</h4>
 313		<p>
 314			削除するイベントを、コールバック関数で指定します。省略する場合はnullを渡します。
 315		</p>
 316		<h4>context</h4>
 317		<p>
 318			削除するイベントを、<code>this</code> に束縛しているオブジェクトで指定します。省略する場合はnullを渡します。
 319		</p>
 320
 321		<hr />
 322
 323		<!-- trigger -->
 324		<h3 id="Events-trigger">object.trigger(events, [*args])</h3>
 325		<p>
 326			イベントを発火します。また、<a href="#Events-on">onメソッド</a>で設定したコールバック関数へ渡す引数を指定します。
 327		</p>
 328		<h4>events</h4>
 329		<p>
 330			発火させるイベント名です。複数のイベントを空白で区切って指定できます。
 331		</p>
 332		<h4>args</h4>
 333		<p>
 334			イベントと関連付けされているコールバック関数の引数に渡されます。
 335		</p>
 336		<pre>
 337var user = {name: "Tanaka"};
 338_.extend(user, Backbone.Events);
 339
 340user.on("Say", function (obj, msg) {
 341    console.log(obj.name + " said " + msg);
 342});
 343
 344user.trigger("Say", user, "Hello.");   //-> Tanaka said Hello.
 345		</pre>
 346		<p>
 347			なお、Backbone.jsのコレクションは、所有するモデルの全てのイベントを監視しており、モデルがイベントを発火すると同じイベントを発火します。
 348		</p>
 349		<pre>
 350var User = Backbone.Model.extend({
 351    validate: function (attr) {
 352        if (_.isEmpty(attr.name)) {
 353            return "invalid!";
 354        }
 355    }
 356});
 357var user = new User();
 358
 359var users = new Backbone.Collection();
 360users.add(user);
 361users.on("all", function (eventName) {
 362    console.log(eventName);
 363});
 364
 365user.set({name:"tanaka"});
 366//-> change:name
 367//-> change
 368
 369user.set({name:""});
 370//-> error
 371		</pre>
 372
 373		<p>
 374			Backbone.jsのメソッドと発火されるイベントの対応は以下の通りです。
 375		</p>
 376		<p>
 377			<table class="table table-bordered table-condensed">
 378				<thead>
 379					<tr>
 380						<th>
 381							メソッド / イベント
 382						</th>
 383						<td style="width:60px">
 384							add
 385						</td>
 386						<td style="width:60px">
 387							remove
 388						</td>
 389						<td style="width:60px">
 390							reset
 391						</td>
 392						<td style="width:60px">
 393							sort
 394						</td>
 395						<td style="width:60px">
 396							change
 397						</td>
 398						<td style="width:60px">
 399							destroy
 400						</td>
 401						<td style="width:60px">
 402							request
 403						</td>
 404						<td style="width:60px">
 405							sync
 406						</td>
 407						<td style="width:60px">
 408							error
 409						</td>
 410						<td style="width:60px">
 411							route
 412						</td>
 413					</tr>
 414				</thead>
 415				<tbody>
 416					<tr>
 417						<td>
 418							model.set
 419						</td>
 420						<td> <!-- add -->
 421						</td>
 422						<td> <!-- remove -->
 423						</td>
 424						<td> <!-- reset -->
 425						</td>
 426						<td> <!-- sort -->
 427						</td>
 428						<td> <!-- change -->
 429							<div class="icon icon-ok">
 430						</td>
 431						<td> <!-- destroy -->
 432						</td>
 433						<td> <!-- request -->
 434						</td>
 435						<td> <!-- sync -->
 436						</td>
 437						<td> <!-- error -->
 438							<div class="icon icon-ok">
 439						</td>
 440						<td> <!-- route -->
 441						</td>
 442					</tr>
 443					<tr>
 444						<td>
 445							model.unset
 446						</td>
 447						<td> <!-- add -->
 448						</td>
 449						<td> <!-- remove -->
 450						</td>
 451						<td> <!-- reset -->
 452						</td>
 453						<td> <!-- sort -->
 454						</td>
 455						<td> <!-- change -->
 456							<div class="icon icon-ok">
 457						</td>
 458						<td> <!-- destroy -->
 459						</td>
 460						<td> <!-- request -->
 461						</td>
 462						<td> <!-- sync -->
 463						</td>
 464						<td> <!-- error -->
 465							<div class="icon icon-ok">
 466						</td>
 467						<td> <!-- route -->
 468						</td>
 469					</tr>
 470					<tr>
 471						<td>
 472							model.clear
 473						</td>
 474						<td> <!-- add -->
 475						</td>
 476						<td> <!-- remove -->
 477						</td>
 478						<td> <!-- reset -->
 479						</td>
 480						<td> <!-- sort -->
 481						</td>
 482						<td> <!-- change -->
 483							<div class="icon icon-ok">
 484						</td>
 485						<td> <!-- destroy -->
 486						</td>
 487						<td> <!-- request -->
 488						</td>
 489						<td> <!-- sync -->
 490						</td>
 491						<td> <!-- error -->
 492							<div class="icon icon-ok">
 493						</td>
 494						<td> <!-- route -->
 495						</td>
 496					</tr>
 497					<tr>
 498						<td>
 499							model.fetch
 500						</td>
 501						<td> <!-- add -->
 502						</td>
 503						<td> <!-- remove -->
 504						</td>
 505						<td> <!-- reset -->
 506						</td>
 507						<td> <!-- sort -->
 508						</td>
 509						<td> <!-- change -->
 510							<div class="icon icon-ok">
 511						</td>
 512						<td> <!-- destroy -->
 513						</td>
 514						<td> <!-- request -->
 515							<div class="icon icon-ok">
 516						</td>
 517						<td> <!-- sync -->
 518							<div class="icon icon-ok">
 519						</td>
 520						<td> <!-- error -->
 521							<div class="icon icon-ok">
 522						</td>
 523						<td> <!-- route -->
 524						</td>
 525					</tr>
 526					<tr>
 527						<td>
 528							model.save
 529						</td>
 530						<td> <!-- add -->
 531						</td>
 532						<td> <!-- remove -->
 533						</td>
 534						<td> <!-- reset -->
 535						</td>
 536						<td> <!-- sort -->
 537						</td>
 538						<td> <!-- change -->
 539							<div class="icon icon-ok">
 540						</td>
 541						<td> <!-- destroy -->
 542						</td>
 543						<td> <!-- request -->
 544							<div class="icon icon-ok">
 545						</td>
 546						<td> <!-- sync -->
 547							<div class="icon icon-ok">
 548						</td>
 549						<td> <!-- error -->
 550							<div class="icon icon-ok">
 551						</td>
 552						<td> <!-- route -->
 553						</td>
 554					</tr>
 555					<tr>
 556						<td>
 557							model.destroy
 558						</td>
 559						<td> <!-- add -->
 560						</td>
 561						<td> <!-- remove -->
 562						</td>
 563						<td> <!-- reset -->
 564						</td>
 565						<td> <!-- sort -->
 566						</td>
 567						<td> <!-- change -->
 568						</td>
 569						<td> <!-- destroy -->
 570							<div class="icon icon-ok">
 571						</td>
 572						<td> <!-- request -->
 573							<div class="icon icon-ok">
 574						</td>
 575						<td> <!-- sync -->
 576							<div class="icon icon-ok">
 577						</td>
 578						<td> <!-- error -->
 579							<div class="icon icon-ok">
 580						</td>
 581						<td> <!-- route -->
 582						</td>
 583					</tr>
 584					<tr>
 585						<td>
 586							model.validate
 587						</td>
 588						<td> <!-- add -->
 589						</td>
 590						<td> <!-- remove -->
 591						</td>
 592						<td> <!-- reset -->
 593						</td>
 594						<td> <!-- sort -->
 595						</td>
 596						<td> <!-- change -->
 597						</td>
 598						<td> <!-- destroy -->
 599						</td>
 600						<td> <!-- request -->
 601						</td>
 602						<td> <!-- sync -->
 603						</td>
 604						<td> <!-- error -->
 605							<div class="icon icon-ok">
 606						</td>
 607						<td> <!-- route -->
 608						</td>
 609					</tr>
 610					<tr>
 611						<td>
 612							model.change
 613						</td>
 614						<td> <!-- add -->
 615						</td>
 616						<td> <!-- remove -->
 617						</td>
 618						<td> <!-- reset -->
 619						</td>
 620						<td> <!-- sort -->
 621						</td>
 622						<td> <!-- change -->
 623							<div class="icon icon-ok">
 624						</td>
 625						<td> <!-- destroy -->
 626						</td>
 627						<td> <!-- request -->
 628						</td>
 629						<td> <!-- sync -->
 630						</td>
 631						<td> <!-- error -->
 632						</td>
 633						<td> <!-- route -->
 634						</td>
 635					</tr>
 636					<tr>
 637						<td>
 638							collection.add
 639						</td>
 640						<td> <!-- add -->
 641							<div class="icon icon-ok">
 642						</td>
 643						<td> <!-- remove -->
 644						</td>
 645						<td> <!-- reset -->
 646						</td>
 647						<td> <!-- sort -->
 648						</td>
 649						<td> <!-- change -->
 650						</td>
 651						<td> <!-- destroy -->
 652						</td>
 653						<td> <!-- request -->
 654						</td>
 655						<td> <!-- sync -->
 656						</td>
 657						<td> <!-- error -->
 658						</td>
 659						<td> <!-- route -->
 660						</td>
 661					</tr>
 662					<tr>
 663						<td>
 664							collection.push
 665						</td>
 666						<td> <!-- add -->
 667							<div class="icon icon-ok">
 668						</td>
 669						<td> <!-- remove -->
 670						</td>
 671						<td> <!-- reset -->
 672						</td>
 673						<td> <!-- sort -->
 674						</td>
 675						<td> <!-- change -->
 676						</td>
 677						<td> <!-- destroy -->
 678						</td>
 679						<td> <!-- request -->
 680						</td>
 681						<td> <!-- sync -->
 682						</td>
 683						<td> <!-- error -->
 684						</td>
 685						<td> <!-- route -->
 686						</td>
 687					</tr>
 688					<tr>
 689						<td>
 690							collection.unshift
 691						</td>
 692						<td> <!-- add -->
 693							<div class="icon icon-ok">
 694						</td>
 695						<td> <!-- remove -->
 696						</td>
 697						<td> <!-- reset -->
 698						</td>
 699						<td> <!-- sort -->
 700						</td>
 701						<td> <!-- change -->
 702						</td>
 703						<td> <!-- destroy -->
 704						</td>
 705						<td> <!-- request -->
 706						</td>
 707						<td> <!-- sync -->
 708						</td>
 709						<td> <!-- error -->
 710						</td>
 711						<td> <!-- route -->
 712						</td>
 713					</tr>
 714					<tr>
 715						<td>
 716							collection.remove
 717						</td>
 718						<td> <!-- add -->
 719						</td>
 720						<td> <!-- remove -->
 721							<div class="icon icon-ok">
 722						</td>
 723						<td> <!-- reset -->
 724						</td>
 725						<td> <!-- sort -->
 726						</td>
 727						<td> <!-- change -->
 728						</td>
 729						<td> <!-- destroy -->
 730						</td>
 731						<td> <!-- request -->
 732						</td>
 733						<td> <!-- sync -->
 734						</td>
 735						<td> <!-- error -->
 736						</td>
 737						<td> <!-- route -->
 738						</td>
 739					</tr>
 740					<tr>
 741						<td>
 742							collection.pop
 743						</td>
 744						<td> <!-- add -->
 745						</td>
 746						<td> <!-- remove -->
 747							<div class="icon icon-ok">
 748						</td>
 749						<td> <!-- reset -->
 750						</td>
 751						<td> <!-- sort -->
 752						</td>
 753						<td> <!-- change -->
 754						</td>
 755						<td> <!-- destroy -->
 756						</td>
 757						<td> <!-- request -->
 758						</td>
 759						<td> <!-- sync -->
 760						</td>
 761						<td> <!-- error -->
 762						</td>
 763						<td> <!-- route -->
 764						</td>
 765					</tr>
 766					<tr>
 767						<td>
 768							collection.shift
 769						</td>
 770						<td> <!-- add -->
 771						</td>
 772						<td> <!-- remove -->
 773							<div class="icon icon-ok">
 774						</td>
 775						<td> <!-- reset -->
 776						</td>
 777						<td> <!-- sort -->
 778						</td>
 779						<td> <!-- change -->
 780						</td>
 781						<td> <!-- destroy -->
 782						</td>
 783						<td> <!-- request -->
 784						</td>
 785						<td> <!-- sync -->
 786						</td>
 787						<td> <!-- error -->
 788						</td>
 789						<td> <!-- route -->
 790						</td>
 791					</tr>
 792					<tr>
 793						<td>
 794							collection.sort
 795						</td>
 796						<td> <!-- add -->
 797						</td>
 798						<td> <!-- remove -->
 799						</td>
 800						<td> <!-- reset -->
 801						</td>
 802						<td> <!-- sort -->
 803							<div class="icon icon-ok">
 804						</td>
 805						<td> <!-- change -->
 806						</td>
 807						<td> <!-- destroy -->
 808						</td>
 809						<td> <!-- request -->
 810						</td>
 811						<td> <!-- sync -->
 812						</td>
 813						<td> <!-- error -->
 814						</td>
 815						<td> <!-- route -->
 816						</td>
 817					</tr>
 818					<tr>
 819						<td>
 820							collection.reset
 821						</td>
 822						<td> <!-- add -->
 823						</td>
 824						<td> <!-- remove -->
 825						</td>
 826						<td> <!-- reset -->
 827							<div class="icon icon-ok">
 828						</td>
 829						<td> <!-- sort -->
 830						</td>
 831						<td> <!-- change -->
 832						</td>
 833						<td> <!-- destroy -->
 834						</td>
 835						<td> <!-- request -->
 836						</td>
 837						<td> <!-- sync -->
 838						</td>
 839						<td> <!-- error -->
 840						</td>
 841						<td> <!-- route -->
 842						</td>
 843					</tr>
 844					<tr>
 845						<td>
 846							collection.fetch
 847						</td>
 848						<td> <!-- add -->
 849							<div class="icon icon-ok">
 850						</td>
 851						<td> <!-- remove -->
 852						</td>
 853						<td> <!-- reset -->
 854							<div class="icon icon-ok">
 855						</td>
 856						<td> <!-- sort -->
 857						</td>
 858						<td> <!-- change -->
 859						</td>
 860						<td> <!-- destroy -->
 861						</td>
 862						<td> <!-- request -->
 863							<div class="icon icon-ok">
 864						</td>
 865						<td> <!-- sync -->
 866							<div class="icon icon-ok">
 867						</td>
 868						<td> <!-- error -->
 869							<div class="icon icon-ok">
 870						</td>
 871						<td> <!-- route -->
 872						</td>
 873					</tr>
 874					<tr>
 875						<td>
 876							collection.create
 877						</td>
 878						<td> <!-- add -->
 879							<div class="icon icon-ok">
 880						</td>
 881						<td> <!-- remove -->
 882						</td>
 883						<td> <!-- reset -->
 884						</td>
 885						<td> <!-- sort -->
 886						</td>
 887						<td> <!-- change -->
 888						</td>
 889						<td> <!-- destroy -->
 890						</td>
 891						<td> <!-- request -->
 892							<div class="icon icon-ok">
 893						</td>
 894						<td> <!-- sync -->
 895							<div class="icon icon-ok">
 896						</td>
 897						<td> <!-- error -->
 898							<div class="icon icon-ok">
 899						</td>
 900						<td> <!-- route -->
 901						</td>
 902					</tr>
 903					<tr>
 904						<td>
 905							router.navigate
 906						</td>
 907						<td> <!-- add -->
 908						</td>
 909						<td> <!-- remove -->
 910						</td>
 911						<td> <!-- reset -->
 912						</td>
 913						<td> <!-- sort -->
 914						</td>
 915						<td> <!-- change -->
 916						</td>
 917						<td> <!-- destroy -->
 918						</td>
 919						<td> <!-- request -->
 920						</td>
 921						<td> <!-- sync -->
 922						</td>
 923						<td> <!-- error -->
 924						</td>
 925						<td> <!-- route -->
 926							<div class="icon icon-ok">
 927						</td>
 928					</tr>
 929				</tbody>
 930			</table>
 931		</p>
 932
 933		<hr />
 934
 935		<!-- once -->
 936		<h3 id="Events-on">object.once(events, callback, [context])</h3>
 937		<p>
 938		</p>
 939
 940		<hr />
 941
 942		<!-- listenTo -->
 943		<h3 id="Events-listenTo">object.listenTo(other, event, callback)</h3>
 944		<p>
 945		</p>
 946
 947		<hr />
 948
 949		<!-- stopListening -->
 950		<h3 id="Events-stopListening">object.stopListening([other], [event], [callback])</h3>
 951		<p>
 952		</p>
 953
 954		<hr />
 955
 956		<h2>Backbone.Model</h2>
 957		<hr />
 958
 959		<!-- extend -->
 960		<h3 id="Model-extend">Backbone.Model.extend([properties], [classProperties])</h3>
 961		<p>
 962			<code>Backbone.Model</code> を継承した新しいモデルを作ります。
 963		</p>
 964		<h4>properties</h4>
 965		<p>
 966			インスタンスメンバを定義します。
 967		</p>
 968		<pre>
 969var User = Backbone.Model.extend({
 970    say: function () {
 971        console.log("Hello.");
 972    }
 973});
 974
 975var user = new User();
 976user.say(); //-> Hello.
 977		</pre>
 978		<h4>classProperties</h4>
 979		<p>
 980			静的メンバを定義します。以下はFactoryパターンの例です。
 981		</p>
 982		<pre>
 983var User = Backbone.Model.extend({
 984    openFile: function () {
 985        console.log(this.canOpen);
 986    }
 987}, {
 988    create: function (type) {
 989        if (type === "admin") {
 990            return new AdminUser;
 991        } else {
 992            return new NormalUser;
 993        }
 994    }
 995});
 996
 997var AdminUser = User.extend({
 998    canOpen: true
 999});
1000
1001var NormalUser = User.extend({
1002    canOpen: false
1003});
1004
1005var user1 = User.create("admin");
1006var user2 = User.create("normal");
1007
1008user1.openFile();   //-> true
1009user2.openFile();   //-> false
1010		</pre>
1011
1012		<hr />
1013
1014		<!-- constractor -->
1015		<h3 id="Model-constractor">new Model([attributes], [options])</h3>
1016		<p>
1017			コンストラクタです。
1018		</p>
1019		<h4>attributes</h4>
1020		<p>モデルの属性へ設定したい値をオブジェクトリテラルで指定します。</p>
1021		<pre>
1022var Model = Backbone.Model.extend();
1023var model = new Model({name: "Tanaka", country: "Japan"});
1024		</pre>
1025
1026		<h4>options</h4>
1027		<p>
1028			<code>options.parse = true</code> を設定すると、<a href="#Model-parse">parseメソッド</a>を実行します。
1029		</p>
1030		<pre>
1031var User = Backbone.Model.extend({
1032    parse: function (response) {
1033        return response.user;
1034    }
1035});
1036var user = new User({user: {name: "Tanaka"}}, {parse: true});
1037
1038console.log(user.toJSON());     //-> {name: "Tanaka"}
1039		</pre>
1040		<p>
1041			<code>options.collection</code> にコレクションを設定すると、<a href="#Model-url">urlメソッド</a>でモデルのURLをすぐに取得できるようになります。ただし、この時点ではモデルからコレクションへの一方的な参照がなされているだけで、コレクションにモデルが格納されたのではありません。
1042		</p>
1043		<pre>
1044var users = new Backbone.Collection();
1045users.url = "/hoge";
1046
1047var User = Backbone.Model.extend();
1048var user = new User({id: 1, name: "Tanaka"}, {collection: users});
1049
1050console.log(user.url());    //-> /hoge/1
1051console.log(users.length);  //-> 0
1052		</pre>
1053		<p>
1054			その他に、<a href="#Model-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます。
1055		</p>
1056
1057		<hr />
1058
1059		<!-- initialize -->
1060		<h3 id="Model-initialize">model.initialize([attributes], [options])</h3>
1061		<p>
1062			インスタンス生成時に呼ばれます。
1063		</p>
1064		<h4>attributes</h4>
1065		<p><a href="#Model-constractor">コンストラクタ</a>のattributesへ渡した値です。</p>
1066		<h4>options</h4>
1067		<p><a href="#Model-constractor">コンストラクタ</a>のoptionsへ渡した値です。</p>
1068
1069		<hr />
1070
1071		<!-- get -->
1072		<h3 id="Model-get">model.get(attribute)</h3>
1073		<p>
1074			モデルの属性値を取得します。
1075		</p>
1076
1077		<hr />
1078
1079		<!-- set -->
1080		<h3 id="Model-set">model.set(key, value, [options]) または set(attributes, [options])</h3>
1081		<p>
1082			モデルの属性値を設定します。属性値が現在の属性値と異なる場合、<a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
1083		</p>
1084		<h4>key, value</h4>
1085		<p>
1086			keyとvalueのペアで指定します。
1087		</p>
1088		<pre>
1089model.set("name", "Tanaka");
1090model.set("country", "Japan");
1091		</pre>
1092		<h4>attributes</h4>
1093		<p>
1094			オブジェクトリテラルで指定することもできます。
1095		</p>
1096		<pre>
1097model.set({name: "Tanaka", country: "Japan"});
1098		</pre>
1099		<h4>options</h4>
1100		<p>
1101			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
1102		</p>
1103		<pre>
1104var Model = Backbone.Model.extend({
1105    validate: function (attrs) {
1106        if (_.isEmpty(attrs.name)) {
1107            return "invalid!";
1108        }
1109    }
1110});
1111
1112var model = new Model();
1113
1114model.on("change", function () {
1115    console.log("changed!");
1116});
1117
1118model.on("error", function (model, error) {
1119    console.log(error);
1120});
1121
1122model.set({name: "Tanaka"});  //-> "changed!"
1123model.set({name: "Suzuki"}, {silent: true});
1124
1125model.set({name: ""});  //-> "invalid!"
1126model.set({name: ""}, {silent: true});
1127		</pre>
1128
1129		<hr />
1130
1131		<!-- escape -->
1132		<h3 id="Model-escape">model.escape(attribute)</h3>
1133		<p>
1134			<a href="#Model-get">getメソッド</a>と同じくモデルの属性値を取得しますが、HTMLをエスケープします。
1135		</p>
1136
1137		<hr />
1138
1139		<!-- has -->
1140		<h3 id="Model-has">model.has(attribute)</h3>
1141		<p>
1142			モデルが属性そのものを持っているかどうかを返します。
1143		</p>
1144		<pre>
1145var model = new Backbone.Model({name: ""});
1146
1147console.log(model.has("name"));     //-> true
1148console.log(model.has("country"));  //-> false
1149		</pre>
1150
1151		<hr />
1152
1153		<!-- unset -->
1154		<h3 id="Model-unset">model.unset(attribute, [options])</h3>
1155		<p>
1156			モデルから属性そのものを削除します。存在する属性であれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
1157		</p>
1158		<h4>options</h4>
1159		<p>
1160			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
1161		</p>
1162
1163		<hr />
1164
1165		<!-- clear -->
1166		<h3 id="Model-clear">model.clear([options])</h3>
1167		<p>
1168			モデルから属性そのものを全て削除します。属性が1つでも存在すれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
1169		</p>
1170		<h4>options</h4>
1171		<p>
1172			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
1173		</p>
1174
1175		<hr />
1176
1177		<!-- id -->
1178		<h3 id="Model-id">model.id</h3>
1179		<p>
1180			モデルを一意に識別するための識別子です。コレクションの中からモデルを取り出す際のキーとして使用したり、モデルごとに決まるURLの一部に使用されたりします。
1181		</p>
1182		<p>
1183			idは通常、<a href="#Model-fetch">fetchメソッド</a><a href="#Model-save">saveメソッド</a>によってバックエンド側で決定されますが、クライアントサイドで手動でidを設定する場合には、<a href="#Model-set">setメソッド</a>でモデルの属性値として設定します。モデルのidプロパティは自動的にその値を参照してくれます。
1184		</p>
1185		<pre>
1186var model = new Backbone.Model({
1187    id: 1,
1188    name: "Tanaka"
1189});
1190
1191console.log(model.toJSON());    //-> {id: 1, name: "Tanaka"}
1192console.log(model.id);          //-> 1
1193		</pre>
1194		<p>
1195			<a href="#Model-set">setメソッド</a>で設定せずに、idプロパティに直接設定することも可能ですが、モデルの属性値は変化しませんので注意が必要です。
1196		</p>
1197		<pre>
1198var model = new Backbone.Model({
1199    name: "Tanaka"
1200});
1201model.id = 1;
1202
1203console.log(model.id);          //-> 1
1204console.log(model.toJSON());    //-> {name: "Tanaka"}
1205
1206model = new Backbone.Model({
1207    id: 1,
1208    name: "Tanaka"
1209});
1210model.id = 2;
1211
1212console.log(model.id);          //-> 2
1213console.log(model.toJSON());    //-> {id: 1, name: "Tanaka"}
1214		</pre>
1215
1216		<hr />
1217
1218		<!-- idAttribute -->
1219		<h3 id="Model-idAttribute">model.idAttribute</h3>
1220		<p>
1221			モデルの属性の"id"というネーミングは変更できます。例えばバックエンドのデータベースのカラム名と合わせると便利です。ただし、モデルの<a href="#Model-id">idプロパティ</a>は"id"のままです。
1222		</p>
1223		<pre>
1224var Model = Backbone.Model.extend({
1225    idAttribute: "user_id"
1226});
1227
1228var model = new Model({
1229    user_id: 1,
1230    name: "Tanaka"
1231});
1232
1233console.log(model.id);          //-> 1
1234console.log(model.toJSON());    //-> {user_id: 1, name: "Tanaka"}
1235console.log(model.user_id);     //-> undefined
1236		</pre>
1237
1238		<hr />
1239
1240		<!-- cid -->
1241		<h3 id="Model-cid">model.cid</h3>
1242		<p>
1243			インスタンス生成時に自動的に振られるユニークな識別子です。
1244		</p>
1245
1246		<hr />
1247
1248		<!-- attributes -->
1249		<h3 id="Model-attributes">model.attributes</h3>
1250		<p>
1251			モデルの属性が格納されているプロパティです。属性に値を設定する場合、このプロパティを直接更新することでも可能ですが、イベントの発火などを機能させるために<a href="#Model-set">setメソッド</a>を使用します。
1252		</p>
1253
1254		<hr />
1255
1256		<!-- defaults -->
1257		<h3 id="Model-defaults">model.defaults または model.defaults()</h3>
1258		<p>
1259			モデルの属性の初期値を設定します。関数として定義することも可能です。
1260		</p>
1261		<pre>
1262var Model = Backbone.Model.extend({
1263    defaults: function () {
1264        return {
1265            name:    "Tanaka",
1266            country: "Japan"
1267        }
1268    }
1269});
1270var model = new Model();
1271
1272console.log(model.toJSON());    //-> {name: "Tanaka", country: "Japan"}
1273		</pre>
1274
1275		<hr />
1276
1277		<!-- toJSON -->
1278		<h3 id="Model-toJSON">model.toJSON()</h3>
1279		<p>
1280			<a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトを返します。JSON文字列に変換するのではありません。
1281		</p>
1282		<pre>
1283var model = new Backbone.Model({
1284    name: "Tanaka"
1285});
1286
1287console.log(model.toJSON());                    //-> { name: "Tanaka"}
1288console.log(JSON.stringify(model.attributes));  //-> "{"name": "Tanaka"}"
1289		</pre>
1290
1291		<hr />
1292
1293		<!-- fetch -->
1294		<h3 id="Model-fetch">model.fetch([options])</h3>
1295		<p>
1296			バックエンドとHTTPリクエストのGETメソッドで通信して、リソースの取得を要求します。取得結果を<a href="#Model-parse">parseメソッド</a>で変換してからモデルの属性に設定します。<a href="#Model-validate">validateメソッド</a>も実行します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
1297		</p>
1298		<p>
1299			通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。また、取得結果をモデルの属性に設定する際に、fetch前の値と異なる場合には <a href="#Events-eventList">changeイベント</a>を発火します。
1300		</p>
1301		<p>
1302			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
1303		</p>
1304		<h4>options</h4>
1305		<p>
1306			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
1307		</p>
1308
1309		<hr />
1310
1311		<!-- save -->
1312		<h3 id="Model-save">model.save([key, value], [options]) または model.save([attributes], [options])</h3>
1313		<p>
1314			バックエンドとHTTPリクエストのPOSTまたはPUTメソッドで通信して、リソースの新規作成または更新を要求します。モデルの<a href="#Model-id">idプロパティ</a>が設定されていない場合はPOSTメソッド、設定されている場合はPUTメソッドで通信します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
1315		</p>
1316
1317		<p>
1318			まず、モデルに設定されている属性値、およびこのメソッドの引数に渡した属性値は、<a href="#Model-validate">validateメソッド</a>で検証されます。検証結果に問題があった場合、このメソッドはfalseを返却します。次に、このメソッドの引数に属性値を渡したのであればモデルの属性値に反映され、反映前と反映後とで値が変化するのであれば <a href="#Events-eventList">changeイベント</a>を発火します。ただし、後述する <code>options.wait = true</code> を設定している場合には、属性値の反映は保留され、<a href="#Events-eventList">changeイベント</a>も発火しません。
1319		</p>
1320		<p>
1321			バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。通信した結果、正常を表すHTTPステータスが返って来た場合、バックエンドから取得した属性値は<a href="#Model-parse">parseメソッド</a>で変換してからモデルの属性に設定します。この時<a href="#Model-validate">validateメソッド</a>を実行し、検証結果に問題があった場合、このメソッドはfalseを返してバックエンドから取得した属性値はモデルの属性に反映されません。また、モデルの属性値とバックエンドから取得した属性値とが異なる場合には、<a href="#Events-eventList">changeイベント</a>を発火します。最後に、<a href="#Events-eventList">syncイベント</a>を発火します。
1322		</p>
1323		<p>
1324			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。
1325		</p>
1326		<h4>options</h4>
1327		<p>
1328			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
1329		</p>
1330		<p>
1331			このメソッドの引数に渡した属性値はモデルの属性値へ即座に反映されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから反映するようにタイミングを変えることができます。
1332		</p>
1333
1334		<hr />
1335
1336		<!-- destroy -->
1337		<h3 id="Model-destroy">model.destroy([options])</h3>
1338		<p>
1339			バックエンドとHTTPリクエストのDELETEメソッドで通信して、リソースの破棄を要求します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
1340		</p>
1341		<p>
1342			通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。
1343		</p>
1344		<p>
1345			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。<a href="#Events-eventList">destroyイベント</a>は発火しません。
1346		</p>
1347		<p>
1348			このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。ただし、モデルに<a href="#Model-id">idプロパティ</a>が設定されていない場合は通信せず、このメソッドはfalseを返します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。
1349		</p>
1350		<h4>options</h4>
1351		<p>
1352			モデルはコレクションから即座に削除されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから削除するようにタイミングを変えることができます。
1353		</p>
1354
1355		<hr />
1356
1357		<!-- validate -->
1358		<h3 id="Model-validate">model.validate(attributes)</h3>
1359		<p>
1360			モデルの属性を操作する直前に呼ばれるメソッドで、値を検証する処理を記述します。
1361		</p>
1362		<p>
1363			このメソッドは、検証に合格した場合には何も返却しないようにします。検証結果に問題がある場合、エラーメッセージの文字列や、エラー情報を格納したオブジェクトなど好みの値を返却します。この返却値は、発火する<a href="#Events-eventList">errorイベント</a>の引数に設定されます。
1364		</p>
1365		<pre>
1366var Model = Backbone.Model.extend({
1367    validate: function (attrs) {
1368        if (_.isEmpty(attrs.name)) {
1369            return "Invalid!";
1370        }
1371    }
1372});
1373
1374var model = new Model();
1375
1376model.on("error", function (model, error) {
1377    console.log(error);
1378});
1379
1380model.set({name: ""});  //-> "Invalid!"
1381		</pre>
1382		<p>
1383			上の例では、<a href="#Model-set">setメソッド</a>から呼ばれたvalidateメソッドがエラー時に発火する <a href="#Events-eventList">errorイベント</a>を捕捉していますが、<a href="#Model-set">setメソッド</a><code>options.error</code> にコールバックを定義してエラー処理する方法もあります。なお、その場合も <a href="#Events-eventList">errorイベント</a>は発火します。
1384		</p>
1385		<pre>
1386var Model = Backbone.Model.extend({
1387    validate: function (attrs) {
1388        if (_.isEmpty(attrs.name)) {
1389            return "Invalid!";
1390        }
1391    }
1392});
1393
1394var model = new Model();
1395
1396model.set({name: ""} , {
1397    error: function (model, error) {
1398        console.log(error);
1399}});
1400//-> "Invalid!"
1401		</pre>
1402
1403		<hr />
1404
1405		<!-- url -->
1406		<h3 id="Model-url">model.url()</h3>
1407		<p>
1408			モデルのURLを取得します。
1409		</p>
1410		<p>
1411			<a href="#Model-id">idプロパティ</a>が設定されているモデルのURLは <code>"[urlRoot]/id"</code> になります。<a href="#Model-id">idプロパティ</a>が設定されていない、つまり新規のリソースの場合は <code>"[urlRoot]"</code> になります。<a href="#Model-urlRoot">urlRootプロパティ</a>が未定義の場合は例外がスローされます。ただし、モデルがコレクションに所有されており、そのコレクションの<a href="#Collection-url">urlプロパティ</a>が定義されていれば、<code>"[collection.url]/id"</code> または <code>"[collection.url]"</code> となります。モデルの<a href="#Model-urlRoot">urlRootプロパティ</a>とコレクションの<a href="#Collection-url">urlプロパティ</a>がどちらも定義されている場合は、モデルの<a href="#Model-urlRoot">urlRootプロパティ</a>が優先されます。
1412		</p>
1413		<pre>
1414var Model = Backbone.Model.extend();
1415
1416var Collection = Backbone.Collection.extend({
1417    url: "/users"
1418})
1419
1420var model = new Model({id: 1});
1421var collection = new Collection(model);
1422
1423console.log(model.url());   //-> "/users/1"
1424
1425model.urlRoot = "/user";
1426console.log(model.url());   //-> "/user/1"
1427		</pre>
1428
1429		<hr />
1430
1431		<!-- urlRoot -->
1432		<h3 id="Model-urlRoot">model.urlRoot または model.urlRoot()</h3>
1433		<p>
1434			モデルの<a href="#Model-url">urlメソッド</a>の内部で使用されます。関数として定義することも可能です。
1435		</p>
1436		<pre>
1437var Model = Backbone.Model.extend({
1438    urlRoot: function () {
1439        return "/users";
1440    }
1441});
1442var model = new Model({id: 1});
1443
1444console.log(model.url());   //-> "/users/1"
1445		</pre>
1446
1447		<hr />
1448
1449		<!-- parse -->
1450		<h3 id="Model-parse">model.parse(response, xhr)</h3>
1451		<p>
1452			<a href="#Model-fetch">fetchメソッド</a><a href="#Model-save">saveメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれます。サーバから取得したデータをそのまま属性に取り込むのではなく、加工してから取り込みたい場合に利用します。
1453		</p>
1454		<h4>response</h4>
1455		<p>
1456			サーバが返したデータです。
1457		</p>
1458		<pre>
1459var Model = Backbone.Model.extend({
1460    parse: function (response) {
1461        return response.user;
1462    }
1463});
1464
1465var model = new Model();
1466model.fetch();  // サーバのレスポンスが {user: {name: "Tanaka"}} と仮定
1467		</pre>
1468		<p>
1469			また、モデルのインスタンス生成時に、コンストラクタで <code>options.parse = true</code> を指定した場合にも実行されます。
1470		</p>
1471
1472		<hr />
1473
1474		<!-- clone -->
1475		<h3 id="Model-clone">model.clone()</h3>
1476		<p>
1477			属性が全て同じであるモデルを複製します。
1478		</p>
1479
1480		<hr />
1481
1482		<!-- isNew -->
1483		<h3 id="Model-isNew">model.isNew()</h3>
1484		<p>
1485			モデルの<a href="#Model-id">idプロパティ</a>が未設定(nullまたはundefined)かどうかを返します。
1486		</p>
1487
1488		<hr />
1489
1490		<!-- change -->
1491		<h3 id="Model-change">model.change()</h3>
1492		<p>
1493			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある属性に <a href="#Events-eventList">changeイベント</a>を発火します。
1494		</p>
1495		<pre>
1496var user = new Backbone.Model();
1497
1498user.on("change:name", function (model, value) {
1499    console.log(value);     //-> "Tanaka"
1500})
1501
1502user.on("change:country", function (model, value) {
1503    console.log(value);     //-> "Japan"
1504})
1505
1506user.on("change", function (model) {
1507    console.log(model.toJSON());    //-> {name: "Tanaka", country: "Japan"}
1508})
1509
1510user.set({name: "Tanaka", country: "Japan"}, {silent: true});
1511
1512user.change();
1513		</pre>
1514
1515		<hr />
1516
1517		<!-- hasChanged -->
1518		<h3 id="Model-hasChanged">model.hasChanged([attribute])</h3>
1519		<p>
1520			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、指定した属性がその状態にあるかどうかを返します。
1521		</p>
1522		<pre>
1523var model = new Backbone.Model();
1524
1525model.set({name: "Suzuki"}, {silent: true});
1526console.log(model.hasChanged("name"));    //-> true
1527
1528model.set({name: "Tanaka"});
1529console.log(model.hasChanged("name"));    //-> false
1530		</pre>
1531		<p>
1532			なお、発火しないまま残っている <a href="#Events-eventList">changeイベント</a>は、<a href="#Model-change">changeメソッド</a>でまとめて発火できます。
1533		</P>
1534		<h4>attribute</h4>
1535		<p>
1536			対象の属性を指定します。省略すると、該当する属性が1つでもあればtrueを返します。
1537		</p>
1538
1539		<hr />
1540
1541		<!-- changedAttributes -->
1542		<h3 id="Model-changedAttributes">model.changedAttributes([attributes])</h3>
1543		<p>
1544			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある全ての属性を複製したオブジェクトを返します。該当する属性が無い場合はfalseを返します。
1545		</p>
1546		<h4>attributes</h4>
1547		<p>
1548			指定したattributesと、最後に <a href="#Events-eventList">changeイベント</a>が発火した時点での属性とを比較して、異なる属性を返します。該当する属性が無い場合はfalseを返します。
1549		</p>
1550		<pre>
1551var user = new Backbone.Model();
1552
1553user.set({
1554    name: "Tanaka",
1555    address: "Japan"
1556});
1557
1558user.set({name: "Suzuki"}, {silent:true});
1559
1560console.log(user.changedAttributes({name: "Tanaka", address: "Japan"}));    //-> false
1561console.log(user.changedAttributes({name: "Tanaka", address: "China"}));    //-> {address: "china"}
1562console.log(user.changedAttributes({name: "Suzuki"}));                      //-> {name: "Suzuki"}
1563console.log(user.changedAttributes({name: "Yamada"}));                      //-> {name: "Yamada"}
1564		</pre>
1565
1566		<hr />
1567
1568		<!-- previous -->
1569		<h3 id="Model-previous">model.previous(attribute)</h3>
1570		<p>
1571			変更前の属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。
1572		</p>
1573		<pre>
1574var user = new Backbone.Model({name: "Tanaka"});
1575
1576user.on("change", function (model) {
1577    console.log(model.previous("name"));    //-> "Tanaka"
1578    console.log(model.get("name"));         //-> "Suzuki"
1579})
1580
1581user.set({name: "Suzuki"});
1582		</pre>
1583
1584		<hr />
1585
1586		<!-- previousAttributes -->
1587		<h3 id="Model-previousAttributes">model.previousAttributes()</h3>
1588		<p>
1589			変更前の全ての属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。
1590		</p>
1591		<pre>
1592var user = new Backbone.Model({name: "Tanaka", country: "Japan"});
1593
1594user.on("change", function (model) {
1595    console.log(model.previousAttributes());    //-> {name: "Tanaka", country: "Japan"}
1596    console.log(model.toJSON());                //-> {name: "Suzuki", country: "China"}
1597})
1598
1599user.set({name: "Suzuki", country: "China"});
1600		</pre>
1601
1602
1603		<hr />
1604
1605		<h2>Backbone.Collection</h2>
1606		<hr />
1607
1608		<!-- extend -->
1609		<h3 id="Collection-extend">Backbone.Collection.extend([properties], [classProperties])</h3>
1610		<p>
1611			<code>Backbone.Collection</code> を継承した新しいコレクションを作ります。
1612		</p>
1613		<h4>properties</h4>
1614		<p>
1615			インスタンスメンバを定義します。
1616		</p>
1617		<h4>classProperties</h4>
1618		<p>
1619			静的メンバを定義します。
1620		</p>
1621
1622		<hr />
1623
1624		<!-- constractor -->
1625		<h3 id="Collection-constractor">new Collection([models], [options])</h3>
1626		<p>
1627			コンストラクタです。
1628		</p>
1629		<h4>models</h4>
1630		<p>
1631			コレクションに格納するモデルを指定します。複数のモデルは配列で指定します。
1632		</p>
1633		<pre>
1634var User = Backbone.Model.extend();
1635var user1 = new User({name: "Tanaka"});
1636var user2 = new User({name: "Suzuki"});
1637
1638var us…

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