PageRenderTime 56ms CodeModel.GetById 3ms app.highlight 37ms RepoModel.GetById 1ms app.codeStats 1ms

/index.html

https://github.com/ando19721226/Backbone
HTML | 2735 lines | 2371 code | 300 blank | 64 comment | 0 complexity | a02703c3e5763caf34b6b672acf16a5e MD5 | raw 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 users = new Backbone.Collection([user1, user2]);
1639
1640console.log(users.length);  //-> 2
1641		</pre>
1642		<h4>options</h4>
1643		<p>
1644			<code>options.model</code><a href="#Collection-model">modelプロパティ</a>を設定できます。
1645		</p>
1646		<p>
1647			<code>options.comparator</code><a href="#Collection-comparator">comparatorメソッド</a>を設定できます。すでにクラスで定義済みの<a href="#Collection-comparator">comparatorメソッド</a>を無効にする場合は<code>options.comparator=false</code>とします。
1648		</p>
1649		<p>
1650			<code>options.parse=true</code>を設定すると、<a href="#Collection-parse">parseメソッド</a>を実行します。
1651		</p>
1652		<p>
1653			その他、<a href="#Collection-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます。
1654		</p>
1655
1656		<hr />
1657
1658		<!-- initialize -->
1659		<h3 id="Collection-initialize">collection.initialize([models], [options])</h3>
1660		<p>
1661			インスタンス生成時に呼ばれます。
1662		</p>
1663		<h4>models</h4>
1664		<p><a href="#Collection-constractor">コンストラクタ</a>のmodelsへ渡した値です。</p>
1665		<h4>options</h4>
1666		<p><a href="#Collection-constractor">コンストラクタ</a>のoptionsへ渡した値です。</p>
1667
1668		<hr />
1669
1670		<!-- model -->
1671		<h3 id="Collection-model">collection.model</h3>
1672		<p>
1673			コレクションに格納するモデルのクラス(関数オブジェクト)を指定します。<a href="#Collection-constractor">コンストラクタ</a><a href="#Collection-add">addメソッド</a>などの引数でオブジェクトリテラルを渡すと、このプロパティで指定したクラスに変換されます。
1674		</p>
1675
1676		<hr />
1677
1678		<!-- models -->
1679		<h3 id="Collection-models">collection.models</h3>
1680		<p>
1681			モデルが格納されているプロパティです。ただし、通常はこのプロパティを直接参照するのではなく、<a href="#Collection-get">getメソッド</a><a href="#Collection-at">atメソッド</a><a href="#Collection-UnderscoreMethods">Underscore.jsのメソッド</a>を利用します。
1682		</p>
1683
1684		<hr />
1685
1686		<!-- toJSON -->
1687		<h3 id="Collection-toJSON">collection.toJSON()</h3>
1688		<p>
1689			各モデルの<a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトの配列を返します。JSON文字列に変換するのではありません。
1690		</p>
1691
1692		<hr />
1693
1694		<!-- sync -->
1695		<h3 id="Collection-sync">collection.sync(method, collection, [options])</h3>
1696		<p>
1697			<a href="#Sync">Backbone.syncメソッド</a>を実行します。<a href="#Collection-fetch">fetchメソッド</a>の内部で呼ばれます。
1698		</p>
1699		<p>
1700			このメソッドを直接呼ぶ用途としては、コレクションに格納しているモデルを一括してバックエンドへ送る場合が考えられます。
1701		</p>
1702		<pre>
1703var Users = Backbone.Collection.extend({
1704    createAll: function () {
1705        var self = this;
1706        options = {
1707            success: function(models) {
1708                self.reset(models);
1709            }
1710        };
1711        return this.sync('create', this, options);
1712    }
1713});
1714		</pre>
1715
1716		<hr />
1717
1718		<!-- UnderscoreMethods -->
1719		<h3 id="Collection-UnderscoreMethods">Underscore Methods</h3>
1720		<p>
1721			<a href="#Collection-models">modelsプロパティ</a>に対して、Underscore.jsの以下のメソッドを使用できます。
1722		</p>
1723		<p>
1724			<ul>
1725				<li>forEach (each)</li>
1726				<li>map (collect)</li>
1727				<li>reduce (foldl, inject)</li>
1728				<li>reduceRight (foldr)</li>
1729				<li>find (detect)</li>
1730				<li>filter (select)</li>
1731				<li>reject</li>
1732				<li>every (all)</li>
1733				<li>some (any)</li>
1734				<li>include (contains)</li>
1735				<li>invoke</li>
1736				<li>max</li>
1737				<li>min</li>
1738				<li>sortedIndex</li>
1739				<li>shuffle</li>
1740				<li>toArray</li>
1741				<li>size</li>
1742				<li>first (head, take)</li>
1743				<li>initial</li>
1744				<li>rest (tail)</li>
1745				<li>last</li>
1746				<li>without</li>
1747				<li>indexOf</li>
1748				<li>lastIndexOf</li>
1749				<li>isEmpty</li>
1750				<li>chain</li>
1751				<li>groupBy</li>
1752				<li>countBy</li>
1753				<li>sortBy</li>
1754			</ul>
1755		</p>
1756
1757		<hr />
1758
1759		<!-- add -->
1760		<h3 id="Collection-add">collection.add(models, [options])</h3>
1761		<p>
1762			コレクションにモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
1763		</p>
1764		<pre>
1765var User = Backbone.Model.extend({
1766    validate: function (attr) {
1767        if (_.isEmpty(attr.name)) {
1768            return "invalid!";
1769        }
1770    }
1771});
1772
1773var Users = Backbone.Collection.extend({
1774    model: User
1775});
1776var users = new Users();
1777
1778users.add({name: ""});  //-> Error: Can't add an invalid model to a collection
1779		</pre>
1780		<p>
1781			このメソッドで追加したモデルは<a href="#Collection-models">modelsプロパティ</a>の末尾に追加されますが、<a href="#Collection-comparator">comparatorメソッド</a>を定義している場合にはソートします。<a href="#Collection-sort">sortメソッド</a>によるソートでは<a href="#Events-eventList">sortイベント</a>を発火しますが、このaddメソッドによるソートでは発火しません。
1782		</P>
1783		<pre>
1784var Users = Backbone.Collection.extend({
1785    comparator: function (model) {
1786        return model.id;
1787    }
1788});
1789var users = new Users;
1790users.add({id: 1});
1791users.add({id: 3});
1792users.add({id: 2});
1793
1794console.log(users.at(0).id);    //-> 1
1795console.log(users.at(1).id);    //-> 2
1796console.log(users.at(2).id);    //-> 3
1797		</pre>
1798		<p>
1799			最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
1800		</p>
1801		<p>
1802			このメソッドはコレクション自身を返却します。
1803		</p>
1804		<h4>models</h4>
1805		<p>
1806			複数のモデルを追加する場合は配列で指定します。
1807		</p>
1808		<h4>options</h4>
1809		<p>
1810			同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合には追加されませんが、<code>options.merge = true</code> を設定すると、すでに格納されているモデルの属性値を上書きすることができます。
1811		</p>
1812		<pre>
1813var users = new Backbone.Collection({id: 1, name: "Tanaka"});
1814
1815users.add({id: 1, name: "Suzuki"});
1816console.log(JSON.stringify(users));     //-> [{"id":1,"name":"Tanaka"}]
1817
1818users.add({id: 1, name: "Suzuki"}, {merge: true});
1819console.log(JSON.stringify(users));     //-> [{"id":1,"name":"Suzuki"}]
1820		</pre>
1821		<p>
1822			<code>options.at</code>でモデルを追加する位置を<a href="#Collection-models">modelsプロパティ</a>のインデックスで指定することができます。
1823		</p>
1824		<pre>
1825var users = new Backbone.Collection([
1826    {id: 1},
1827    {id: 2},
1828    {id: 3},
1829    {id: 4},
1830    {id: 5}
1831]);
1832
1833console.log(users.pluck("id"));     //-> [1, 2, 3, 4, 5]
1834
1835users.add([{id: "A"}, {id: "B"}], {at: 3});
1836
1837console.log(users.pluck("id"));     //-> [1, 2, 3, "A", "B", 4, 5]
1838		</pre>
1839		<p>
1840			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
1841		</p>
1842		<p>
1843			<code>options.sort = false</code> を設定するとソートしません。
1844		</p>
1845
1846		<hr />
1847
1848		<!-- remove -->
1849		<h3 id="Collection-remove">collection.remove(models, [options])</h3>
1850		<p>
1851			コレクションからモデルを削除します。モデルそのものは破棄しません。削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火して、コールバック関数の引数<code>options.index</code>には削除したモデルの<a href="#Collection-models">modelsプロパティ</a>上のインデックスが設定されます。
1852		</p>
1853		<pre>
1854var users = new Backbone.Collection([
1855  {id: 1, name: "Tanaka"},
1856  {id: 2, name: "Suzuki"},
1857  {id: 3, name: "Nakata"}
1858]);
1859
1860users.on("remove", function(model, collection, options) {
1861    console.log(options.index);
1862});
1863
1864users.remove({id: 2});
1865//-> 1
1866		</pre>
1867		<p>
1868			上記の<code>options.index</code>の注意点として、複数のモデルを削除した場合に得られるインデックスはイベントが発火した時点でのものであり、このremoveメソッドを呼んだ時点でのインデックスではありません。
1869		</p>
1870		<pre>
1871var users = new Backbone.Collection([
1872  {id: 1, name: "Tanaka"},
1873  {id: 2, name: "Suzuki"},
1874  {id: 3, name: "Nakata"}
1875]);
1876
1877users.on("remove", function(model, collection, options) {
1878    console.log(options.index);
1879});
1880
1881users.remove([{id: 2}, {id: 3}]);
1882//-> 1
1883//-> 1
1884		</pre>
1885		<p>
1886			このメソッドはコレクション自身を返却します。
1887		</p>
1888		<h4>models</h4>
1889		<p>
1890			削除するモデルを指定する方法は3通りあります。モデルのインスタンスそのものを渡す方法、<a href="#Model-id">idプロパティ</a>の値を渡す方法、"id"という名前のプロパティを持つオブジェクトを渡す方法です。
1891		</p>
1892		<p>
1893			複数のモデルを削除する場合は配列で指定します。
1894		</p>
1895		<h4>options</h4>
1896		<p>
1897			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
1898		</p>
1899
1900		<hr />
1901
1902		<!-- reset -->
1903		<h3 id="Collection-reset">collection.reset([models], [options])</h3>
1904		<p>
1905			格納しているモデルを全て入れ替えます。<a href="#Events-eventList">resetイベント</a>を発火します。<a href="#Events-eventList">resetイベント</a>に関連付けしたコールバック関数の中では、入れ替え前のモデルの配列を<code>options.previousModels</code>から参照できます。
1906		</p>
1907		<pre>
1908var users = new Backbone.Collection([
1909    {name: "Tanaka"},
1910    {name: "Suzuki"}
1911]);
1912
1913users.on("reset", function (collection, options) {
1914    console.log(options.previousModels[0].get("name"));
1915    console.log(options.previousModels[1].get("name"));
1916});
1917
1918users.reset({name: "Sasaki"});
1919//-> Tanaka
1920//-> Suzuki
1921		</pre>
1922		<h4>models</h4>
1923		<p>
1924			新しく格納するモデルを配列で指定します。省略すると、コレクションは空になります。
1925		</p>
1926		<h4>options</h4>
1927		<p>
1928			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">resetイベント</a>を発火しません。
1929		</p>
1930
1931		<hr />
1932
1933		<!-- update -->
1934		<h3 id="Collection-update">collection.update(models, [options])</h3>
1935		<p>
1936		</p>
1937
1938		<hr />
1939
1940		<!-- get -->
1941		<h3 id="Collection-get">collection.get(id) または collection.get(model)</h3>
1942		<p>
1943			コレクションに格納しているモデルを<a href="#Model-id">idプロパティ</a>の値、または"id"という名前のプロパティを持つオブジェクト、または<a href="#Model-cid">cidプロパティ</a>の値をキーに参照します。
1944		</p>
1945		<pre>
1946var users = new Backbone.Collection([
1947  {id: 1, name: "Tanaka"},
1948  {id: 2, name: "Suzuki"},
1949  {id: 3, name: "Nakata"},
1950]);
1951
1952console.log(users.get(2).get("name"));          //-> Suzuki
1953console.log(users.get({id: 2}).get("name"));    //-> Suzuki
1954		</pre>
1955
1956		<hr />
1957
1958		<!-- at -->
1959		<h3 id="Collection-at">collection.at(index)</h3>
1960		<p>
1961			コレクションに格納しているモデルを<a href="#Model-models">modelsプロパティ</a>のインデックスで参照します。なお、<a href="#Model-models">modelsプロパティ</a>の格納順は、ソートされることにより、<a href="#Collection-add">addメソッド</a>で追加した順とは限りません。
1962		</p>
1963		<pre>
1964var Users = Backbone.Collection.extend({
1965    comparator: function (model) {
1966        return model.id;
1967    }
1968});
1969var users = new Users();
1970users.add({id:1});
1971users.add({id:3});
1972users.add({id:2});
1973
1974console.log(users.at(0).id);    //-> 1
1975console.log(users.at(1).id);    //-> 2
1976console.log(users.at(2).id);    //-> 3
1977		</pre>
1978
1979		<hr />
1980
1981		<!-- push -->
1982		<h3 id="Collection-push">collection.push(model, [options])</h3>
1983		<p>
1984			コレクションの末尾にモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
1985		</p>
1986		<p>
1987			<a href="#Collection-comparator">comparatorメソッド</a>を定義している場合にはソートします。<a href="#Collection-sort">sortメソッド</a>によるソートでは<a href="#Events-eventList">sortイベント</a>を発火しますが、このpushメソッドによるソートでは発火しません。
1988		</P>
1989		<p>
1990			最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
1991		</p>
1992		<p>
1993			このメソッドは追加したモデルを返却します。このメソッドは<a href="#Model-add">addメソッド</a>に別名を付けただけに思えますが、返却する値に違いがあります。
1994		</p>
1995		<h4>options</h4>
1996		<p>
1997			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
1998		</p>
1999		<p>
2000			<code>options.sort = false</code> を設定するとソートしません。
2001		</p>
2002
2003		<hr />
2004
2005		<!-- pop -->
2006		<h3 id="Collection-pop">collection.pop([options])</h3>
2007		<p>
2008			コレクションの末尾のモデルを削除します。モデルそのものは破棄しません。削除されたモデルとこのコレクションは<a href="#Events-eventList">removeイベント</a>を発火します。
2009		</p>
2010		<p>
2011			このメソッドは削除したモデルを返却します。
2012		</p>
2013		<h4>options</h4>
2014		<p>
2015			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
2016		</p>
2017
2018		<hr />
2019
2020		<!-- unshift -->
2021		<h3 id="Collection-unshift">collection.unshift(model, [options])</h3>
2022		<p>
2023			コレクションの先頭にモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
2024		</p>
2025		<p>
2026			このメソッドでモデルを追加した場合には、<a href="#Collection-comparator">comparatorメソッド</a>を定義していてもソートしません。
2027		</P>
2028		<p>
2029			最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
2030		</p>
2031		<p>
2032			このメソッドは追加したモデルを返却します。
2033		</p>
2034		<h4>options</h4>
2035		<p>
2036			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
2037		</p>
2038
2039		<hr />
2040
2041		<!-- shift -->
2042		<h3 id="Collection-shift">collection.shift([options])</h3>
2043		<p>
2044			コレクションの先頭のモデルを削除します。モデルそのものは破棄しません。削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火します。
2045		</p>
2046		<p>
2047			このメソッドは削除したモデルを返却します。
2048		</p>
2049		<h4>options</h4>
2050		<p>
2051			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
2052		</p>
2053
2054		<hr />
2055
2056		<!-- slice -->
2057		<h3 id="Collection-slice">collection.slice([begin], [end])</h3>
2058		<p>
2059			コレクションの指定された範囲のモデルを参照します。
2060		</p>
2061		<h4>begin</h4>
2062		<p>
2063			<a href="#Collection-models">modelsプロパティ</a>の開始インデックスを指定します。
2064		</p>
2065		<h4>end</h4>
2066		<p>
2067			<a href="#Collection-models">modelsプロパティ</a>の終了インデックスを指定します。
2068		</p>
2069
2070		<hr />
2071
2072		<!-- length -->
2073		<h3 id="Collection-length">collection.length</h3>
2074		<p>
2075			コレクションに格納されているモデルの数を返します。
2076		</p>
2077
2078		<hr />
2079
2080		<!-- comparator -->
2081		<h3 id="Collection-comparator">collection.comparator(model) または collection.comparator(model1, model2)</h3>
2082		<p>
2083			<a href="#Collection-sort">sortメソッド</a>で使用する比較関数を設定します。
2084		</p>
2085		<pre>
2086var users = new Backbone.Collection([
2087    {name: "Tanaka", age: 10},
2088    {name: "Suzuki", age: 40},
2089    {name: "Katou",  age: 50},
2090    {name: "Gotou",  age: 20},
2091    {name: "Mogi",   age: 30}
2092]);
2093
2094users.comparator = function (model) {
2095    return model.get("age");
2096};
2097
2098users.sort();
2099
2100console.log(users.pluck("name"));   //-> ["Tanaka", "Gotou", "Mogi", "Suzuki", "Katou"]
2101		</pre>
2102		<p>
2103			Javascript標準のArrayオブジェクトが持つsortメソッドと同じく、引数を2つ持つ比較関数でも設定できます。複数のソートキーを指定したい場合に使用します。
2104		</p>
2105		<pre>
2106var users = new Backbone.Collection([
2107    {name: "Tanaka", age: 10, gender: "male"},
2108    {name: "Suzuki", age: 40, gender: "male"},
2109    {name: "Katou",  age: 50, gender: "female"},
2110    {name: "Gotou",  age: 20, gender: "female"},
2111    {name: "Mogi",   age: 30, gender: "male"}
2112]);
2113
2114users.comparator = function (a, b) {
2115    if (a.get("gender") > b.get("gender")) return 1;
2116    if (a.get("gender") < b.get("gender")) return -1;
2117    return a.get("age") - b.get("age");
2118};
2119
2120users.sort();
2121
2122console.log(users.pluck("name"));   //-> ["Gotou", "Katou", "Tanaka", "Mogi", "Suzuki"]
2123		</pre>
2124
2125		<hr />
2126
2127		<!-- sort -->
2128		<h3 id="Collection-sort">collection.sort([options])</h3>
2129		<p>
2130			格納しているモデルをソートします。<a href="#Collection-comparator">comparatorメソッド</a>を定義していない場合、例外をスローします。ソートにより並びが変わったかどうかに関わらず、<a href="#Events-eventList">sortイベント</a>を発火します。
2131		</p>
2132		<h4>options</h4>
2133		<p>
2134			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">sortイベント</a>を発火しません。
2135		</p>
2136
2137		<hr />
2138
2139		<!-- pluck -->
2140		<h3 id="Collection-pluck">collection.pluck(attribute)</h3>
2141		<p>
2142			格納しているモデルから指定した属性を取り出した配列を作ります。
2143		</p>
2144		<pre>
2145var users = new Backbone.Collection();
2146users.add({id:1, name: "Tanaka"});
2147users.add({id:2, name: "Suzuki"});
2148users.add({id:3, name: "Katou"});
2149
2150console.log(users.pluck("name"));   //-> ["Tanaka", "Suzuki", "Katou"]
2151		</pre>
2152
2153		<hr />
2154
2155		<!-- where -->
2156		<h3 id="Collection-where">collection.where(attributes)</h3>
2157		<p>
2158			格納しているモデルのうち、指定した属性値に一致するモデルを取り出した配列を作ります。
2159		</p>
2160		<pre>
2161var users = new Backbone.Collection();
2162users.add({name: "Tanaka", age: 10});
2163users.add({name: "Suzuki", age: 10});
2164users.add({name: "Katou", age: 30});
2165
2166console.log(users.where({age: 10}).length);   //-> 2
2167		</pre>
2168
2169		<hr />
2170
2171		<!-- url -->
2172		<h3 id="Collection-url">collection.url または collection.url()</h3>
2173		<p>
2174			コレクションの<a href="#Collection-fetch">fetchメソッド</a>での通信先となるURLを設定します。また、コレクションが所有するモデルに<a href="#Model-urlRoot">urlRootプロパティ</a>が設定されていない場合には、そのモデルの<a href="#Model-url">urlメソッド</a>の内部で使用され、モデルのURLの一部となります。
2175		</p>
2176
2177		<hr />
2178
2179		<!-- parse -->
2180		<h3 id="Collection-parse">collection.parse(response, xhr)</h3>
2181		<p>
2182			<a href="#Collection-fetch">fetchメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれます。サーバから取得したデータをそのまま属性に取り込むのではなく、加工してから取り込みたい場合に利用します。
2183		</p>
2184
2185		<hr />
2186
2187		<!-- clone -->
2188		<h3 id="Collection-clone">collection.clone()</h3>
2189		<p>
2190			同じ<a href="#Collection-models">modelsプロパティ</a>を持つ新しいコレクションを複製します。
2191		</p>
2192
2193		<hr />
2194
2195		<!-- fetch -->
2196		<h3 id="Collection-fetch">collection.fetch([options])</h3>
2197		<p>
2198			バックエンドとHTTPリクエストのGETメソッドで通信して、リソースの取得を要求します。取得結果を<a href="#Collection-parse">parseメソッド</a>で変換して、さらにモデルの<a href="#Model-parse">parseメソッド</a>で変換してからモデルを格納します。また、モデルの<a href="#Model-validate">validateメソッド</a>を実行して、検証結果に問題がある場合は例外をスローします。リクエスト先のURLは<a href="#Collection-url">urlプロパティ</a>です。設定していない場合は例外をスローします。
2199		</p>
2200		<p>
2201			通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。また、<code>options.add = true</code>を設定していない場合には<a href="#Events-eventList">resetイベント</a>を発火しますが、設定している場合には<a href="#Events-eventList">addイベント</a>を発火します。
2202		</p>
2203		<p>
2204			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
2205		</p>
2206		<h4>options</h4>
2207		<p>
2208			<code>options.silent = true</code>を設定すると、<a href="#Events-eventList">addイベント</a><a href="#Events-eventList">resetイベント</a>を発火しません。
2209		</p>
2210		<p>
2211			コレクションに格納済みのモデルは全て削除して取得したモデルに入れ替えますが、<code>options.add = true</code>を設定すると削除せずに追加します。この時、<code>options.merge = true</code>を設定すると、同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合は格納済みのモデルの属性値を上書きします。
2212		</p>
2213
2214		<hr />
2215
2216		<!-- create -->
2217		<h3 id="Collection-create">collection.create(model, [options])</h3>
2218		<p>
2219			バックエンドとHTTPリクエストのPOSTメソッドで通信して、リソースの新規作成を要求します。リクエスト先のURLはモデルの<a href="#Model-url">urlメソッド</a>で決まります。
2220		</p>
2221		<p>
2222			このメソッドの引数にモデルのインスタンスではなく単なるオブジェクトリテラルを渡した場合は、<a href="#Model-validate">validateメソッド</a>で検証されます。検証結果に問題があった場合、このメソッドはfalseを返却します。検証結果に問題がなければ、<a href="#Collection-model">modelプロパティ</a>に設定しているクラス(関数オブジェクト)に変換して、コレクションへ追加します。この時、<a href="#Events-eventList">addイベント</a>を発火します。
2223		</p>
2224		<p>
2225			バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。通信した結果、正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。
2226		</p>
2227		<p>
2228			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。このメソッドは、通信結果に関わらず新しいモデルを返します。
2229		</p>
2230		<h4>options</h4>
2231		<p>
2232			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
2233		</p>
2234		<p>
2235			モデルは即座にコレクションに追加されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから追加するようにタイミングを変えることができます。
2236		</p>
2237
2238		<hr />
2239
2240		<h2>Backbone.Router</h2>
2241		<hr />
2242
2243		<h3 id="Router-extend">Backbone.Router.extend([properties], [classProperties])</h3>
2244		<p>
2245			<code>Backbone.Router</code> を継承した新しいルーターを作ります。
2246		</p>
2247		<h4>properties</h4>
2248		<p>
2249			インスタンスメンバを定義します。
2250		</p>
2251		<h4>classProperties</h4>
2252		<p>
2253			静的メンバを定義します。
2254		</p>
2255
2256		<hr />
2257
2258		<h3 id="Router-constractor">new Router([options])</h3>
2259		<p>
2260			コンストラクタです。
2261		</p>
2262		<h4>options</h4>
2263		<p>
2264			<a href="#Router-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用します。
2265		</p>
2266
2267		<hr />
2268
2269		<h3 id="Router-initialize">router.initialize([options])</h3>
2270		<p>
2271			インスタンス生成時に呼ばれます。
2272		</p>
2273		<h4>options</h4>
2274		<p>
2275			<a href="#Router-constractor">コンストラクタ</a>のoptionsへ渡した値です。
2276		</p>
2277
2278		<hr />
2279
2280		<h3 id="Router-routes">router.routes</h3>
2281		<p>
2282			URLとコールバック関数の関連付けをハッシュマップで指定します。下の例では、<code>#users</code>へアクセスすると<code>createView</code>関数を実行します。
2283		</p>
2284		<pre>
2285var Route = Backbone.Router.extend({
2286    routes: {
2287        "users": "createView"
2288    },
2289    createView: function () {
2290    	//
2291    }
2292});
2293		</pre>
2294		<p>
2295			URLの中にコロンで始まる変数を指定すると、パラメータとしてコールバック関数に渡すことができます。下の例では、<code>#users/1/2</code>へアクセスすると<code>createView</code>関数の第1引数に1、第2引数に2が渡ります。
2296		</p>
2297		<pre>
2298var Route = Backbone.Router.extend({
2299    routes: {
2300        "users/:group/:id": "createView"
2301    },
2302    createView: function (group, id) {
2303    	//
2304    }
2305});
2306		</pre>
2307		<p>
2308			上記の例でidを省略して<code>#users/1</code>へアクセスすると、コールバック関数は呼ばれません。カッコで囲うとそのパラメータは省略可能になります。
2309		</p>
2310		<pre>
2311routes: {
2312    "users/:group(/:id)": "callback"
2313}
2314		</pre>
2315		<p>
2316			アスタリスクで始める変数を指定すると、それ以降の全ての文字列がコールバック関数の引数に渡されます。下の例では、<code>#users/1/2/3</code>へアクセスするとコールバック関数の第1引数に<code>1/2/3</code>が渡ります。
2317		</p>
2318		<pre>
2319routes: {
2320    "users/*query": "callback"
2321}
2322		</pre>
2323		<p>
2324			これらのURLパターンにマッチすると、コールバック関数が実在するかどうかに関わらず<a href="#Events-eventList">route:name</a>イベントを発火します。<code>name</code>はコールバック関数名です。
2325		</p>
2326
2327		<hr />
2328
2329		<h3 id="Router-route">router.route(route, name, [callback])</h3>
2330		<p>
2331			<a href="#Router-routes">routesプロパティ</a>を使用せずに個別にルーティングを設定します。
2332		</p>
2333		<pre>
2334var Route = Backbone.Router.extend({
2335    initialize: function () {
2336        this.route("users/:id", "users", this.createView);
2337    },
2338    createView: function (id) {
2339        console.log(id);
2340    }
2341});
2342		</pre>
2343		<h4>route</h4>
2344		<p>
2345			URLのパターンを指定します。正規表現で指定することもできます。
2346		</p>
2347		<pre>
2348initialize: function () {
2349    this.route(/users\/([0-9]+)/, "users", this.createView);
2350},
2351		</pre>
2352		<h4>name</h4>
2353		<p>
2354			発火する<a href="#Events-eventList">routeイベント</a>の名前<code>route:name</code>を指定します。
2355		</p>
2356		<h4>callback</h4>
2357		<p>
2358			コールバック関数を指定します。省略すると、上記の<code>name</code>で指定した名前を持つ関数がコールバック関数となります。
2359		</p>
2360		<pre>
2361var Route = Backbone.Router.extend({
2362    initialize: function () {
2363        this.route("users", "userFnc");
2364    },
2365    userFnc: function () {
2366        //
2367    }
2368});
2369		</pre>
2370
2371		<hr />
2372
2373		<h3 id="Router-navigate">router.navigate(fragment, [options])</h3>
2374		<p>
2375			URLを遷移します。
2376		</p>
2377		<h4>fragment</h4>
2378		<p>
2379			遷移先のURLを指定します。
2380		</p>
2381		<h4>options</h4>
2382		<p>
2383			このメソッドでURLを遷移すると、<a href="#Router-routes">routesプロパティ</a><a href="#Router-route">routeメソッド</a>でURLと関連付けしたコールバック関数は呼ばれませんが、<code>options.trigger = true</code>を設定するとコールバック関数を呼ぶようになり、また<a href="#Events-eventList">routeイベント</a>を発火します。
2384		</p>
2385		<p>
2386			また、<code>options.replace = true</code>を設定すると、ブラウザの履歴を新しく追加せずに上書きします。
2387		</p>
2388
2389
2390		<hr />
2391
2392		<h2>Backbone.sync</h2>
2393		<hr />
2394
2395		<h3 id="Sync">Backbone.sync(method, model, [options])</h3>
2396		<p>
2397			モデルやコレクションの属性をバックエンド側とRESTスタイルで非同期に送受信します。このメソッドはモデルの<a href="#Model-save">saveメソッド</a>などの内部で呼ばれて通信処理を委譲されます。このメソッドをオーバーライドすることで、例えばブラウザのLocal Storage保存するように動作を変えることができます。
2398		</p>
2399		<p>
2400			バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。通信した結果、正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。
2401		</p>
2402		<p>
2403			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
2404		</p>
2405		<h4>method</h4>
2406		<p>
2407			<code>create</code><code>update</code><code>delete</code><code>read</code>のいずれかを指定します。それぞれ、以下のHTTPメソッドで通信します。
2408			<ul>
2409				<li>create : POST</li>
2410				<li>update : PUT</li>
2411				<li>delete : DELETE</li>
2412				<li>read : GET</li>
2413			</ul>
2414		</p>
2415		<h4>model</h4>
2416		<p>
2417			対象のモデルやコレクションを指定します。
2418		</p>
2419		<h4>options</h4>
2420		<p>
2421			jQuery.ajaxの引数として渡す値です。<code>options.success</code><code>options.error</code>のコールバック関数などを指定します。なお、正常を表すHTTPステータスが返って来たにも関わらず<code>options.error</code>が呼ばれる場合、バックエンド側が送ってきたJSON文字列が正しくないことが考えられます。
2422		</p>
2423
2424		<hr />
2425
2426		<h3 id="Sync-ajax">Backbone.ajax(settings)</h3>
2427		<p>
2428			jQuery.ajaxへのショートカットです。Backbone.js内部でのajaxはこのオブジェクトを参照するので、オーバーライドして独自の処理に変更できます。
2429		</p>
2430
2431		<hr />
2432
2433		<h3 id="Sync-emulateHTTP">Backbone.emulateHTTP</h3>
2434		<p>
2435			<code>true</code>を設定すると、HTTPリクエストのPUTメソッドとDELETEメソッドの代わりにPOSTメソッドを使います。本来PUTとDELETEのどちらを使いたかったのかは、<code>X-HTTP-Method-Override</code>ヘッダに設定されます。バックエンド側の都合でPUTやDELETEが利用できない場合に指定します。
2436		</p>
2437		<pre>
2438POST /user/1 HTTP/1.1
2439X-Requested-With: XMLHttpRequest
2440X-HTTP-Method-Override: PUT
2441Content-Type: application/json
2442Accept: application/json, text/javascript, */*; q=0.01
2443
2444{"id":1,"name":"Tanaka"}
2445		</pre>
2446
2447		<hr />
2448
2449		<h3 id="Sync-emulateJSON">Backbone.emulateJSON</h3>
2450		<p>
2451			<code>true</code>を設定すると、HTTPヘッダのMIMEタイプは<code>application/json</code>ではなく<code>application/x-www-form-urlencoded</code>が設定され、また、データは"model"という名前のパラメータに格納されます。バックエンドとJSON形式でやり取りできない場合に指定します。
2452		</p>
2453		<p>
2454			また、同時に<a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a><code>true</code>に設定している場合、PUTメソッドとDELETEメソッドは<code>_method</code>パラメータに格納し、HTTPリクエストはPOSTメソッドを使います。
2455		</p>
2456		<pre>
2457POST /user/1 HTTP/1.1
2458X-Requested-With: XMLHttpRequest
2459X-HTTP-Method-Override: PUT
2460Content-Type: application/x-www-form-urlencoded
2461Accept: application/json, text/javascript, */*; q=0.01
2462
2463model:{"id":1,"name":"Tanaka"}
2464_method:PUT
2465		</pre>
2466
2467		<hr />
2468
2469		<h2>Backbone.View</h2>
2470		<hr />
2471
2472		<h3 id="View-extend">Backbone.View.extend([properties], [classProperties])</h3>
2473		<p>
2474			<code>Backbone.View</code> を継承した新しいビューを作ります。
2475		</p>
2476		<h4>properties</h4>
2477		<p>
2478			インスタンスメンバを定義します。
2479		</p>
2480		<h4>classProperties</h4>
2481		<p>
2482			静的メンバを定義します。
2483		</p>
2484
2485		<hr />
2486
2487		<h3 id="View-constractor">new View([options]) または new View([options()])</h3>
2488		<p>
2489			コンストラクタです。
2490		</p>
2491		<h4>options</h4>
2492		<p>
2493			<a href="#Model-constractor">モデルのコンストラクタ</a>のoptionsはその場限りの値ですが、ビューの場合にはインスタンスメンバである<a href="#View-options">optionsプロパティ</a>へ格納されるため、いつでも参照することができます。
2494		</p>
2495		<p>
2496			なお、<code>options.model</code> <code>options.collection</code> <code>options.el</code> <code>options.id</code> <code>options.className</code> <code>options.tagName</code> <code>options.attributes</code> に指定した値は、それぞれ<a href="#View-model">modelプロパティ</a><a href="#View-collection">collectionプロパティ</a><a href="#View-el">elプロパティ</a><a href="#View-id">idプロパティ</a><a href="#View-className">classNameプロパティ</a><a href="#View-tagName">tagNameプロパティ</a><a href="#View-attributes">attributesプロパティ</a>へ設定されます。
2497		</p>
2498
2499		<hr />
2500
2501		<h3 id="View-initialize">view.initialize([options])</h3>
2502		<p>
2503			インスタンス生成時に呼ばれます。
2504		</p>
2505		<h4>options</h4>
2506		<p>
2507			<a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です。
2508		</p>
2509
2510		<hr />
2511
2512		<h3 id="View-options">view.options</h3>
2513		<p>
2514			<a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です。
2515		</p>
2516
2517		<hr />
2518
2519		<h3 id="View-el">view.el または view.el()</h3>
2520		<p>
2521			ビューに関連付けするDOM要素を設定します。ビューは、このDOM要素をルートとするDOMツリーに対してさまざまな処理を行います。例えば<a href="#View-$">$メソッド</a>はDOMツリー内から要素を探し、<a href="#View-events">eventsプロパティ</a>はイベントの関連付けをDOMツリー内の要素に対して行います。
2522		</p>
2523		<p>
2524			DOM要素はページ上に実在していなくても構いません。DOMへのアクセスはコストが高いため、むしろメモリ上でDOM要素の編集を終えた後にページ上に追加したほうが効率的です。
2525		</p>
2526
2527		<hr />
2528
2529		<h3 id="View-$el">view.$el</h3>
2530		<p>
2531			<a href="#View-el">elプロパティ</a>に設定しているDOM要素をjQueryオブジェクトに変換した値へのショートカットです。
2532		</p>
2533
2534		<hr />
2535
2536		<h3 id="View-setElement">view.setElement(element, [delegate])</h3>
2537		<p>
2538			<a href="#View-el">elプロパティ</a>を設定し直します。<a href="#View-events">eventsプロパティ</a>で設定したイベントは古い<a href="#View-el">elプロパティ</a>から削除され、新しい<a href="#View-el">elプロパティ</a>へ設定されます。
2539		</p>
2540		<h4>delegate</h4>
2541		<p>
2542			<code>false</code>を設定すると、新しい<a href="#View-el">elプロパティ</a>に対して<a href="#View-events">eventsプロパティ</a>で設定したイベントを関連付けしません。
2543		</p>
2544		<pre>
2545var Profile = Backbone.View.extend({
2546    el: "&lt;h1&gt;",
2547    events: {
2548        "click": function (e) {console.log(e.target, "fire!");}
2549    }
2550});
2551
2552var profile = new Profile();
2553
2554profile.$el.trigger("click");   //-> &lt;h1&gt; fire!
2555
2556profile.setElement("&lt;h2&gt;");
2557profile.$el.trigger("click");   //-> &lt;h2&gt; fire!
2558
2559profile.setElement("&lt;h3&gt;", false);
2560profile.$el.trigger("click");   //-> 発火しない
2561		</pre>
2562
2563		<hr />
2564
2565		<h3 id="View-model">view.model</h3>
2566		<p>
2567			ビューで使用するモデルを設定します。
2568		</p>
2569
2570		<hr />
2571
2572		<h3 id="View-collection">view.collection</h3>
2573		<p>
2574			ビューで使用するコレクションを設定します。
2575		</p>
2576
2577		<hr />
2578
2579		<h3 id="View-id">view.id または view.id()</h3>
2580		<p>
2581			ビューに関連付けされるDOM要素のid属性を設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
2582		</p>
2583
2584		<hr />
2585
2586		<h3 id="View-attributes">view.attributes または view.attributes()</h3>
2587		<p>
2588			ビューに関連付けするDOM要素の属性をオブジェクトリテラルで設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
2589		</p>
2590		<pre>
2591var Profile = Backbone.View.extend({
2592    tagName: "input",
2593    attributes: {
2594        type: "text",
2595        name: "userName",
2596        value: "Tanaka"
2597    }
2598});
2599var profile = new Profile();
2600
2601console.log(profile.el);    //-> &lt;input type="text" name="userName" value="Tanaka"&gt;
2602		</pre>
2603
2604		<hr />
2605
2606		<h3 id="View-className">view.className または view.className()</h3>
2607		<p>
2608			ビューに関連付けするDOM要素のclass属性を設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
2609		</p>
2610		<pre>
2611var Profile = Backbone.View.extend({
2612    className: "alert alert-info"
2613});
2614var profile = new Profile();
2615
2616console.log(profile.el);    //-> &lt;div class="alert alert-info"&gt;
2617		</pre>
2618
2619		<hr />
2620
2621		<h3 id="View-tagName">view.tagName または view.tagName()</h3>
2622		<p>
2623			ビューに関連付けするDOM要素のタグ名を設定します。インスタンス生成時に参照されます。設定しない場合は<code>div</code>が設定されます。<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
2624		</p>
2625
2626		<hr />
2627
2628		<h3 id="View-dollar">view.$(selector)</h3>
2629		<p>
2630			jQyeryおよびZeptoのfindメソッドへのショートカットです。<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーから、<code>selector</code>に合致する子孫要素を返します。
2631		</p>
2632
2633		<hr />
2634
2635		<h3 id="View-render">view.render()</h3>
2636		<p>
2637			<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに対する操作を記述するメソッドです。別のメソッド名でも特に問題はありません。
2638		</p>
2639		<p>
2640			<code>this</code>を返却して、呼び元でメソッドチェーンを使えるようにすると便利です。
2641		</p>
2642		<pre>
2643var Hoge = Backbone.View.extend({
2644    render: function () {
2645        this.$el.html("Hello.");
2646        return this;
2647    }
2648});
2649
2650console.log((new Hoge()).render().$el.html());  //-> Hello.
2651		</pre>
2652
2653		<hr />
2654
2655		<h3 id="View-remove">view.remove()</h3>
2656		<p>
2657			<a href="#View-el">elプロパティ</a>に設定されているDOM要素の破棄、および、このビューに関連付けしているイベントを全て破棄します。
2658		</p>
2659
2660		<hr />
2661
2662		<h3 id="View-make">view.make(tagName, [attributes], [content])</h3>
2663		<p>
2664			DOM要素を作成するためのユーティリティ・メソッドです。
2665		</p>
2666		<pre>
2667var profile = new Backbone.View();
2668
2669var el = profile.make("p", {class: "name"}, "Tanaka");
2670
2671console.log(el.outerHTML);    //-> &lt;p class="name"&gt;Tanaka&lt;/p&gt;
2672		</pre>
2673
2674		<hr />
2675
2676		<h3 id="View-events">view.events または view.events()</h3>
2677		<p>
2678			<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリー上で発火したイベントとコールバック関数との関連付けを設定します。
2679		</p>
2680		<p>
2681			<code>{ "イベント名 [セレクタ]", "コールバック関数名" }</code>
2682		</p>
2683		<pre>
2684var Profile = Backbone.View.extend({
2685    el: "#hoge",
2686    events: {
2687        "click button": "say"
2688    },
2689    say: function (e) {
2690        console.log("Hello.");
2691    }
2692});
2693		</pre>
2694		<p>
2695			<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに新しいDOM要素を追加した場合にも、このeventsプロパティで設定している関連付けは動的に行われます。
2696		</p>
2697		<p>
2698			コールバック関数内の<code>this</code>は、ビューのインスタンスに束縛されます。また、実在しないコールバック関数名を指定すると、例外をスローします。
2699		</p>
2700
2701		<hr />
2702
2703		<h3 id="View-delegateEvents">view.delegateEvents([events])</h3>
2704		<p>
2705			<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーで発火するイベントにコールバック関数を関連付けます。<a href="#View-events">eventsプロパティ</a>で設定する手段がありますので、このメソッドを直接呼ぶ場面は限られます。
2706		</p>
2707		<h4>events</h4>
2708		<p>
2709			<a href="#View-events">eventsプロパティ</a>と同じ要領で、イベントとコールバック関数の関連付けを指定します。
2710		</p>
2711		<p>
2712			ただし、このメソッドでイベントを設定すると、eventsに指定した新しいイベント以外は削除されるため、イベントを追加する用途には使えません。代わりにjQuery等のメソッドで設定する方法が考えられますが、このdelegateEventsメソッドで登録していないイベントは<a href="#View-undelegateEvents">undelegateEventsメソッド</a>で削除されないためメモリリークを起こす可能性があります。
2713		</p>
2714		<p>
2715			そのため、イベントは動的に必要となるイベントも含めて<a href="#View-events">eventsプロパティ</a>であらかじめ設定しておきます。
2716		</p>
2717
2718		<hr />
2719
2720		<h3 id="View-undelegateEvents">view.undelegateEvents()</h3>
2721		<p>
2722			<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに関連付けしているイベントを削除します。ただし、<a href="#View-delegateEvents">delegateEventsメソッド</a>で関連付けしたイベントのみが対象となります。
2723		</p>
2724
2725		<hr />
2726
2727		<h3 id="View-cid">view.cid</h3>
2728		<p>
2729			インスタンス生成時に自動的に振られるユニークな識別子です。
2730		</p>
2731
2732	</div>
2733
2734</body>
2735</html>