PageRenderTime 71ms CodeModel.GetById 23ms RepoModel.GetById 0ms 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. 

  2. <html lang="ja">

    3. 

  3. <head>

    4. 

  4.     <meta charset="UTF-8" />

    5. 

  5.     <title>Backbone.js 日本語リファレンス</title>

    6. 

  6.     <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />

    7. 

  7.     <link rel="icon" href="http://backbonejs.org/docs/images/favicon.ico" />

    8. 

  8. 	<style type="text/css">

    9. 

  9. 		@media print {

    10. 

  10. 			.no-print { display: none }

    11. 

  11. 		}

    12. 

  12. 	</style>

    13. 

  13. </head>

    14. 

  14. <body>

    15. 

  15.    	<div class="container">

    16. 

  16. 

    17. 

  17.    		<h1>Backbone.js 日本語リファレンス</h1>

    18. 

  18. 

    19. 

  19. 		<div class="alert alert-info">

    20. 

  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. 

  21. 		</div>

    22. 

  22. 

    23. 

  23. 		<ul class="no-print">

    24. 

  24. 			<li>Events</li>

    25. 

  25. 			<ul>

    26. 

  26. 				<li><a href="#Events-on">on</a></li>

    27. 

  27. 				<li><a href="#Events-off">off</a></li>

    28. 

  28. 				<li><a href="#Events-trigger">trigger</a></li>

    29. 

  29. 				<li><a href="#Events-once">once</a></li>

    30. 

  30. 				<li><a href="#Events-listenTo">listenTo</a></li>

    31. 

  31. 				<li><a href="#Events-stopListening">stopListening</a></li>

    32. 

  32. 			</ul>

    33. 

  33. 			<li>Model</li>

    34. 

  34. 			<ul>

    35. 

  35. 				<li><a href="#Model-extend">extend</a></li>

    36. 

  36. 				<li><a href="#Model-constractor">constractor</a></li>

    37. 

  37. 				<li><a href="#Model-initialize">initialize</a></li>

    38. 

  38. 				<li><a href="#Model-get">get</a></li>

    39. 

  39. 				<li><a href="#Model-set">set</a></li>

    40. 

  40. 				<li><a href="#Model-escape">escape</a></li>

    41. 

  41. 				<li><a href="#Model-has">has</a></li>

    42. 

  42. 				<li><a href="#Model-unset">unset</a></li>

    43. 

  43. 				<li><a href="#Model-clear">clear</a></li>

    44. 

  44. 				<li><a href="#Model-id">id</a></li>

    45. 

  45. 				<li><a href="#Model-idAttribute">idAttribute</a></li>

    46. 

  46. 				<li><a href="#Model-cid">cid</a></li>

    47. 

  47. 				<li><a href="#Model-attributes">attributes</a></li>

    48. 

  48. 				<li><a href="#Model-defaults">defaults</a></li>

    49. 

  49. 				<li><a href="#Model-toJSON">toJSON</a></li>

    50. 

  50. 				<li><a href="#Model-fetch">fetch</a></li>

    51. 

  51. 				<li><a href="#Model-save">save</a></li>

    52. 

  52. 				<li><a href="#Model-destroy">destroy</a></li>

    53. 

  53. 				<li><a href="#Model-validate">validate</a></li>

    54. 

  54. 				<li><a href="#Model-url">url</a></li>

    55. 

  55. 				<li><a href="#Model-urlRoot">urlRoot</a></li>

    56. 

  56. 				<li><a href="#Model-parse">parse</a></li>

    57. 

  57. 				<li><a href="#Model-clone">clone</a></li>

    58. 

  58. 				<li><a href="#Model-isNew">isNew</a></li>

    59. 

  59. 				<li><a href="#Model-change">change</a></li>

    60. 

  60. 				<li><a href="#Model-hasChanged">hasChanged</a></li>

    61. 

  61. 				<li><a href="#Model-changedAttributes">changedAttributes</a></li>

    62. 

  62. 				<li><a href="#Model-previous">previous</a></li>

    63. 

  63. 				<li><a href="#Model-previousAttributes">previousAttributes</a></li>

    64. 

  64. 			</ul>

    65. 

  65. 			<li>Collection</li>

    66. 

  66. 			<ul>

    67. 

  67. 				<li><a href="#Collection-extend">extend</a></li>

    68. 

  68. 				<li><a href="#Collection-constractor">constractor</a></li>

    69. 

  69. 				<li><a href="#Collection-initialize">initialize</a></li>

    70. 

  70. 				<li><a href="#Collection-model">model</a></li>

    71. 

  71. 				<li><a href="#Collection-models">models</a></li>

    72. 

  72. 				<li><a href="#Collection-toJSON">toJSON</a></li>

    73. 

  73. 				<li><a href="#Collection-sync">sync</a></li>

    74. 

  74. 				<li><a href="#Collection-UnderscoreMethods">Underscore Methods</a></li>

    75. 

  75. 				<li><a href="#Collection-add">add</a></li>

    76. 

  76. 				<li><a href="#Collection-remove">remove</a></li>

    77. 

  77. 				<li><a href="#Collection-reset">reset</a></li>

    78. 

  78. 				<li><a href="#Collection-update">update</a></li>

    79. 

  79. 				<li><a href="#Collection-get">get</a></li>

    80. 

  80. 				<li><a href="#Collection-at">at</a></li>

    81. 

  81. 				<li><a href="#Collection-push">push</a></li>

    82. 

  82. 				<li><a href="#Collection-pop">pop</a></li>

    83. 

  83. 				<li><a href="#Collection-unshift">unshift</a></li>

    84. 

  84. 				<li><a href="#Collection-shift">shift</a></li>

    85. 

  85. 				<li><a href="#Collection-slice">slice</a></li>

    86. 

  86. 				<li><a href="#Collection-length">length</a></li>

    87. 

  87. 				<li><a href="#Collection-comparator">comparator</a></li>

    88. 

  88. 				<li><a href="#Collection-sort">sort</a></li>

    89. 

  89. 				<li><a href="#Collection-pluck">pluck</a></li>

    90. 

  90. 				<li><a href="#Collection-where">where</a></li>

    91. 

  91. 				<li><a href="#Collection-url">url</a></li>

    92. 

  92. 				<li><a href="#Collection-parse">parse</a></li>

    93. 

  93. 				<li><a href="#Collection-clone">clone</a></li>

    94. 

  94. 				<li><a href="#Collection-fetch">fetch</a></li>

    95. 

  95. 				<li><a href="#Collection-create">create</a></li>

    96. 

  96. 			</ul>

    97. 

  97. 			<li>Router</li>

    98. 

  98. 			<ul>

    99. 

  99. 				<li><a href="#Router-extend">extend</a></li>

    100. 

  100. 				<li><a href="#Router-constractor">constractor</a></li>

    101. 

  101. 				<li><a href="#Router-initialize">initialize</a></li>

    102. 

  102. 				<li><a href="#Router-routes">routes</a></li>

    103. 

  103. 				<li><a href="#Router-route">route</a></li>

    104. 

  104. 				<li><a href="#Router-navigate">navigate</a></li>

    105. 

  105. 			</ul>

    106. 

  106. 			<li>Sync</li>

    107. 

  107. 			<ul>

    108. 

  108. 				<li><a href="#Sync">Backbone.sync</a></li>

    109. 

  109. 				<li><a href="#Sync-ajax">Backbone.ajax</a></li>

    110. 

  110. 				<li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>

    111. 

  111. 				<li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>

    112. 

  112. 			</ul>

    113. 

  113. 			<li>View</li>

    114. 

  114. 			<ul>

    115. 

  115. 				<li><a href="#View-extend">extend</a></li>

    116. 

  116. 				<li><a href="#View-constractor">constractor</a></li>

    117. 

  117. 				<li><a href="#View-initialize">initialize</a></li>

    118. 

  118. 				<li><a href="#View-options">options</a></li>

    119. 

  119. 				<li><a href="#View-el">el</a></li>

    120. 

  120. 				<li><a href="#View-$el">$el</a></li>

    121. 

  121. 				<li><a href="#View-setElement">setElement</a></li>

    122. 

  122. 				<li><a href="#View-model">model</a></li>

    123. 

  123. 				<li><a href="#View-collection">collection</a></li>

    124. 

  124. 				<li><a href="#View-id">id</a></li>

    125. 

  125. 				<li><a href="#View-attributes">attributes</a></li>

    126. 

  126. 				<li><a href="#View-className">className</a></li>

    127. 

  127. 				<li><a href="#View-tagName">tagName</a></li>

    128. 

  128. 				<li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>

    129. 

  129. 				<li><a href="#View-render">render</a></li>

    130. 

  130. 				<li><a href="#View-remove">remove</a></li>

    131. 

  131. 				<li><a href="#View-make">make</a></li>

    132. 

  132. 				<li><a href="#View-events">events</a></li>

    133. 

  133. 				<li><a href="#View-delegateEvents">delegateEvents</a></li>

    134. 

  134. 				<li><a href="#View-undelegateEvents">undelegateEvents</a></li>

    135. 

  135. 				<li><a href="#View-cid">cid</a></li>

    136. 

  136. 			</ul>

    137. 

  137. 		</ul>

    138. 

  138. 

    139. 

  139. 		<hr />

    140. 

  140. 

    141. 

  141. 		<h2>Backbone.Events</h2>

    142. 

  142. 		<hr />

    143. 

  143. 

    144. 

  144. 		<!-- on -->

    145. 

  145. 		<h3 id="Events-on">object.on(events, callback, [context])</h3>

    146. 

  146. 		<p>

    147. 

  147. 			オブジェクトに対して、イベントが発火した時に呼び出したいコールバック関数を設定します。

    148. 

  148. 		</p>

    149. 

  149. 		<h4>events</h4>

    150. 

  150. 		<p>

    151. 

  151. 			イベント名です。半角スペースで区切って複数のイベント名を指定することもできます。<code>all</code> を指定すると、どのイベントが発火した場合にもコールバック関数が呼ばれます。

    152. 

  152. 		</p>

    153. 

  153. 		<p>

    154. 

  154. 			イベント名とコールバック関数のペアをオブジェクトリテラルで設定することもできます。この場合、第２引数はcontextになります。

    155. 

  155. 		</p>

    156. 

  156. 		<pre>

    157. 

  157. var func1 = function () {

    158. 

  158. 	console.log(this.msg1);

    159. 

  159. };

    160. 

  160. 

    161. 

  161. var func2 = function (model) {

    162. 

  162. 	console.log(this.msg2);

    163. 

  163. };

    164. 

  164. 

    165. 

  165. var msg = {

    166. 

  166. 	msg1: "Changed!",

    167. 

  167. 	msg2: "Destroyed!"

    168. 

  168. };

    169. 

  169. 

    170. 

  170. var model = new Backbone.Model();

    171. 

  171. model.on({change: func1, destroy: func2}, msg);

    172. 

  172. 

    173. 

  173. model.set({name: "Tanaka"});	//-> Changed!

    174. 

  174. model.destroy();				//-> Destroyed!

    175. 

  175. 		</pre>

    176. 

  176. 		<h4>callback</h4>

    177. 

  177. 		<p>

    178. 

  178. 			イベントが発火すると呼ばれるコールバック関数です。コールバック関数に渡される引数は、イベントを発火させる<a href="#Events-trigger">triggerメソッド</a>が決定します。

    179. 

  179. 		</p>

    180. 

  180. 		<p>

    181. 

  181. 			Backbone.jsが発火するイベントとコールバック関数の引数の対応は以下の通りです。

    182. 

  182. 		</p>

    183. 

  183. 		<p id="Events-eventList">

    184. 

  184. 			<table class="table table-condensed table-bordered">

    185. 

  185. 				<thead>

    186. 

  186. 					<tr>

    187. 

  187. 						<th>

    188. 

  188. 							イベント

    189. 

  189. 						</th>

    190. 

  190. 						<th>

    191. 

  191. 							引数

    192. 

  192. 						</th>

    193. 

  193. 					</tr>

    194. 

  194. 				</thead>

    195. 

  195. 				<tbody>

    196. 

  196. 					<tr>

    197. 

  197. 						<td>

    198. 

  198. 							add

    199. 

  199. 						</td>

    200. 

  200. 						<td>

    201. 

  201. 							model, collection, options

    202. 

  202. 						</td>

    203. 

  203. 					</tr>

    204. 

  204. 					<tr>

    205. 

  205. 						<td>

    206. 

  206. 							remove

    207. 

  207. 						</td>

    208. 

  208. 						<td>

    209. 

  209. 							model, collection, options

    210. 

  210. 						</td>

    211. 

  211. 					</tr>

    212. 

  212. 					<tr>

    213. 

  213. 						<td>

    214. 

  214. 							reset

    215. 

  215. 						</td>

    216. 

  216. 						<td>

    217. 

  217. 							collection, options

    218. 

  218. 						</td>

    219. 

  219. 					</tr>

    220. 

  220. 					<tr>

    221. 

  221. 						<td>

    222. 

  222. 							sort

    223. 

  223. 						</td>

    224. 

  224. 						<td>

    225. 

  225. 							collection, options

    226. 

  226. 						</td>

    227. 

  227. 					</tr>

    228. 

  228. 					<tr>

    229. 

  229. 						<td>

    230. 

  230. 							change

    231. 

  231. 						</td>

    232. 

  232. 						<td>

    233. 

  233. 							model, options

    234. 

  234. 						</td>

    235. 

  235. 					</tr>

    236. 

  236. 					<tr>

    237. 

  237. 						<td>

    238. 

  238. 							change:[attribute]

    239. 

  239. 						</td>

    240. 

  240. 						<td>

    241. 

  241. 							model, value, options

    242. 

  242. 						</td>

    243. 

  243. 					</tr>

    244. 

  244. 					<tr>

    245. 

  245. 						<td>

    246. 

  246. 							destroy

    247. 

  247. 						</td>

    248. 

  248. 						<td>

    249. 

  249. 							model, collection, options

    250. 

  250. 						</td>

    251. 

  251. 					</tr>

    252. 

  252. 					<tr>

    253. 

  253. 						<td>

    254. 

  254. 							request

    255. 

  255. 						</td>

    256. 

  256. 						<td>

    257. 

  257. 							model, xhr, options

    258. 

  258. 						</td>

    259. 

  259. 					</tr>

    260. 

  260. 					<tr>

    261. 

  261. 						<td>

    262. 

  262. 							sync

    263. 

  263. 						</td>

    264. 

  264. 						<td>

    265. 

  265. 							model, resp, options

    266. 

  266. 						</td>

    267. 

  267. 					</tr>

    268. 

  268. 					<tr>

    269. 

  269. 						<td>

    270. 

  270. 							error

    271. 

  271. 						</td>

    272. 

  272. 						<td>

    273. 

  273. 							model, xhr, options または model, error, options

    274. 

  274. 						</td>

    275. 

  275. 					</tr>

    276. 

  276. 					<tr>

    277. 

  277. 						<td>

    278. 

  278. 							route:[name]

    279. 

  279. 						</td>

    280. 

  280. 						<td>

    281. 

  281. 							*args（URLと関連付けたコールバック関数に渡される引数）

    282. 

  282. 						</td>

    283. 

  283. 					</tr>

    284. 

  284. 					<tr>

    285. 

  285. 						<td>

    286. 

  286. 							all

    287. 

  287. 						</td>

    288. 

  288. 						<td>

    289. 

  289. 							eventName, *args（イベントと関連付けたコールバック関数に渡される引数）

    290. 

  290. 						</td>

    291. 

  291. 					</tr>

    292. 

  292. 				</tbody>

    293. 

  293. 			</table>

    294. 

  294. 		</p>

    295. 

  295. 

    296. 

  296. 		<h4>context</h4>

    297. 

  297. 		<p>

    298. 

  298. 			コールバック関数の中の<code>this</code>キーワードを束縛します。

    299. 

  299. 		</p>

    300. 

  300. 

    301. 

  301. 		<hr />

    302. 

  302. 

    303. 

  303. 		<!-- off -->

    304. 

  304. 		<h3 id="Events-off">object.off([events], [callback], [context])</h3>

    305. 

  305. 		<p>

    306. 

  306. 			設定されているイベントを削除します。全ての引数を省略すると、オブジェクトに設定されているイベントを全て削除します。

    307. 

  307. 		</p>

    308. 

  308. 		<h4>events</h4>

    309. 

  309. 		<p>

    310. 

  310. 			削除するイベント名です。半角スペースで区切って複数のイベント名を指定することもできます。省略する場合はnullを渡します。

    311. 

  311. 		</p>

    312. 

  312. 		<h4>callback</h4>

    313. 

  313. 		<p>

    314. 

  314. 			削除するイベントを、コールバック関数で指定します。省略する場合はnullを渡します。

    315. 

  315. 		</p>

    316. 

  316. 		<h4>context</h4>

    317. 

  317. 		<p>

    318. 

  318. 			削除するイベントを、<code>this</code> に束縛しているオブジェクトで指定します。省略する場合はnullを渡します。

    319. 

  319. 		</p>

    320. 

  320. 

    321. 

  321. 		<hr />

    322. 

  322. 

    323. 

  323. 		<!-- trigger -->

    324. 

  324. 		<h3 id="Events-trigger">object.trigger(events, [*args])</h3>

    325. 

  325. 		<p>

    326. 

  326. 			イベントを発火します。また、<a href="#Events-on">onメソッド</a>で設定したコールバック関数へ渡す引数を指定します。

    327. 

  327. 		</p>

    328. 

  328. 		<h4>events</h4>

    329. 

  329. 		<p>

    330. 

  330. 			発火させるイベント名です。複数のイベントを空白で区切って指定できます。

    331. 

  331. 		</p>

    332. 

  332. 		<h4>args</h4>

    333. 

  333. 		<p>

    334. 

  334. 			イベントと関連付けされているコールバック関数の引数に渡されます。

    335. 

  335. 		</p>

    336. 

  336. 		<pre>

    337. 

  337. var user = {name: "Tanaka"};

    338. 

  338. _.extend(user, Backbone.Events);

    339. 

  339. 

    340. 

  340. user.on("Say", function (obj, msg) {

    341. 

  341.     console.log(obj.name + " said " + msg);

    342. 

  342. });

    343. 

  343. 

    344. 

  344. user.trigger("Say", user, "Hello.");   //-> Tanaka said Hello.

    345. 

  345. 		</pre>

    346. 

  346. 		<p>

    347. 

  347. 			なお、Backbone.jsのコレクションは、所有するモデルの全てのイベントを監視しており、モデルがイベントを発火すると同じイベントを発火します。

    348. 

  348. 		</p>

    349. 

  349. 		<pre>

    350. 

  350. var User = Backbone.Model.extend({

    351. 

  351.     validate: function (attr) {

    352. 

  352.         if (_.isEmpty(attr.name)) {

    353. 

  353.             return "invalid!";

    354. 

  354.         }

    355. 

  355.     }

    356. 

  356. });

    357. 

  357. var user = new User();

    358. 

  358. 

    359. 

  359. var users = new Backbone.Collection();

    360. 

  360. users.add(user);

    361. 

  361. users.on("all", function (eventName) {

    362. 

  362.     console.log(eventName);

    363. 

  363. });

    364. 

  364. 

    365. 

  365. user.set({name:"tanaka"});

    366. 

  366. //-> change:name

    367. 

  367. //-> change

    368. 

  368. 

    369. 

  369. user.set({name:""});

    370. 

  370. //-> error

    371. 

  371. 		</pre>

    372. 

  372. 

    373. 

  373. 		<p>

    374. 

  374. 			Backbone.jsのメソッドと発火されるイベントの対応は以下の通りです。

    375. 

  375. 		</p>

    376. 

  376. 		<p>

    377. 

  377. 			<table class="table table-bordered table-condensed">

    378. 

  378. 				<thead>

    379. 

  379. 					<tr>

    380. 

  380. 						<th>

    381. 

  381. 							メソッド ／ イベント

    382. 

  382. 						</th>

    383. 

  383. 						<td style="width:60px">

    384. 

  384. 							add

    385. 

  385. 						</td>

    386. 

  386. 						<td style="width:60px">

    387. 

  387. 							remove

    388. 

  388. 						</td>

    389. 

  389. 						<td style="width:60px">

    390. 

  390. 							reset

    391. 

  391. 						</td>

    392. 

  392. 						<td style="width:60px">

    393. 

  393. 							sort

    394. 

  394. 						</td>

    395. 

  395. 						<td style="width:60px">

    396. 

  396. 							change

    397. 

  397. 						</td>

    398. 

  398. 						<td style="width:60px">

    399. 

  399. 							destroy

    400. 

  400. 						</td>

    401. 

  401. 						<td style="width:60px">

    402. 

  402. 							request

    403. 

  403. 						</td>

    404. 

  404. 						<td style="width:60px">

    405. 

  405. 							sync

    406. 

  406. 						</td>

    407. 

  407. 						<td style="width:60px">

    408. 

  408. 							error

    409. 

  409. 						</td>

    410. 

  410. 						<td style="width:60px">

    411. 

  411. 							route

    412. 

  412. 						</td>

    413. 

  413. 					</tr>

    414. 

  414. 				</thead>

    415. 

  415. 				<tbody>

    416. 

  416. 					<tr>

    417. 

  417. 						<td>

    418. 

  418. 							model.set

    419. 

  419. 						</td>

    420. 

  420. 						<td> <!-- add -->

    421. 

  421. 						</td>

    422. 

  422. 						<td> <!-- remove -->

    423. 

  423. 						</td>

    424. 

  424. 						<td> <!-- reset -->

    425. 

  425. 						</td>

    426. 

  426. 						<td> <!-- sort -->

    427. 

  427. 						</td>

    428. 

  428. 						<td> <!-- change -->

    429. 

  429. 							<div class="icon icon-ok">

    430. 

  430. 						</td>

    431. 

  431. 						<td> <!-- destroy -->

    432. 

  432. 						</td>

    433. 

  433. 						<td> <!-- request -->

    434. 

  434. 						</td>

    435. 

  435. 						<td> <!-- sync -->

    436. 

  436. 						</td>

    437. 

  437. 						<td> <!-- error -->

    438. 

  438. 							<div class="icon icon-ok">

    439. 

  439. 						</td>

    440. 

  440. 						<td> <!-- route -->

    441. 

  441. 						</td>

    442. 

  442. 					</tr>

    443. 

  443. 					<tr>

    444. 

  444. 						<td>

    445. 

  445. 							model.unset

    446. 

  446. 						</td>

    447. 

  447. 						<td> <!-- add -->

    448. 

  448. 						</td>

    449. 

  449. 						<td> <!-- remove -->

    450. 

  450. 						</td>

    451. 

  451. 						<td> <!-- reset -->

    452. 

  452. 						</td>

    453. 

  453. 						<td> <!-- sort -->

    454. 

  454. 						</td>

    455. 

  455. 						<td> <!-- change -->

    456. 

  456. 							<div class="icon icon-ok">

    457. 

  457. 						</td>

    458. 

  458. 						<td> <!-- destroy -->

    459. 

  459. 						</td>

    460. 

  460. 						<td> <!-- request -->

    461. 

  461. 						</td>

    462. 

  462. 						<td> <!-- sync -->

    463. 

  463. 						</td>

    464. 

  464. 						<td> <!-- error -->

    465. 

  465. 							<div class="icon icon-ok">

    466. 

  466. 						</td>

    467. 

  467. 						<td> <!-- route -->

    468. 

  468. 						</td>

    469. 

  469. 					</tr>

    470. 

  470. 					<tr>

    471. 

  471. 						<td>

    472. 

  472. 							model.clear

    473. 

  473. 						</td>

    474. 

  474. 						<td> <!-- add -->

    475. 

  475. 						</td>

    476. 

  476. 						<td> <!-- remove -->

    477. 

  477. 						</td>

    478. 

  478. 						<td> <!-- reset -->

    479. 

  479. 						</td>

    480. 

  480. 						<td> <!-- sort -->

    481. 

  481. 						</td>

    482. 

  482. 						<td> <!-- change -->

    483. 

  483. 							<div class="icon icon-ok">

    484. 

  484. 						</td>

    485. 

  485. 						<td> <!-- destroy -->

    486. 

  486. 						</td>

    487. 

  487. 						<td> <!-- request -->

    488. 

  488. 						</td>

    489. 

  489. 						<td> <!-- sync -->

    490. 

  490. 						</td>

    491. 

  491. 						<td> <!-- error -->

    492. 

  492. 							<div class="icon icon-ok">

    493. 

  493. 						</td>

    494. 

  494. 						<td> <!-- route -->

    495. 

  495. 						</td>

    496. 

  496. 					</tr>

    497. 

  497. 					<tr>

    498. 

  498. 						<td>

    499. 

  499. 							model.fetch

    500. 

  500. 						</td>

    501. 

  501. 						<td> <!-- add -->

    502. 

  502. 						</td>

    503. 

  503. 						<td> <!-- remove -->

    504. 

  504. 						</td>

    505. 

  505. 						<td> <!-- reset -->

    506. 

  506. 						</td>

    507. 

  507. 						<td> <!-- sort -->

    508. 

  508. 						</td>

    509. 

  509. 						<td> <!-- change -->

    510. 

  510. 							<div class="icon icon-ok">

    511. 

  511. 						</td>

    512. 

  512. 						<td> <!-- destroy -->

    513. 

  513. 						</td>

    514. 

  514. 						<td> <!-- request -->

    515. 

  515. 							<div class="icon icon-ok">

    516. 

  516. 						</td>

    517. 

  517. 						<td> <!-- sync -->

    518. 

  518. 							<div class="icon icon-ok">

    519. 

  519. 						</td>

    520. 

  520. 						<td> <!-- error -->

    521. 

  521. 							<div class="icon icon-ok">

    522. 

  522. 						</td>

    523. 

  523. 						<td> <!-- route -->

    524. 

  524. 						</td>

    525. 

  525. 					</tr>

    526. 

  526. 					<tr>

    527. 

  527. 						<td>

    528. 

  528. 							model.save

    529. 

  529. 						</td>

    530. 

  530. 						<td> <!-- add -->

    531. 

  531. 						</td>

    532. 

  532. 						<td> <!-- remove -->

    533. 

  533. 						</td>

    534. 

  534. 						<td> <!-- reset -->

    535. 

  535. 						</td>

    536. 

  536. 						<td> <!-- sort -->

    537. 

  537. 						</td>

    538. 

  538. 						<td> <!-- change -->

    539. 

  539. 							<div class="icon icon-ok">

    540. 

  540. 						</td>

    541. 

  541. 						<td> <!-- destroy -->

    542. 

  542. 						</td>

    543. 

  543. 						<td> <!-- request -->

    544. 

  544. 							<div class="icon icon-ok">

    545. 

  545. 						</td>

    546. 

  546. 						<td> <!-- sync -->

    547. 

  547. 							<div class="icon icon-ok">

    548. 

  548. 						</td>

    549. 

  549. 						<td> <!-- error -->

    550. 

  550. 							<div class="icon icon-ok">

    551. 

  551. 						</td>

    552. 

  552. 						<td> <!-- route -->

    553. 

  553. 						</td>

    554. 

  554. 					</tr>

    555. 

  555. 					<tr>

    556. 

  556. 						<td>

    557. 

  557. 							model.destroy

    558. 

  558. 						</td>

    559. 

  559. 						<td> <!-- add -->

    560. 

  560. 						</td>

    561. 

  561. 						<td> <!-- remove -->

    562. 

  562. 						</td>

    563. 

  563. 						<td> <!-- reset -->

    564. 

  564. 						</td>

    565. 

  565. 						<td> <!-- sort -->

    566. 

  566. 						</td>

    567. 

  567. 						<td> <!-- change -->

    568. 

  568. 						</td>

    569. 

  569. 						<td> <!-- destroy -->

    570. 

  570. 							<div class="icon icon-ok">

    571. 

  571. 						</td>

    572. 

  572. 						<td> <!-- request -->

    573. 

  573. 							<div class="icon icon-ok">

    574. 

  574. 						</td>

    575. 

  575. 						<td> <!-- sync -->

    576. 

  576. 							<div class="icon icon-ok">

    577. 

  577. 						</td>

    578. 

  578. 						<td> <!-- error -->

    579. 

  579. 							<div class="icon icon-ok">

    580. 

  580. 						</td>

    581. 

  581. 						<td> <!-- route -->

    582. 

  582. 						</td>

    583. 

  583. 					</tr>

    584. 

  584. 					<tr>

    585. 

  585. 						<td>

    586. 

  586. 							model.validate

    587. 

  587. 						</td>

    588. 

  588. 						<td> <!-- add -->

    589. 

  589. 						</td>

    590. 

  590. 						<td> <!-- remove -->

    591. 

  591. 						</td>

    592. 

  592. 						<td> <!-- reset -->

    593. 

  593. 						</td>

    594. 

  594. 						<td> <!-- sort -->

    595. 

  595. 						</td>

    596. 

  596. 						<td> <!-- change -->

    597. 

  597. 						</td>

    598. 

  598. 						<td> <!-- destroy -->

    599. 

  599. 						</td>

    600. 

  600. 						<td> <!-- request -->

    601. 

  601. 						</td>

    602. 

  602. 						<td> <!-- sync -->

    603. 

  603. 						</td>

    604. 

  604. 						<td> <!-- error -->

    605. 

  605. 							<div class="icon icon-ok">

    606. 

  606. 						</td>

    607. 

  607. 						<td> <!-- route -->

    608. 

  608. 						</td>

    609. 

  609. 					</tr>

    610. 

  610. 					<tr>

    611. 

  611. 						<td>

    612. 

  612. 							model.change

    613. 

  613. 						</td>

    614. 

  614. 						<td> <!-- add -->

    615. 

  615. 						</td>

    616. 

  616. 						<td> <!-- remove -->

    617. 

  617. 						</td>

    618. 

  618. 						<td> <!-- reset -->

    619. 

  619. 						</td>

    620. 

  620. 						<td> <!-- sort -->

    621. 

  621. 						</td>

    622. 

  622. 						<td> <!-- change -->

    623. 

  623. 							<div class="icon icon-ok">

    624. 

  624. 						</td>

    625. 

  625. 						<td> <!-- destroy -->

    626. 

  626. 						</td>

    627. 

  627. 						<td> <!-- request -->

    628. 

  628. 						</td>

    629. 

  629. 						<td> <!-- sync -->

    630. 

  630. 						</td>

    631. 

  631. 						<td> <!-- error -->

    632. 

  632. 						</td>

    633. 

  633. 						<td> <!-- route -->

    634. 

  634. 						</td>

    635. 

  635. 					</tr>

    636. 

  636. 					<tr>

    637. 

  637. 						<td>

    638. 

  638. 							collection.add

    639. 

  639. 						</td>

    640. 

  640. 						<td> <!-- add -->

    641. 

  641. 							<div class="icon icon-ok">

    642. 

  642. 						</td>

    643. 

  643. 						<td> <!-- remove -->

    644. 

  644. 						</td>

    645. 

  645. 						<td> <!-- reset -->

    646. 

  646. 						</td>

    647. 

  647. 						<td> <!-- sort -->

    648. 

  648. 						</td>

    649. 

  649. 						<td> <!-- change -->

    650. 

  650. 						</td>

    651. 

  651. 						<td> <!-- destroy -->

    652. 

  652. 						</td>

    653. 

  653. 						<td> <!-- request -->

    654. 

  654. 						</td>

    655. 

  655. 						<td> <!-- sync -->

    656. 

  656. 						</td>

    657. 

  657. 						<td> <!-- error -->

    658. 

  658. 						</td>

    659. 

  659. 						<td> <!-- route -->

    660. 

  660. 						</td>

    661. 

  661. 					</tr>

    662. 

  662. 					<tr>

    663. 

  663. 						<td>

    664. 

  664. 							collection.push

    665. 

  665. 						</td>

    666. 

  666. 						<td> <!-- add -->

    667. 

  667. 							<div class="icon icon-ok">

    668. 

  668. 						</td>

    669. 

  669. 						<td> <!-- remove -->

    670. 

  670. 						</td>

    671. 

  671. 						<td> <!-- reset -->

    672. 

  672. 						</td>

    673. 

  673. 						<td> <!-- sort -->

    674. 

  674. 						</td>

    675. 

  675. 						<td> <!-- change -->

    676. 

  676. 						</td>

    677. 

  677. 						<td> <!-- destroy -->

    678. 

  678. 						</td>

    679. 

  679. 						<td> <!-- request -->

    680. 

  680. 						</td>

    681. 

  681. 						<td> <!-- sync -->

    682. 

  682. 						</td>

    683. 

  683. 						<td> <!-- error -->

    684. 

  684. 						</td>

    685. 

  685. 						<td> <!-- route -->

    686. 

  686. 						</td>

    687. 

  687. 					</tr>

    688. 

  688. 					<tr>

    689. 

  689. 						<td>

    690. 

  690. 							collection.unshift

    691. 

  691. 						</td>

    692. 

  692. 						<td> <!-- add -->

    693. 

  693. 							<div class="icon icon-ok">

    694. 

  694. 						</td>

    695. 

  695. 						<td> <!-- remove -->

    696. 

  696. 						</td>

    697. 

  697. 						<td> <!-- reset -->

    698. 

  698. 						</td>

    699. 

  699. 						<td> <!-- sort -->

    700. 

  700. 						</td>

    701. 

  701. 						<td> <!-- change -->

    702. 

  702. 						</td>

    703. 

  703. 						<td> <!-- destroy -->

    704. 

  704. 						</td>

    705. 

  705. 						<td> <!-- request -->

    706. 

  706. 						</td>

    707. 

  707. 						<td> <!-- sync -->

    708. 

  708. 						</td>

    709. 

  709. 						<td> <!-- error -->

    710. 

  710. 						</td>

    711. 

  711. 						<td> <!-- route -->

    712. 

  712. 						</td>

    713. 

  713. 					</tr>

    714. 

  714. 					<tr>

    715. 

  715. 						<td>

    716. 

  716. 							collection.remove

    717. 

  717. 						</td>

    718. 

  718. 						<td> <!-- add -->

    719. 

  719. 						</td>

    720. 

  720. 						<td> <!-- remove -->

    721. 

  721. 							<div class="icon icon-ok">

    722. 

  722. 						</td>

    723. 

  723. 						<td> <!-- reset -->

    724. 

  724. 						</td>

    725. 

  725. 						<td> <!-- sort -->

    726. 

  726. 						</td>

    727. 

  727. 						<td> <!-- change -->

    728. 

  728. 						</td>

    729. 

  729. 						<td> <!-- destroy -->

    730. 

  730. 						</td>

    731. 

  731. 						<td> <!-- request -->

    732. 

  732. 						</td>

    733. 

  733. 						<td> <!-- sync -->

    734. 

  734. 						</td>

    735. 

  735. 						<td> <!-- error -->

    736. 

  736. 						</td>

    737. 

  737. 						<td> <!-- route -->

    738. 

  738. 						</td>

    739. 

  739. 					</tr>

    740. 

  740. 					<tr>

    741. 

  741. 						<td>

    742. 

  742. 							collection.pop

    743. 

  743. 						</td>

    744. 

  744. 						<td> <!-- add -->

    745. 

  745. 						</td>

    746. 

  746. 						<td> <!-- remove -->

    747. 

  747. 							<div class="icon icon-ok">

    748. 

  748. 						</td>

    749. 

  749. 						<td> <!-- reset -->

    750. 

  750. 						</td>

    751. 

  751. 						<td> <!-- sort -->

    752. 

  752. 						</td>

    753. 

  753. 						<td> <!-- change -->

    754. 

  754. 						</td>

    755. 

  755. 						<td> <!-- destroy -->

    756. 

  756. 						</td>

    757. 

  757. 						<td> <!-- request -->

    758. 

  758. 						</td>

    759. 

  759. 						<td> <!-- sync -->

    760. 

  760. 						</td>

    761. 

  761. 						<td> <!-- error -->

    762. 

  762. 						</td>

    763. 

  763. 						<td> <!-- route -->

    764. 

  764. 						</td>

    765. 

  765. 					</tr>

    766. 

  766. 					<tr>

    767. 

  767. 						<td>

    768. 

  768. 							collection.shift

    769. 

  769. 						</td>

    770. 

  770. 						<td> <!-- add -->

    771. 

  771. 						</td>

    772. 

  772. 						<td> <!-- remove -->

    773. 

  773. 							<div class="icon icon-ok">

    774. 

  774. 						</td>

    775. 

  775. 						<td> <!-- reset -->

    776. 

  776. 						</td>

    777. 

  777. 						<td> <!-- sort -->

    778. 

  778. 						</td>

    779. 

  779. 						<td> <!-- change -->

    780. 

  780. 						</td>

    781. 

  781. 						<td> <!-- destroy -->

    782. 

  782. 						</td>

    783. 

  783. 						<td> <!-- request -->

    784. 

  784. 						</td>

    785. 

  785. 						<td> <!-- sync -->

    786. 

  786. 						</td>

    787. 

  787. 						<td> <!-- error -->

    788. 

  788. 						</td>

    789. 

  789. 						<td> <!-- route -->

    790. 

  790. 						</td>

    791. 

  791. 					</tr>

    792. 

  792. 					<tr>

    793. 

  793. 						<td>

    794. 

  794. 							collection.sort

    795. 

  795. 						</td>

    796. 

  796. 						<td> <!-- add -->

    797. 

  797. 						</td>

    798. 

  798. 						<td> <!-- remove -->

    799. 

  799. 						</td>

    800. 

  800. 						<td> <!-- reset -->

    801. 

  801. 						</td>

    802. 

  802. 						<td> <!-- sort -->

    803. 

  803. 							<div class="icon icon-ok">

    804. 

  804. 						</td>

    805. 

  805. 						<td> <!-- change -->

    806. 

  806. 						</td>

    807. 

  807. 						<td> <!-- destroy -->

    808. 

  808. 						</td>

    809. 

  809. 						<td> <!-- request -->

    810. 

  810. 						</td>

    811. 

  811. 						<td> <!-- sync -->

    812. 

  812. 						</td>

    813. 

  813. 						<td> <!-- error -->

    814. 

  814. 						</td>

    815. 

  815. 						<td> <!-- route -->

    816. 

  816. 						</td>

    817. 

  817. 					</tr>

    818. 

  818. 					<tr>

    819. 

  819. 						<td>

    820. 

  820. 							collection.reset

    821. 

  821. 						</td>

    822. 

  822. 						<td> <!-- add -->

    823. 

  823. 						</td>

    824. 

  824. 						<td> <!-- remove -->

    825. 

  825. 						</td>

    826. 

  826. 						<td> <!-- reset -->

    827. 

  827. 							<div class="icon icon-ok">

    828. 

  828. 						</td>

    829. 

  829. 						<td> <!-- sort -->

    830. 

  830. 						</td>

    831. 

  831. 						<td> <!-- change -->

    832. 

  832. 						</td>

    833. 

  833. 						<td> <!-- destroy -->

    834. 

  834. 						</td>

    835. 

  835. 						<td> <!-- request -->

    836. 

  836. 						</td>

    837. 

  837. 						<td> <!-- sync -->

    838. 

  838. 						</td>

    839. 

  839. 						<td> <!-- error -->

    840. 

  840. 						</td>

    841. 

  841. 						<td> <!-- route -->

    842. 

  842. 						</td>

    843. 

  843. 					</tr>

    844. 

  844. 					<tr>

    845. 

  845. 						<td>

    846. 

  846. 							collection.fetch

    847. 

  847. 						</td>

    848. 

  848. 						<td> <!-- add -->

    849. 

  849. 							<div class="icon icon-ok">

    850. 

  850. 						</td>

    851. 

  851. 						<td> <!-- remove -->

    852. 

  852. 						</td>

    853. 

  853. 						<td> <!-- reset -->

    854. 

  854. 							<div class="icon icon-ok">

    855. 

  855. 						</td>

    856. 

  856. 						<td> <!-- sort -->

    857. 

  857. 						</td>

    858. 

  858. 						<td> <!-- change -->

    859. 

  859. 						</td>

    860. 

  860. 						<td> <!-- destroy -->

    861. 

  861. 						</td>

    862. 

  862. 						<td> <!-- request -->

    863. 

  863. 							<div class="icon icon-ok">

    864. 

  864. 						</td>

    865. 

  865. 						<td> <!-- sync -->

    866. 

  866. 							<div class="icon icon-ok">

    867. 

  867. 						</td>

    868. 

  868. 						<td> <!-- error -->

    869. 

  869. 							<div class="icon icon-ok">

    870. 

  870. 						</td>

    871. 

  871. 						<td> <!-- route -->

    872. 

  872. 						</td>

    873. 

  873. 					</tr>

    874. 

  874. 					<tr>

    875. 

  875. 						<td>

    876. 

  876. 							collection.create

    877. 

  877. 						</td>

    878. 

  878. 						<td> <!-- add -->

    879. 

  879. 							<div class="icon icon-ok">

    880. 

  880. 						</td>

    881. 

  881. 						<td> <!-- remove -->

    882. 

  882. 						</td>

    883. 

  883. 						<td> <!-- reset -->

    884. 

  884. 						</td>

    885. 

  885. 						<td> <!-- sort -->

    886. 

  886. 						</td>

    887. 

  887. 						<td> <!-- change -->

    888. 

  888. 						</td>

    889. 

  889. 						<td> <!-- destroy -->

    890. 

  890. 						</td>

    891. 

  891. 						<td> <!-- request -->

    892. 

  892. 							<div class="icon icon-ok">

    893. 

  893. 						</td>

    894. 

  894. 						<td> <!-- sync -->

    895. 

  895. 							<div class="icon icon-ok">

    896. 

  896. 						</td>

    897. 

  897. 						<td> <!-- error -->

    898. 

  898. 							<div class="icon icon-ok">

    899. 

  899. 						</td>

    900. 

  900. 						<td> <!-- route -->

    901. 

  901. 						</td>

    902. 

  902. 					</tr>

    903. 

  903. 					<tr>

    904. 

  904. 						<td>

    905. 

  905. 							router.navigate

    906. 

  906. 						</td>

    907. 

  907. 						<td> <!-- add -->

    908. 

  908. 						</td>

    909. 

  909. 						<td> <!-- remove -->

    910. 

  910. 						</td>

    911. 

  911. 						<td> <!-- reset -->

    912. 

  912. 						</td>

    913. 

  913. 						<td> <!-- sort -->

    914. 

  914. 						</td>

    915. 

  915. 						<td> <!-- change -->

    916. 

  916. 						</td>

    917. 

  917. 						<td> <!-- destroy -->

    918. 

  918. 						</td>

    919. 

  919. 						<td> <!-- request -->

    920. 

  920. 						</td>

    921. 

  921. 						<td> <!-- sync -->

    922. 

  922. 						</td>

    923. 

  923. 						<td> <!-- error -->

    924. 

  924. 						</td>

    925. 

  925. 						<td> <!-- route -->

    926. 

  926. 							<div class="icon icon-ok">

    927. 

  927. 						</td>

    928. 

  928. 					</tr>

    929. 

  929. 				</tbody>

    930. 

  930. 			</table>

    931. 

  931. 		</p>

    932. 

  932. 

    933. 

  933. 		<hr />

    934. 

  934. 

    935. 

  935. 		<!-- once -->

    936. 

  936. 		<h3 id="Events-on">object.once(events, callback, [context])</h3>

    937. 

  937. 		<p>

    938. 

  938. 		</p>

    939. 

  939. 

    940. 

  940. 		<hr />

    941. 

  941. 

    942. 

  942. 		<!-- listenTo -->

    943. 

  943. 		<h3 id="Events-listenTo">object.listenTo(other, event, callback)</h3>

    944. 

  944. 		<p>

    945. 

  945. 		</p>

    946. 

  946. 

    947. 

  947. 		<hr />

    948. 

  948. 

    949. 

  949. 		<!-- stopListening -->

    950. 

  950. 		<h3 id="Events-stopListening">object.stopListening([other], [event], [callback])</h3>

    951. 

  951. 		<p>

    952. 

  952. 		</p>

    953. 

  953. 

    954. 

  954. 		<hr />

    955. 

  955. 

    956. 

  956. 		<h2>Backbone.Model</h2>

    957. 

  957. 		<hr />

    958. 

  958. 

    959. 

  959. 		<!-- extend -->

    960. 

  960. 		<h3 id="Model-extend">Backbone.Model.extend([properties], [classProperties])</h3>

    961. 

  961. 		<p>

    962. 

  962. 			<code>Backbone.Model</code>　を継承した新しいモデルを作ります。

    963. 

  963. 		</p>

    964. 

  964. 		<h4>properties</h4>

    965. 

  965. 		<p>

    966. 

  966. 			インスタンスメンバを定義します。

    967. 

  967. 		</p>

    968. 

  968. 		<pre>

    969. 

  969. var User = Backbone.Model.extend({

    970. 

  970.     say: function () {

    971. 

  971.         console.log("Hello.");

    972. 

  972.     }

    973. 

  973. });

    974. 

  974. 

    975. 

  975. var user = new User();

    976. 

  976. user.say(); //-> Hello.

    977. 

  977. 		</pre>

    978. 

  978. 		<h4>classProperties</h4>

    979. 

  979. 		<p>

    980. 

  980. 			静的メンバを定義します。以下はFactoryパターンの例です。

    981. 

  981. 		</p>

    982. 

  982. 		<pre>

    983. 

  983. var User = Backbone.Model.extend({

    984. 

  984.     openFile: function () {

    985. 

  985.         console.log(this.canOpen);

    986. 

  986.     }

    987. 

  987. }, {

    988. 

  988.     create: function (type) {

    989. 

  989.         if (type === "admin") {

    990. 

  990.             return new AdminUser;

    991. 

  991.         } else {

    992. 

  992.             return new NormalUser;

    993. 

  993.         }

    994. 

  994.     }

    995. 

  995. });

    996. 

  996. 

    997. 

  997. var AdminUser = User.extend({

    998. 

  998.     canOpen: true

    999. 

  999. });

    1000. 

  1000. 

    1001. 

  1001. var NormalUser = User.extend({

    1002. 

  1002.     canOpen: false

    1003. 

  1003. });

    1004. 

  1004. 

    1005. 

  1005. var user1 = User.create("admin");

    1006. 

  1006. var user2 = User.create("normal");

    1007. 

  1007. 

    1008. 

  1008. user1.openFile();   //-> true

    1009. 

  1009. user2.openFile();   //-> false

    1010. 

  1010. 		</pre>

    1011. 

  1011. 

    1012. 

  1012. 		<hr />

    1013. 

  1013. 

    1014. 

  1014. 		<!-- constractor -->

    1015. 

  1015. 		<h3 id="Model-constractor">new Model([attributes], [options])</h3>

    1016. 

  1016. 		<p>

    1017. 

  1017. 			コンストラクタです。

    1018. 

  1018. 		</p>

    1019. 

  1019. 		<h4>attributes</h4>

    1020. 

  1020. 		<p>モデルの属性へ設定したい値をオブジェクトリテラルで指定します。</p>

    1021. 

  1021. 		<pre>

    1022. 

  1022. var Model = Backbone.Model.extend();

    1023. 

  1023. var model = new Model({name: "Tanaka", country: "Japan"});

    1024. 

  1024. 		</pre>

    1025. 

  1025. 

    1026. 

  1026. 		<h4>options</h4>

    1027. 

  1027. 		<p>

    1028. 

  1028. 			<code>options.parse = true</code> を設定すると、<a href="#Model-parse">parseメソッド</a>を実行します。

    1029. 

  1029. 		</p>

    1030. 

  1030. 		<pre>

    1031. 

  1031. var User = Backbone.Model.extend({

    1032. 

  1032.     parse: function (response) {

    1033. 

  1033.         return response.user;

    1034. 

  1034.     }

    1035. 

  1035. });

    1036. 

  1036. var user = new User({user: {name: "Tanaka"}}, {parse: true});

    1037. 

  1037. 

    1038. 

  1038. console.log(user.toJSON());     //-> {name: "Tanaka"}

    1039. 

  1039. 		</pre>

    1040. 

  1040. 		<p>

    1041. 

  1041. 			<code>options.collection</code> にコレクションを設定すると、<a href="#Model-url">urlメソッド</a>でモデルのURLをすぐに取得できるようになります。ただし、この時点ではモデルからコレクションへの一方的な参照がなされているだけで、コレクションにモデルが格納されたのではありません。

    1042. 

  1042. 		</p>

    1043. 

  1043. 		<pre>

    1044. 

  1044. var users = new Backbone.Collection();

    1045. 

  1045. users.url = "/hoge";

    1046. 

  1046. 

    1047. 

  1047. var User = Backbone.Model.extend();

    1048. 

  1048. var user = new User({id: 1, name: "Tanaka"}, {collection: users});

    1049. 

  1049. 

    1050. 

  1050. console.log(user.url());    //-> /hoge/1

    1051. 

  1051. console.log(users.length);  //-> 0

    1052. 

  1052. 		</pre>

    1053. 

  1053. 		<p>

    1054. 

  1054. 			その他に、<a href="#Model-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます。

    1055. 

  1055. 		</p>

    1056. 

  1056. 

    1057. 

  1057. 		<hr />

    1058. 

  1058. 

    1059. 

  1059. 		<!-- initialize -->

    1060. 

  1060. 		<h3 id="Model-initialize">model.initialize([attributes], [options])</h3>

    1061. 

  1061. 		<p>

    1062. 

  1062. 			インスタンス生成時に呼ばれます。

    1063. 

  1063. 		</p>

    1064. 

  1064. 		<h4>attributes</h4>

    1065. 

  1065. 		<p><a href="#Model-constractor">コンストラクタ</a>のattributesへ渡した値です。</p>

    1066. 

  1066. 		<h4>options</h4>

    1067. 

  1067. 		<p><a href="#Model-constractor">コンストラクタ</a>のoptionsへ渡した値です。</p>

    1068. 

  1068. 

    1069. 

  1069. 		<hr />

    1070. 

  1070. 

    1071. 

  1071. 		<!-- get -->

    1072. 

  1072. 		<h3 id="Model-get">model.get(attribute)</h3>

    1073. 

  1073. 		<p>

    1074. 

  1074. 			モデルの属性値を取得します。

    1075. 

  1075. 		</p>

    1076. 

  1076. 

    1077. 

  1077. 		<hr />

    1078. 

  1078. 

    1079. 

  1079. 		<!-- set -->

    1080. 

  1080. 		<h3 id="Model-set">model.set(key, value, [options]) または set(attributes, [options])</h3>

    1081. 

  1081. 		<p>

    1082. 

  1082. 			モデルの属性値を設定します。属性値が現在の属性値と異なる場合、<a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。

    1083. 

  1083. 		</p>

    1084. 

  1084. 		<h4>key, value</h4>

    1085. 

  1085. 		<p>

    1086. 

  1086. 			keyとvalueのペアで指定します。

    1087. 

  1087. 		</p>

    1088. 

  1088. 		<pre>

    1089. 

  1089. model.set("name", "Tanaka");

    1090. 

  1090. model.set("country", "Japan");

    1091. 

  1091. 		</pre>

    1092. 

  1092. 		<h4>attributes</h4>

    1093. 

  1093. 		<p>

    1094. 

  1094. 			オブジェクトリテラルで指定することもできます。

    1095. 

  1095. 		</p>

    1096. 

  1096. 		<pre>

    1097. 

  1097. model.set({name: "Tanaka", country: "Japan"});

    1098. 

  1098. 		</pre>

    1099. 

  1099. 		<h4>options</h4>

    1100. 

  1100. 		<p>

    1101. 

  1101. 			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。

    1102. 

  1102. 		</p>

    1103. 

  1103. 		<pre>

    1104. 

  1104. var Model = Backbone.Model.extend({

    1105. 

  1105.     validate: function (attrs) {

    1106. 

  1106.         if (_.isEmpty(attrs.name)) {

    1107. 

  1107.             return "invalid!";

    1108. 

  1108.         }

    1109. 

  1109.     }

    1110. 

  1110. });

    1111. 

  1111. 

    1112. 

  1112. var model = new Model();

    1113. 

  1113. 

    1114. 

  1114. model.on("change", function () {

    1115. 

  1115.     console.log("changed!");

    1116. 

  1116. });

    1117. 

  1117. 

    1118. 

  1118. model.on("error", function (model, error) {

    1119. 

  1119.     console.log(error);

    1120. 

  1120. });

    1121. 

  1121. 

    1122. 

  1122. model.set({name: "Tanaka"});  //-> "changed!"

    1123. 

  1123. model.set({name: "Suzuki"}, {silent: true});

    1124. 

  1124. 

    1125. 

  1125. model.set({name: ""});  //-> "invalid!"

    1126. 

  1126. model.set({name: ""}, {silent: true});

    1127. 

  1127. 		</pre>

    1128. 

  1128. 

    1129. 

  1129. 		<hr />

    1130. 

  1130. 

    1131. 

  1131. 		<!-- escape -->

    1132. 

  1132. 		<h3 id="Model-escape">model.escape(attribute)</h3>

    1133. 

  1133. 		<p>

    1134. 

  1134. 			<a href="#Model-get">getメソッド</a>と同じくモデルの属性値を取得しますが、HTMLをエスケープします。

    1135. 

  1135. 		</p>

    1136. 

  1136. 

    1137. 

  1137. 		<hr />

    1138. 

  1138. 

    1139. 

  1139. 		<!-- has -->

    1140. 

  1140. 		<h3 id="Model-has">model.has(attribute)</h3>

    1141. 

  1141. 		<p>

    1142. 

  1142. 			モデルが属性そのものを持っているかどうかを返します。

    1143. 

  1143. 		</p>

    1144. 

  1144. 		<pre>

    1145. 

  1145. var model = new Backbone.Model({name: ""});

    1146. 

  1146. 

    1147. 

  1147. console.log(model.has("name"));     //-> true

    1148. 

  1148. console.log(model.has("country"));  //-> false

    1149. 

  1149. 		</pre>

    1150. 

  1150. 

    1151. 

  1151. 		<hr />

    1152. 

  1152. 

    1153. 

  1153. 		<!-- unset -->

    1154. 

  1154. 		<h3 id="Model-unset">model.unset(attribute, [options])</h3>

    1155. 

  1155. 		<p>

    1156. 

  1156. 			モデルから属性そのものを削除します。存在する属性であれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。

    1157. 

  1157. 		</p>

    1158. 

  1158. 		<h4>options</h4>

    1159. 

  1159. 		<p>

    1160. 

  1160. 			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。

    1161. 

  1161. 		</p>

    1162. 

  1162. 

    1163. 

  1163. 		<hr />

    1164. 

  1164. 

    1165. 

  1165. 		<!-- clear -->

    1166. 

  1166. 		<h3 id="Model-clear">model.clear([options])</h3>

    1167. 

  1167. 		<p>

    1168. 

  1168. 			モデルから属性そのものを全て削除します。属性が１つでも存在すれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。

    1169. 

  1169. 		</p>

    1170. 

  1170. 		<h4>options</h4>

    1171. 

  1171. 		<p>

    1172. 

  1172. 			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。

    1173. 

  1173. 		</p>

    1174. 

  1174. 

    1175. 

  1175. 		<hr />

    1176. 

  1176. 

    1177. 

  1177. 		<!-- id -->

    1178. 

  1178. 		<h3 id="Model-id">model.id</h3>

    1179. 

  1179. 		<p>

    1180. 

  1180. 			モデルを一意に識別するための識別子です。コレクションの中からモデルを取り出す際のキーとして使用したり、モデルごとに決まるURLの一部に使用されたりします。

    1181. 

  1181. 		</p>

    1182. 

  1182. 		<p>

    1183. 

  1183. 			idは通常、<a href="#Model-fetch">fetchメソッド</a>や<a href="#Model-save">saveメソッド</a>によってバックエンド側で決定されますが、クライアントサイドで手動でidを設定する場合には、<a href="#Model-set">setメソッド</a>でモデルの属性値として設定します。モデルのidプロパティは自動的にその値を参照してくれます。

    1184. 

  1184. 		</p>

    1185. 

  1185. 		<pre>

    1186. 

  1186. var model = new Backbone.Model({

    1187. 

  1187.     id: 1,

    1188. 

  1188.     name: "Tanaka"

    1189. 

  1189. });

    1190. 

  1190. 

    1191. 

  1191. console.log(model.toJSON());    //-> {id: 1, name: "Tanaka"}

    1192. 

  1192. console.log(model.id);          //-> 1

    1193. 

  1193. 		</pre>

    1194. 

  1194. 		<p>

    1195. 

  1195. 			<a href="#Model-set">setメソッド</a>で設定せずに、idプロパティに直接設定することも可能ですが、モデルの属性値は変化しませんので注意が必要です。

    1196. 

  1196. 		</p>

    1197. 

  1197. 		<pre>

    1198. 

  1198. var model = new Backbone.Model({

    1199. 

  1199.     name: "Tanaka"

    1200. 

  1200. });

    1201. 

  1201. model.id = 1;

    1202. 

  1202. 

    1203. 

  1203. console.log(model.id);          //-> 1

    1204. 

  1204. console.log(model.toJSON());    //-> {name: "Tanaka"}

    1205. 

  1205. 

    1206. 

  1206. model = new Backbone.Model({

    1207. 

  1207.     id: 1,

    1208. 

  1208.     name: "Tanaka"

    1209. 

  1209. });

    1210. 

  1210. model.id = 2;

    1211. 

  1211. 

    1212. 

  1212. console.log(model.id);          //-> 2

    1213. 

  1213. console.log(model.toJSON());    //-> {id: 1, name: "Tanaka"}

    1214. 

  1214. 		</pre>

    1215. 

  1215. 

    1216. 

  1216. 		<hr />

    1217. 

  1217. 

    1218. 

  1218. 		<!-- idAttribute -->

    1219. 

  1219. 		<h3 id="Model-idAttribute">model.idAttribute</h3>

    1220. 

  1220. 		<p>

    1221. 

  1221. 			モデルの属性の"id"というネーミングは変更できます。例えばバックエンドのデータベースのカラム名と合わせると便利です。ただし、モデルの<a href="#Model-id">idプロパティ</a>は"id"のままです。

    1222. 

  1222. 		</p>

    1223. 

  1223. 		<pre>

    1224. 

  1224. var Model = Backbone.Model.extend({

    1225. 

  1225.     idAttribute: "user_id"

    1226. 

  1226. });

    1227. 

  1227. 

    1228. 

  1228. var model = new Model({

    1229. 

  1229.     user_id: 1,

    1230. 

  1230.     name: "Tanaka"

    1231. 

  1231. });

    1232. 

  1232. 

    1233. 

  1233. console.log(model.id);          //-> 1

    1234. 

  1234. console.log(model.toJSON());    //-> {user_id: 1, name: "Tanaka"}

    1235. 

  1235. console.log(model.user_id);     //-> undefined

    1236. 

  1236. 		</pre>

    1237. 

  1237. 

    1238. 

  1238. 		<hr />

    1239. 

  1239. 

    1240. 

  1240. 		<!-- cid -->

    1241. 

  1241. 		<h3 id="Model-cid">model.cid</h3>

    1242. 

  1242. 		<p>

    1243. 

  1243. 			インスタンス生成時に自動的に振られるユニークな識別子です。

    1244. 

  1244. 		</p>

    1245. 

  1245. 

    1246. 

  1246. 		<hr />

    1247. 

  1247. 

    1248. 

  1248. 		<!-- attributes -->

    1249. 

  1249. 		<h3 id="Model-attributes">model.attributes</h3>

    1250. 

  1250. 		<p>

    1251. 

  1251. 			モデルの属性が格納されているプロパティです。属性に値を設定する場合、このプロパティを直接更新することでも可能ですが、イベントの発火などを機能させるために<a href="#Model-set">setメソッド</a>を使用します。

    1252. 

  1252. 		</p>

    1253. 

  1253. 

    1254. 

  1254. 		<hr />

    1255. 

  1255. 

    1256. 

  1256. 		<!-- defaults -->

    1257. 

  1257. 		<h3 id="Model-defaults">model.defaults または model.defaults()</h3>

    1258. 

  1258. 		<p>

    1259. 

  1259. 			モデルの属性の初期値を設定します。関数として定義することも可能です。

    1260. 

  1260. 		</p>

    1261. 

  1261. 		<pre>

    1262. 

  1262. var Model = Backbone.Model.extend({

    1263. 

  1263.     defaults: function () {

    1264. 

  1264.         return {

    1265. 

  1265.             name:    "Tanaka",

    1266. 

  1266.             country: "Japan"

    1267. 

  1267.         }

    1268. 

  1268.     }

    1269. 

  1269. });

    1270. 

  1270. var model = new Model();

    1271. 

  1271. 

    1272. 

  1272. console.log(model.toJSON());    //-> {name: "Tanaka", country: "Japan"}

    1273. 

  1273. 		</pre>

    1274. 

  1274. 

    1275. 

  1275. 		<hr />

    1276. 

  1276. 

    1277. 

  1277. 		<!-- toJSON -->

    1278. 

  1278. 		<h3 id="Model-toJSON">model.toJSON()</h3>

    1279. 

  1279. 		<p>

    1280. 

  1280. 			<a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトを返します。JSON文字列に変換するのではありません。

    1281. 

  1281. 		</p>

    1282. 

  1282. 		<pre>

    1283. 

  1283. var model = new Backbone.Model({

    1284. 

  1284.     name: "Tanaka"

    1285. 

  1285. });

    1286. 

  1286. 

    1287. 

  1287. console.log(model.toJSON());                    //-> { name: "Tanaka"}

    1288. 

  1288. console.log(JSON.stringify(model.attributes));  //-> "{"name": "Tanaka"}"

    1289. 

  1289. 		</pre>

    1290. 

  1290. 

    1291. 

  1291. 		<hr />

    1292. 

  1292. 

    1293. 

  1293. 		<!-- fetch -->

    1294. 

  1294. 		<h3 id="Model-fetch">model.fetch([options])</h3>

    1295. 

  1295. 		<p>

    1296. 

  1296. 			バックエンドとHTTPリクエストのGETメソッドで通信して、リソースの取得を要求します。取得結果を<a href="#Model-parse">parseメソッド</a>で変換してからモデルの属性に設定します。<a href="#Model-validate">validateメソッド</a>も実行します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。

    1297. 

  1297. 		</p>

    1298. 

  1298. 		<p>

    1299. 

  1299. 			通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。また、取得結果をモデルの属性に設定する際に、fetch前の値と異なる場合には <a href="#Events-eventList">changeイベント</a>を発火します。

    1300. 

  1300. 		</p>

    1301. 

  1301. 		<p>

    1302. 

  1302. 			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。

    1303. 

  1303. 		</p>

    1304. 

  1304. 		<h4>options</h4>

    1305. 

  1305. 		<p>

    1306. 

  1306. 			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。

    1307. 

  1307. 		</p>

    1308. 

  1308. 

    1309. 

  1309. 		<hr />

    1310. 

  1310. 

    1311. 

  1311. 		<!-- save -->

    1312. 

  1312. 		<h3 id="Model-save">model.save([key, value], [options]) または model.save([attributes], [options])</h3>

    1313. 

  1313. 		<p>

    1314. 

  1314. 			バックエンドとHTTPリクエストのPOSTまたはPUTメソッドで通信して、リソースの新規作成または更新を要求します。モデルの<a href="#Model-id">idプロパティ</a>が設定されていない場合はPOSTメソッド、設定されている場合はPUTメソッドで通信します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。

    1315. 

  1315. 		</p>

    1316. 

  1316. 

    1317. 

  1317. 		<p>

    1318. 

  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. 

  1319. 		</p>

    1320. 

  1320. 		<p>

    1321. 

  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. 

  1322. 		</p>

    1323. 

  1323. 		<p>

    1324. 

  1324. 			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。

    1325. 

  1325. 		</p>

    1326. 

  1326. 		<h4>options</h4>

    1327. 

  1327. 		<p>

    1328. 

  1328. 			<code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。

    1329. 

  1329. 		</p>

    1330. 

  1330. 		<p>

    1331. 

  1331. 			このメソッドの引数に渡した属性値はモデルの属性値へ即座に反映されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから反映するようにタイミングを変えることができます。

    1332. 

  1332. 		</p>

    1333. 

  1333. 

    1334. 

  1334. 		<hr />

    1335. 

  1335. 

    1336. 

  1336. 		<!-- destroy -->

    1337. 

  1337. 		<h3 id="Model-destroy">model.destroy([options])</h3>

    1338. 

  1338. 		<p>

    1339. 

  1339. 			バックエンドとHTTPリクエストのDELETEメソッドで通信して、リソースの破棄を要求します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。

    1340. 

  1340. 		</p>

    1341. 

  1341. 		<p>

    1342. 

  1342. 			通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。

    1343. 

  1343. 		</p>

    1344. 

  1344. 		<p>

    1345. 

  1345. 			異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。<a href="#Events-eventList">destroyイベント</a>は発火しません。

    1346. 

  1346. 		</p>

    1347. 

  1347. 		<p>

    1348. 

  1348. 			このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。ただし、モデルに<a href="#Model-id">idプロパティ</a>が設定されていない場合は通信せず、このメソッドはfalseを返します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。

    1349. 

  1349. 		</p>

    1350. 

  1350. 		<h4>options</h4>

    1351. 

  1351. 		<p>

    1352. 

  1352. 			モデルはコレクションから即座に削除されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから削除するようにタイミングを変えることができます。

    1353. 

  1353. 		</p>

    1354. 

  1354. 

    1355. 

  1355. 		<hr />

    1356. 

  1356. 

    1357. 

  1357. 		<!-- validate -->

    1358. 

  1358. 		<h3 id="Model-validate">model.validate(attributes)</h3>

    1359. 

  1359. 		<p>

    1360. 

  1360. 			モデルの属性を操作する直前に呼ばれるメソッドで、値を検証する処理を記述します。

    1361. 

  1361. 		</p>

    1362. 

  1362. 		<p>

    1363. 

  1363. 			このメソッドは、検証に合格した場合には何も返却しないようにします。検証結果に問題がある場合、エラーメッセージの文字列や、エラー情報を格納したオブジェクトなど好みの値を返却します。この返却値は、発火する<a href="#Events-eventList">errorイベント</a>の引数に設定されます。

    1364. 

  1364. 		</p>

    1365. 

  1365. 		<pre>

    1366. 

  1366. var Model = Backbone.Model.extend({

    1367. 

  1367.     validate: function (attrs) {

    1368. 

  1368.         if (_.isEmpty(attrs.name)) {

    1369. 

  1369.             return "Invalid!";

    1370. 

  1370.         }

    1371. 

  1371.     }

    1372. 

  1372. });

    1373. 

  1373. 

    1374. 

  1374. var model = new Model();

    1375. 

  1375. 

    1376. 

  1376. model.on("error", function (model, error) {

    1377. 

  1377.     console.log(error);

    1378. 

  1378. });

    1379. 

  1379. 

    1380. 

  1380. model.set({name: ""});  //-> "Invalid!"

    1381. 

  1381. 		</pre>

    1382. 

  1382. 		<p>

    1383. 

  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. 

  1384. 		</p>

    1385. 

  1385. 		<pre>

    1386. 

  1386. var Model = Backbone.Model.extend({

    1387. 

  1387.     validate: function (attrs) {

    1388. 

  1388.         if (_.isEmpty(attrs.name)) {

    1389. 

  1389.             return "Invalid!";

    1390. 

  1390.         }

    1391. 

  1391.     }

    1392. 

  1392. });

    1393. 

  1393. 

    1394. 

  1394. var model = new Model();

    1395. 

  1395. 

    1396. 

  1396. model.set({name: ""} , {

    1397. 

  1397.     error: function (model, error) {

    1398. 

  1398.         console.log(error);

    1399. 

  1399. }});

    1400. 

  1400. //-> "Invalid!"

    1401. 

  1401. 		</pre>

    1402. 

  1402. 

    1403. 

  1403. 		<hr />

    1404. 

  1404. 

    1405. 

  1405. 		<!-- url -->

    1406. 

  1406. 		<h3 id="Model-url">model.url()</h3>

    1407. 

  1407. 		<p>

    1408. 

  1408. 			モデルのURLを取得します。

    1409. 

  1409. 		</p>

    1410. 

  1410. 		<p>

    1411. 

  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. 

  1412. 		</p>

    1413. 

  1413. 		<pre>

    1414. 

  1414. var Model = Backbone.Model.extend();

    1415. 

  1415. 

    1416. 

  1416. var Collection = Backbone.Collection.extend({

    1417. 

  1417.     url: "/users"

    1418. 

  1418. })

    1419. 

  1419. 

    1420. 

  1420. var model = new Model({id: 1});

    1421. 

  1421. var collection = new Collection(model);

    1422. 

  1422. 

    1423. 

  1423. console.log(model.url());   //-> "/users/1"

    1424. 

  1424. 

    1425. 

  1425. model.urlRoot = "/user";

    1426. 

  1426. console.log(model.url());   //-> "/user/1"

    1427. 

  1427. 		</pre>

    1428. 

  1428. 

    1429. 

  1429. 		<hr />

    1430. 

  1430. 

    1431. 

  1431. 		<!-- urlRoot -->

    1432. 

  1432. 		<h3 id="Model-urlRoot">model.urlRoot または model.urlRoot()</h3>

    1433. 

  1433. 		<p>

    1434. 

  1434. 			モデルの<a href="#Model-url">urlメソッド</a>の内部で使用されます。関数として定義することも可能です。

    1435. 

  1435. 		</p>

    1436. 

  1436. 		<pre>

    1437. 

  1437. var Model = Backbone.Model.extend({

    1438. 

  1438.     urlRoot: function () {

    1439. 

  1439.         return "/users";

    1440. 

  1440.     }

    1441. 

  1441. });

    1442. 

  1442. var model = new Model({id: 1});

    1443. 

  1443. 

    1444. 

  1444. console.log(model.url());   //-> "/users/1"

    1445. 

  1445. 		</pre>

    1446. 

  1446. 

    1447. 

  1447. 		<hr />

    1448. 

  1448. 

    1449. 

  1449. 		<!-- parse -->

    1450. 

  1450. 		<h3 id="Model-parse">model.parse(response, xhr)</h3>

    1451. 

  1451. 		<p>

    1452. 

  1452. 			<a href="#Model-fetch">fetchメソッド</a>や<a href="#Model-save">saveメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれます。サーバから取得したデータをそのまま属性に取り込むのではなく、加工してから取り込みたい場合に利用します。

    1453. 

  1453. 		</p>

    1454. 

  1454. 		<h4>response</h4>

    1455. 

  1455. 		<p>

    1456. 

  1456. 			サーバが返したデータです。

    1457. 

  1457. 		</p>

    1458. 

  1458. 		<pre>

    1459. 

  1459. var Model = Backbone.Model.extend({

    1460. 

  1460.     parse: function (response) {

    1461. 

  1461.         return response.user;

    1462. 

  1462.     }

    1463. 

  1463. });

    1464. 

  1464. 

    1465. 

  1465. var model = new Model();

    1466. 

  1466. model.fetch();  // サーバのレスポンスが {user: {name: "Tanaka"}} と仮定

    1467. 

  1467. 		</pre>

    1468. 

  1468. 		<p>

    1469. 

  1469. 			また、モデルのインスタンス生成時に、コンストラクタで <code>options.parse = true</code> を指定した場合にも実行されます。

    1470. 

  1470. 		</p>

    1471. 

  1471. 

    1472. 

  1472. 		<hr />

    1473. 

  1473. 

    1474. 

  1474. 		<!-- clone -->

    1475. 

  1475. 		<h3 id="Model-clone">model.clone()</h3>

    1476. 

  1476. 		<p>

    1477. 

  1477. 			属性が全て同じであるモデルを複製します。

    1478. 

  1478. 		</p>

    1479. 

  1479. 

    1480. 

  1480. 		<hr />

    1481. 

  1481. 

    1482. 

  1482. 		<!-- isNew -->

    1483. 

  1483. 		<h3 id="Model-isNew">model.isNew()</h3>

    1484. 

  1484. 		<p>

    1485. 

  1485. 			モデルの<a href="#Model-id">idプロパティ</a>が未設定（nullまたはundefined）かどうかを返します。

    1486. 

  1486. 		</p>

    1487. 

  1487. 

    1488. 

  1488. 		<hr />

    1489. 

  1489. 

    1490. 

  1490. 		<!-- change -->

    1491. 

  1491. 		<h3 id="Model-change">model.change()</h3>

    1492. 

  1492. 		<p>

    1493. 

  1493. 			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある属性に <a href="#Events-eventList">changeイベント</a>を発火します。

    1494. 

  1494. 		</p>

    1495. 

  1495. 		<pre>

    1496. 

  1496. var user = new Backbone.Model();

    1497. 

  1497. 

    1498. 

  1498. user.on("change:name", function (model, value) {

    1499. 

  1499.     console.log(value);     //-> "Tanaka"

    1500. 

  1500. })

    1501. 

  1501. 

    1502. 

  1502. user.on("change:country", function (model, value) {

    1503. 

  1503.     console.log(value);     //-> "Japan"

    1504. 

  1504. })

    1505. 

  1505. 

    1506. 

  1506. user.on("change", function (model) {

    1507. 

  1507.     console.log(model.toJSON());    //-> {name: "Tanaka", country: "Japan"}

    1508. 

  1508. })

    1509. 

  1509. 

    1510. 

  1510. user.set({name: "Tanaka", country: "Japan"}, {silent: true});

    1511. 

  1511. 

    1512. 

  1512. user.change();

    1513. 

  1513. 		</pre>

    1514. 

  1514. 

    1515. 

  1515. 		<hr />

    1516. 

  1516. 

    1517. 

  1517. 		<!-- hasChanged -->

    1518. 

  1518. 		<h3 id="Model-hasChanged">model.hasChanged([attribute])</h3>

    1519. 

  1519. 		<p>

    1520. 

  1520. 			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、指定した属性がその状態にあるかどうかを返します。

    1521. 

  1521. 		</p>

    1522. 

  1522. 		<pre>

    1523. 

  1523. var model = new Backbone.Model();

    1524. 

  1524. 

    1525. 

  1525. model.set({name: "Suzuki"}, {silent: true});

    1526. 

  1526. console.log(model.hasChanged("name"));    //-> true

    1527. 

  1527. 

    1528. 

  1528. model.set({name: "Tanaka"});

    1529. 

  1529. console.log(model.hasChanged("name"));    //-> false

    1530. 

  1530. 		</pre>

    1531. 

  1531. 		<p>

    1532. 

  1532. 			なお、発火しないまま残っている <a href="#Events-eventList">changeイベント</a>は、<a href="#Model-change">changeメソッド</a>でまとめて発火できます。

    1533. 

  1533. 		</P>

    1534. 

  1534. 		<h4>attribute</h4>

    1535. 

  1535. 		<p>

    1536. 

  1536. 			対象の属性を指定します。省略すると、該当する属性が１つでもあればtrueを返します。

    1537. 

  1537. 		</p>

    1538. 

  1538. 

    1539. 

  1539. 		<hr />

    1540. 

  1540. 

    1541. 

  1541. 		<!-- changedAttributes -->

    1542. 

  1542. 		<h3 id="Model-changedAttributes">model.changedAttributes([attributes])</h3>

    1543. 

  1543. 		<p>

    1544. 

  1544. 			モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある全ての属性を複製したオブジェクトを返します。該当する属性が無い場合はfalseを返します。

    1545. 

  1545. 		</p>

    1546. 

  1546. 		<h4>attributes</h4>

    1547. 

  1547. 		<p>

    1548. 

  1548. 			指定したattributesと、最後に <a href="#Events-eventList">changeイベント</a>が発火した時点での属性とを比較して、異なる属性を返します。該当する属性が無い場合はfalseを返します。

    1549. 

  1549. 		</p>

    1550. 

  1550. 		<pre>

    1551. 

  1551. var user = new Backbone.Model();

    1552. 

  1552. 

    1553. 

  1553. user.set({

    1554. 

  1554.     name: "Tanaka",

    1555. 

  1555.     address: "Japan"

    1556. 

  1556. });

    1557. 

  1557. 

    1558. 

  1558. user.set({name: "Suzuki"}, {silent:true});

    1559. 

  1559. 

    1560. 

  1560. console.log(user.changedAttributes({name: "Tanaka", address: "Japan"}));    //-> false

    1561. 

  1561. console.log(user.changedAttributes({name: "Tanaka", address: "China"}));    //-> {address: "china"}

    1562. 

  1562. console.log(user.changedAttributes({name: "Suzuki"}));                      //-> {name: "Suzuki"}

    1563. 

  1563. console.log(user.changedAttributes({name: "Yamada"}));                      //-> {name: "Yamada"}

    1564. 

  1564. 		</pre>

    1565. 

  1565. 

    1566. 

  1566. 		<hr />

    1567. 

  1567. 

    1568. 

  1568. 		<!-- previous -->

    1569. 

  1569. 		<h3 id="Model-previous">model.previous(attribute)</h3>

    1570. 

  1570. 		<p>

    1571. 

  1571. 			変更前の属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。

    1572. 

  1572. 		</p>

    1573. 

  1573. 		<pre>

    1574. 

  1574. var user = new Backbone.Model({name: "Tanaka"});

    1575. 

  1575. 

    1576. 

  1576. user.on("change", function (model) {

    1577. 

  1577.     console.log(model.previous("name"));    //-> "Tanaka"

    1578. 

  1578.     console.log(model.get("name"));         //-> "Suzuki"

    1579. 

  1579. })

    1580. 

  1580. 

    1581. 

  1581. user.set({name: "Suzuki"});

    1582. 

  1582. 		</pre>

    1583. 

  1583. 

    1584. 

  1584. 		<hr />

    1585. 

  1585. 

    1586. 

  1586. 		<!-- previousAttributes -->

    1587. 

  1587. 		<h3 id="Model-previousAttributes">model.previousAttributes()</h3>

    1588. 

  1588. 		<p>

    1589. 

  1589. 			変更前の全ての属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。

    1590. 

  1590. 		</p>

    1591. 

  1591. 		<pre>

    1592. 

  1592. var user = new Backbone.Model({name: "Tanaka", country: "Japan"});

    1593. 

  1593. 

    1594. 

  1594. user.on("change", function (model) {

    1595. 

  1595.     console.log(model.previousAttributes());    //-> {name: "Tanaka", country: "Japan"}

    1596. 

  1596.     console.log(model.toJSON());                //-> {name: "Suzuki", country: "China"}

    1597. 

  1597. })

    1598. 

  1598. 

    1599. 

  1599. user.set({name: "Suzuki", country: "China"});

    1600. 

  1600. 		</pre>

    1601. 

  1601. 

    1602. 

  1602. 

    1603. 

  1603. 		<hr />

    1604. 

  1604. 

    1605. 

  1605. 		<h2>Backbone.Collection</h2>

    1606. 

  1606. 		<hr />

    1607. 

  1607. 

    1608. 

  1608. 		<!-- extend -->

    1609. 

  1609. 		<h3 id="Collection-extend">Backbone.Collection.extend([properties], [classProperties])</h3>

    1610. 

  1610. 		<p>

    1611. 

  1611. 			<code>Backbone.Collection</code>　を継承した新しいコレクションを作ります。

    1612. 

  1612. 		</p>

    1613. 

  1613. 		<h4>properties</h4>

    1614. 

  1614. 		<p>

    1615. 

  1615. 			インスタンスメンバを定義します。

    1616. 

  1616. 		</p>

    1617. 

  1617. 		<h4>classProperties</h4>

    1618. 

  1618. 		<p>

    1619. 

  1619. 			静的メンバを定義します。

    1620. 

  1620. 		</p>

    1621. 

  1621. 

    1622. 

  1622. 		<hr />

    1623. 

  1623. 

    1624. 

  1624. 		<!-- constractor -->

    1625. 

  1625. 		<h3 id="Collection-constractor">new Collection([models], [options])</h3>

    1626. 

  1626. 		<p>

    1627. 

  1627. 			コンストラクタです。

    1628. 

  1628. 		</p>

    1629. 

  1629. 		<h4>models</h4>

    1630. 

  1630. 		<p>

    1631. 

  1631. 			コレクションに格納するモデルを指定します。複数のモデルは配列で指定します。

    1632. 

  1632. 		</p>

    1633. 

  1633. 		<pre>

    1634. 

  1634. var User = Backbone.Model.extend();

    1635. 

  1635. var user1 = new User({name: "Tanaka"});

    1636. 

  1636. var user2 = new User({name: "Suzuki"});

    1637. 

  1637. 

    1638. 

  1638. var us…
    1639.

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