PageRenderTime 68ms CodeModel.GetById 23ms RepoModel.GetById 0ms 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. <h1>Backbone.js 日本語リファレンス</h1>
  17. <div class="alert alert-info">
  18. このドキュメントは<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とは異なる部分があります
  19. </div>
  20. <ul class="no-print">
  21. <li>Events</li>
  22. <ul>
  23. <li><a href="#Events-on">on</a></li>
  24. <li><a href="#Events-off">off</a></li>
  25. <li><a href="#Events-trigger">trigger</a></li>
  26. <li><a href="#Events-once">once</a></li>
  27. <li><a href="#Events-listenTo">listenTo</a></li>
  28. <li><a href="#Events-stopListening">stopListening</a></li>
  29. </ul>
  30. <li>Model</li>
  31. <ul>
  32. <li><a href="#Model-extend">extend</a></li>
  33. <li><a href="#Model-constractor">constractor</a></li>
  34. <li><a href="#Model-initialize">initialize</a></li>
  35. <li><a href="#Model-get">get</a></li>
  36. <li><a href="#Model-set">set</a></li>
  37. <li><a href="#Model-escape">escape</a></li>
  38. <li><a href="#Model-has">has</a></li>
  39. <li><a href="#Model-unset">unset</a></li>
  40. <li><a href="#Model-clear">clear</a></li>
  41. <li><a href="#Model-id">id</a></li>
  42. <li><a href="#Model-idAttribute">idAttribute</a></li>
  43. <li><a href="#Model-cid">cid</a></li>
  44. <li><a href="#Model-attributes">attributes</a></li>
  45. <li><a href="#Model-defaults">defaults</a></li>
  46. <li><a href="#Model-toJSON">toJSON</a></li>
  47. <li><a href="#Model-fetch">fetch</a></li>
  48. <li><a href="#Model-save">save</a></li>
  49. <li><a href="#Model-destroy">destroy</a></li>
  50. <li><a href="#Model-validate">validate</a></li>
  51. <li><a href="#Model-url">url</a></li>
  52. <li><a href="#Model-urlRoot">urlRoot</a></li>
  53. <li><a href="#Model-parse">parse</a></li>
  54. <li><a href="#Model-clone">clone</a></li>
  55. <li><a href="#Model-isNew">isNew</a></li>
  56. <li><a href="#Model-change">change</a></li>
  57. <li><a href="#Model-hasChanged">hasChanged</a></li>
  58. <li><a href="#Model-changedAttributes">changedAttributes</a></li>
  59. <li><a href="#Model-previous">previous</a></li>
  60. <li><a href="#Model-previousAttributes">previousAttributes</a></li>
  61. </ul>
  62. <li>Collection</li>
  63. <ul>
  64. <li><a href="#Collection-extend">extend</a></li>
  65. <li><a href="#Collection-constractor">constractor</a></li>
  66. <li><a href="#Collection-initialize">initialize</a></li>
  67. <li><a href="#Collection-model">model</a></li>
  68. <li><a href="#Collection-models">models</a></li>
  69. <li><a href="#Collection-toJSON">toJSON</a></li>
  70. <li><a href="#Collection-sync">sync</a></li>
  71. <li><a href="#Collection-UnderscoreMethods">Underscore Methods</a></li>
  72. <li><a href="#Collection-add">add</a></li>
  73. <li><a href="#Collection-remove">remove</a></li>
  74. <li><a href="#Collection-reset">reset</a></li>
  75. <li><a href="#Collection-update">update</a></li>
  76. <li><a href="#Collection-get">get</a></li>
  77. <li><a href="#Collection-at">at</a></li>
  78. <li><a href="#Collection-push">push</a></li>
  79. <li><a href="#Collection-pop">pop</a></li>
  80. <li><a href="#Collection-unshift">unshift</a></li>
  81. <li><a href="#Collection-shift">shift</a></li>
  82. <li><a href="#Collection-slice">slice</a></li>
  83. <li><a href="#Collection-length">length</a></li>
  84. <li><a href="#Collection-comparator">comparator</a></li>
  85. <li><a href="#Collection-sort">sort</a></li>
  86. <li><a href="#Collection-pluck">pluck</a></li>
  87. <li><a href="#Collection-where">where</a></li>
  88. <li><a href="#Collection-url">url</a></li>
  89. <li><a href="#Collection-parse">parse</a></li>
  90. <li><a href="#Collection-clone">clone</a></li>
  91. <li><a href="#Collection-fetch">fetch</a></li>
  92. <li><a href="#Collection-create">create</a></li>
  93. </ul>
  94. <li>Router</li>
  95. <ul>
  96. <li><a href="#Router-extend">extend</a></li>
  97. <li><a href="#Router-constractor">constractor</a></li>
  98. <li><a href="#Router-initialize">initialize</a></li>
  99. <li><a href="#Router-routes">routes</a></li>
  100. <li><a href="#Router-route">route</a></li>
  101. <li><a href="#Router-navigate">navigate</a></li>
  102. </ul>
  103. <li>Sync</li>
  104. <ul>
  105. <li><a href="#Sync">Backbone.sync</a></li>
  106. <li><a href="#Sync-ajax">Backbone.ajax</a></li>
  107. <li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
  108. <li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
  109. </ul>
  110. <li>View</li>
  111. <ul>
  112. <li><a href="#View-extend">extend</a></li>
  113. <li><a href="#View-constractor">constractor</a></li>
  114. <li><a href="#View-initialize">initialize</a></li>
  115. <li><a href="#View-options">options</a></li>
  116. <li><a href="#View-el">el</a></li>
  117. <li><a href="#View-$el">$el</a></li>
  118. <li><a href="#View-setElement">setElement</a></li>
  119. <li><a href="#View-model">model</a></li>
  120. <li><a href="#View-collection">collection</a></li>
  121. <li><a href="#View-id">id</a></li>
  122. <li><a href="#View-attributes">attributes</a></li>
  123. <li><a href="#View-className">className</a></li>
  124. <li><a href="#View-tagName">tagName</a></li>
  125. <li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>
  126. <li><a href="#View-render">render</a></li>
  127. <li><a href="#View-remove">remove</a></li>
  128. <li><a href="#View-make">make</a></li>
  129. <li><a href="#View-events">events</a></li>
  130. <li><a href="#View-delegateEvents">delegateEvents</a></li>
  131. <li><a href="#View-undelegateEvents">undelegateEvents</a></li>
  132. <li><a href="#View-cid">cid</a></li>
  133. </ul>
  134. </ul>
  135. <hr />
  136. <h2>Backbone.Events</h2>
  137. <hr />
  138. <!-- on -->
  139. <h3 id="Events-on">object.on(events, callback, [context])</h3>
  140. <p>
  141. オブジェクトに対してイベントが発火した時に呼び出したいコールバック関数を設定します
  142. </p>
  143. <h4>events</h4>
  144. <p>
  145. イベント名です半角スペースで区切って複数のイベント名を指定することもできます<code>all</code> を指定するとどのイベントが発火した場合にもコールバック関数が呼ばれます
  146. </p>
  147. <p>
  148. イベント名とコールバック関数のペアをオブジェクトリテラルで設定することもできますこの場合第2引数はcontextになります
  149. </p>
  150. <pre>
  151. var func1 = function () {
  152. console.log(this.msg1);
  153. };
  154. var func2 = function (model) {
  155. console.log(this.msg2);
  156. };
  157. var msg = {
  158. msg1: "Changed!",
  159. msg2: "Destroyed!"
  160. };
  161. var model = new Backbone.Model();
  162. model.on({change: func1, destroy: func2}, msg);
  163. model.set({name: "Tanaka"}); //-> Changed!
  164. model.destroy(); //-> Destroyed!
  165. </pre>
  166. <h4>callback</h4>
  167. <p>
  168. イベントが発火すると呼ばれるコールバック関数ですコールバック関数に渡される引数はイベントを発火させる<a href="#Events-trigger">triggerメソッド</a>が決定します
  169. </p>
  170. <p>
  171. Backbone.jsが発火するイベントとコールバック関数の引数の対応は以下の通りです
  172. </p>
  173. <p id="Events-eventList">
  174. <table class="table table-condensed table-bordered">
  175. <thead>
  176. <tr>
  177. <th>
  178. イベント
  179. </th>
  180. <th>
  181. 引数
  182. </th>
  183. </tr>
  184. </thead>
  185. <tbody>
  186. <tr>
  187. <td>
  188. add
  189. </td>
  190. <td>
  191. model, collection, options
  192. </td>
  193. </tr>
  194. <tr>
  195. <td>
  196. remove
  197. </td>
  198. <td>
  199. model, collection, options
  200. </td>
  201. </tr>
  202. <tr>
  203. <td>
  204. reset
  205. </td>
  206. <td>
  207. collection, options
  208. </td>
  209. </tr>
  210. <tr>
  211. <td>
  212. sort
  213. </td>
  214. <td>
  215. collection, options
  216. </td>
  217. </tr>
  218. <tr>
  219. <td>
  220. change
  221. </td>
  222. <td>
  223. model, options
  224. </td>
  225. </tr>
  226. <tr>
  227. <td>
  228. change:[attribute]
  229. </td>
  230. <td>
  231. model, value, options
  232. </td>
  233. </tr>
  234. <tr>
  235. <td>
  236. destroy
  237. </td>
  238. <td>
  239. model, collection, options
  240. </td>
  241. </tr>
  242. <tr>
  243. <td>
  244. request
  245. </td>
  246. <td>
  247. model, xhr, options
  248. </td>
  249. </tr>
  250. <tr>
  251. <td>
  252. sync
  253. </td>
  254. <td>
  255. model, resp, options
  256. </td>
  257. </tr>
  258. <tr>
  259. <td>
  260. error
  261. </td>
  262. <td>
  263. model, xhr, options または model, error, options
  264. </td>
  265. </tr>
  266. <tr>
  267. <td>
  268. route:[name]
  269. </td>
  270. <td>
  271. *argsURLと関連付けたコールバック関数に渡される引数
  272. </td>
  273. </tr>
  274. <tr>
  275. <td>
  276. all
  277. </td>
  278. <td>
  279. eventName, *argsイベントと関連付けたコールバック関数に渡される引数
  280. </td>
  281. </tr>
  282. </tbody>
  283. </table>
  284. </p>
  285. <h4>context</h4>
  286. <p>
  287. コールバック関数の中の<code>this</code>キーワードを束縛します
  288. </p>
  289. <hr />
  290. <!-- off -->
  291. <h3 id="Events-off">object.off([events], [callback], [context])</h3>
  292. <p>
  293. 設定されているイベントを削除します全ての引数を省略するとオブジェクトに設定されているイベントを全て削除します
  294. </p>
  295. <h4>events</h4>
  296. <p>
  297. 削除するイベント名です半角スペースで区切って複数のイベント名を指定することもできます省略する場合はnullを渡します
  298. </p>
  299. <h4>callback</h4>
  300. <p>
  301. 削除するイベントをコールバック関数で指定します省略する場合はnullを渡します
  302. </p>
  303. <h4>context</h4>
  304. <p>
  305. 削除するイベントを<code>this</code> に束縛しているオブジェクトで指定します省略する場合はnullを渡します
  306. </p>
  307. <hr />
  308. <!-- trigger -->
  309. <h3 id="Events-trigger">object.trigger(events, [*args])</h3>
  310. <p>
  311. イベントを発火しますまた<a href="#Events-on">onメソッド</a>で設定したコールバック関数へ渡す引数を指定します
  312. </p>
  313. <h4>events</h4>
  314. <p>
  315. 発火させるイベント名です複数のイベントを空白で区切って指定できます
  316. </p>
  317. <h4>args</h4>
  318. <p>
  319. イベントと関連付けされているコールバック関数の引数に渡されます
  320. </p>
  321. <pre>
  322. var user = {name: "Tanaka"};
  323. _.extend(user, Backbone.Events);
  324. user.on("Say", function (obj, msg) {
  325. console.log(obj.name + " said " + msg);
  326. });
  327. user.trigger("Say", user, "Hello."); //-> Tanaka said Hello.
  328. </pre>
  329. <p>
  330. なおBackbone.jsのコレクションは所有するモデルの全てのイベントを監視しておりモデルがイベントを発火すると同じイベントを発火します
  331. </p>
  332. <pre>
  333. var User = Backbone.Model.extend({
  334. validate: function (attr) {
  335. if (_.isEmpty(attr.name)) {
  336. return "invalid!";
  337. }
  338. }
  339. });
  340. var user = new User();
  341. var users = new Backbone.Collection();
  342. users.add(user);
  343. users.on("all", function (eventName) {
  344. console.log(eventName);
  345. });
  346. user.set({name:"tanaka"});
  347. //-> change:name
  348. //-> change
  349. user.set({name:""});
  350. //-> error
  351. </pre>
  352. <p>
  353. Backbone.jsのメソッドと発火されるイベントの対応は以下の通りです
  354. </p>
  355. <p>
  356. <table class="table table-bordered table-condensed">
  357. <thead>
  358. <tr>
  359. <th>
  360. メソッド イベント
  361. </th>
  362. <td style="width:60px">
  363. add
  364. </td>
  365. <td style="width:60px">
  366. remove
  367. </td>
  368. <td style="width:60px">
  369. reset
  370. </td>
  371. <td style="width:60px">
  372. sort
  373. </td>
  374. <td style="width:60px">
  375. change
  376. </td>
  377. <td style="width:60px">
  378. destroy
  379. </td>
  380. <td style="width:60px">
  381. request
  382. </td>
  383. <td style="width:60px">
  384. sync
  385. </td>
  386. <td style="width:60px">
  387. error
  388. </td>
  389. <td style="width:60px">
  390. route
  391. </td>
  392. </tr>
  393. </thead>
  394. <tbody>
  395. <tr>
  396. <td>
  397. model.set
  398. </td>
  399. <td> <!-- add -->
  400. </td>
  401. <td> <!-- remove -->
  402. </td>
  403. <td> <!-- reset -->
  404. </td>
  405. <td> <!-- sort -->
  406. </td>
  407. <td> <!-- change -->
  408. <div class="icon icon-ok">
  409. </td>
  410. <td> <!-- destroy -->
  411. </td>
  412. <td> <!-- request -->
  413. </td>
  414. <td> <!-- sync -->
  415. </td>
  416. <td> <!-- error -->
  417. <div class="icon icon-ok">
  418. </td>
  419. <td> <!-- route -->
  420. </td>
  421. </tr>
  422. <tr>
  423. <td>
  424. model.unset
  425. </td>
  426. <td> <!-- add -->
  427. </td>
  428. <td> <!-- remove -->
  429. </td>
  430. <td> <!-- reset -->
  431. </td>
  432. <td> <!-- sort -->
  433. </td>
  434. <td> <!-- change -->
  435. <div class="icon icon-ok">
  436. </td>
  437. <td> <!-- destroy -->
  438. </td>
  439. <td> <!-- request -->
  440. </td>
  441. <td> <!-- sync -->
  442. </td>
  443. <td> <!-- error -->
  444. <div class="icon icon-ok">
  445. </td>
  446. <td> <!-- route -->
  447. </td>
  448. </tr>
  449. <tr>
  450. <td>
  451. model.clear
  452. </td>
  453. <td> <!-- add -->
  454. </td>
  455. <td> <!-- remove -->
  456. </td>
  457. <td> <!-- reset -->
  458. </td>
  459. <td> <!-- sort -->
  460. </td>
  461. <td> <!-- change -->
  462. <div class="icon icon-ok">
  463. </td>
  464. <td> <!-- destroy -->
  465. </td>
  466. <td> <!-- request -->
  467. </td>
  468. <td> <!-- sync -->
  469. </td>
  470. <td> <!-- error -->
  471. <div class="icon icon-ok">
  472. </td>
  473. <td> <!-- route -->
  474. </td>
  475. </tr>
  476. <tr>
  477. <td>
  478. model.fetch
  479. </td>
  480. <td> <!-- add -->
  481. </td>
  482. <td> <!-- remove -->
  483. </td>
  484. <td> <!-- reset -->
  485. </td>
  486. <td> <!-- sort -->
  487. </td>
  488. <td> <!-- change -->
  489. <div class="icon icon-ok">
  490. </td>
  491. <td> <!-- destroy -->
  492. </td>
  493. <td> <!-- request -->
  494. <div class="icon icon-ok">
  495. </td>
  496. <td> <!-- sync -->
  497. <div class="icon icon-ok">
  498. </td>
  499. <td> <!-- error -->
  500. <div class="icon icon-ok">
  501. </td>
  502. <td> <!-- route -->
  503. </td>
  504. </tr>
  505. <tr>
  506. <td>
  507. model.save
  508. </td>
  509. <td> <!-- add -->
  510. </td>
  511. <td> <!-- remove -->
  512. </td>
  513. <td> <!-- reset -->
  514. </td>
  515. <td> <!-- sort -->
  516. </td>
  517. <td> <!-- change -->
  518. <div class="icon icon-ok">
  519. </td>
  520. <td> <!-- destroy -->
  521. </td>
  522. <td> <!-- request -->
  523. <div class="icon icon-ok">
  524. </td>
  525. <td> <!-- sync -->
  526. <div class="icon icon-ok">
  527. </td>
  528. <td> <!-- error -->
  529. <div class="icon icon-ok">
  530. </td>
  531. <td> <!-- route -->
  532. </td>
  533. </tr>
  534. <tr>
  535. <td>
  536. model.destroy
  537. </td>
  538. <td> <!-- add -->
  539. </td>
  540. <td> <!-- remove -->
  541. </td>
  542. <td> <!-- reset -->
  543. </td>
  544. <td> <!-- sort -->
  545. </td>
  546. <td> <!-- change -->
  547. </td>
  548. <td> <!-- destroy -->
  549. <div class="icon icon-ok">
  550. </td>
  551. <td> <!-- request -->
  552. <div class="icon icon-ok">
  553. </td>
  554. <td> <!-- sync -->
  555. <div class="icon icon-ok">
  556. </td>
  557. <td> <!-- error -->
  558. <div class="icon icon-ok">
  559. </td>
  560. <td> <!-- route -->
  561. </td>
  562. </tr>
  563. <tr>
  564. <td>
  565. model.validate
  566. </td>
  567. <td> <!-- add -->
  568. </td>
  569. <td> <!-- remove -->
  570. </td>
  571. <td> <!-- reset -->
  572. </td>
  573. <td> <!-- sort -->
  574. </td>
  575. <td> <!-- change -->
  576. </td>
  577. <td> <!-- destroy -->
  578. </td>
  579. <td> <!-- request -->
  580. </td>
  581. <td> <!-- sync -->
  582. </td>
  583. <td> <!-- error -->
  584. <div class="icon icon-ok">
  585. </td>
  586. <td> <!-- route -->
  587. </td>
  588. </tr>
  589. <tr>
  590. <td>
  591. model.change
  592. </td>
  593. <td> <!-- add -->
  594. </td>
  595. <td> <!-- remove -->
  596. </td>
  597. <td> <!-- reset -->
  598. </td>
  599. <td> <!-- sort -->
  600. </td>
  601. <td> <!-- change -->
  602. <div class="icon icon-ok">
  603. </td>
  604. <td> <!-- destroy -->
  605. </td>
  606. <td> <!-- request -->
  607. </td>
  608. <td> <!-- sync -->
  609. </td>
  610. <td> <!-- error -->
  611. </td>
  612. <td> <!-- route -->
  613. </td>
  614. </tr>
  615. <tr>
  616. <td>
  617. collection.add
  618. </td>
  619. <td> <!-- add -->
  620. <div class="icon icon-ok">
  621. </td>
  622. <td> <!-- remove -->
  623. </td>
  624. <td> <!-- reset -->
  625. </td>
  626. <td> <!-- sort -->
  627. </td>
  628. <td> <!-- change -->
  629. </td>
  630. <td> <!-- destroy -->
  631. </td>
  632. <td> <!-- request -->
  633. </td>
  634. <td> <!-- sync -->
  635. </td>
  636. <td> <!-- error -->
  637. </td>
  638. <td> <!-- route -->
  639. </td>
  640. </tr>
  641. <tr>
  642. <td>
  643. collection.push
  644. </td>
  645. <td> <!-- add -->
  646. <div class="icon icon-ok">
  647. </td>
  648. <td> <!-- remove -->
  649. </td>
  650. <td> <!-- reset -->
  651. </td>
  652. <td> <!-- sort -->
  653. </td>
  654. <td> <!-- change -->
  655. </td>
  656. <td> <!-- destroy -->
  657. </td>
  658. <td> <!-- request -->
  659. </td>
  660. <td> <!-- sync -->
  661. </td>
  662. <td> <!-- error -->
  663. </td>
  664. <td> <!-- route -->
  665. </td>
  666. </tr>
  667. <tr>
  668. <td>
  669. collection.unshift
  670. </td>
  671. <td> <!-- add -->
  672. <div class="icon icon-ok">
  673. </td>
  674. <td> <!-- remove -->
  675. </td>
  676. <td> <!-- reset -->
  677. </td>
  678. <td> <!-- sort -->
  679. </td>
  680. <td> <!-- change -->
  681. </td>
  682. <td> <!-- destroy -->
  683. </td>
  684. <td> <!-- request -->
  685. </td>
  686. <td> <!-- sync -->
  687. </td>
  688. <td> <!-- error -->
  689. </td>
  690. <td> <!-- route -->
  691. </td>
  692. </tr>
  693. <tr>
  694. <td>
  695. collection.remove
  696. </td>
  697. <td> <!-- add -->
  698. </td>
  699. <td> <!-- remove -->
  700. <div class="icon icon-ok">
  701. </td>
  702. <td> <!-- reset -->
  703. </td>
  704. <td> <!-- sort -->
  705. </td>
  706. <td> <!-- change -->
  707. </td>
  708. <td> <!-- destroy -->
  709. </td>
  710. <td> <!-- request -->
  711. </td>
  712. <td> <!-- sync -->
  713. </td>
  714. <td> <!-- error -->
  715. </td>
  716. <td> <!-- route -->
  717. </td>
  718. </tr>
  719. <tr>
  720. <td>
  721. collection.pop
  722. </td>
  723. <td> <!-- add -->
  724. </td>
  725. <td> <!-- remove -->
  726. <div class="icon icon-ok">
  727. </td>
  728. <td> <!-- reset -->
  729. </td>
  730. <td> <!-- sort -->
  731. </td>
  732. <td> <!-- change -->
  733. </td>
  734. <td> <!-- destroy -->
  735. </td>
  736. <td> <!-- request -->
  737. </td>
  738. <td> <!-- sync -->
  739. </td>
  740. <td> <!-- error -->
  741. </td>
  742. <td> <!-- route -->
  743. </td>
  744. </tr>
  745. <tr>
  746. <td>
  747. collection.shift
  748. </td>
  749. <td> <!-- add -->
  750. </td>
  751. <td> <!-- remove -->
  752. <div class="icon icon-ok">
  753. </td>
  754. <td> <!-- reset -->
  755. </td>
  756. <td> <!-- sort -->
  757. </td>
  758. <td> <!-- change -->
  759. </td>
  760. <td> <!-- destroy -->
  761. </td>
  762. <td> <!-- request -->
  763. </td>
  764. <td> <!-- sync -->
  765. </td>
  766. <td> <!-- error -->
  767. </td>
  768. <td> <!-- route -->
  769. </td>
  770. </tr>
  771. <tr>
  772. <td>
  773. collection.sort
  774. </td>
  775. <td> <!-- add -->
  776. </td>
  777. <td> <!-- remove -->
  778. </td>
  779. <td> <!-- reset -->
  780. </td>
  781. <td> <!-- sort -->
  782. <div class="icon icon-ok">
  783. </td>
  784. <td> <!-- change -->
  785. </td>
  786. <td> <!-- destroy -->
  787. </td>
  788. <td> <!-- request -->
  789. </td>
  790. <td> <!-- sync -->
  791. </td>
  792. <td> <!-- error -->
  793. </td>
  794. <td> <!-- route -->
  795. </td>
  796. </tr>
  797. <tr>
  798. <td>
  799. collection.reset
  800. </td>
  801. <td> <!-- add -->
  802. </td>
  803. <td> <!-- remove -->
  804. </td>
  805. <td> <!-- reset -->
  806. <div class="icon icon-ok">
  807. </td>
  808. <td> <!-- sort -->
  809. </td>
  810. <td> <!-- change -->
  811. </td>
  812. <td> <!-- destroy -->
  813. </td>
  814. <td> <!-- request -->
  815. </td>
  816. <td> <!-- sync -->
  817. </td>
  818. <td> <!-- error -->
  819. </td>
  820. <td> <!-- route -->
  821. </td>
  822. </tr>
  823. <tr>
  824. <td>
  825. collection.fetch
  826. </td>
  827. <td> <!-- add -->
  828. <div class="icon icon-ok">
  829. </td>
  830. <td> <!-- remove -->
  831. </td>
  832. <td> <!-- reset -->
  833. <div class="icon icon-ok">
  834. </td>
  835. <td> <!-- sort -->
  836. </td>
  837. <td> <!-- change -->
  838. </td>
  839. <td> <!-- destroy -->
  840. </td>
  841. <td> <!-- request -->
  842. <div class="icon icon-ok">
  843. </td>
  844. <td> <!-- sync -->
  845. <div class="icon icon-ok">
  846. </td>
  847. <td> <!-- error -->
  848. <div class="icon icon-ok">
  849. </td>
  850. <td> <!-- route -->
  851. </td>
  852. </tr>
  853. <tr>
  854. <td>
  855. collection.create
  856. </td>
  857. <td> <!-- add -->
  858. <div class="icon icon-ok">
  859. </td>
  860. <td> <!-- remove -->
  861. </td>
  862. <td> <!-- reset -->
  863. </td>
  864. <td> <!-- sort -->
  865. </td>
  866. <td> <!-- change -->
  867. </td>
  868. <td> <!-- destroy -->
  869. </td>
  870. <td> <!-- request -->
  871. <div class="icon icon-ok">
  872. </td>
  873. <td> <!-- sync -->
  874. <div class="icon icon-ok">
  875. </td>
  876. <td> <!-- error -->
  877. <div class="icon icon-ok">
  878. </td>
  879. <td> <!-- route -->
  880. </td>
  881. </tr>
  882. <tr>
  883. <td>
  884. router.navigate
  885. </td>
  886. <td> <!-- add -->
  887. </td>
  888. <td> <!-- remove -->
  889. </td>
  890. <td> <!-- reset -->
  891. </td>
  892. <td> <!-- sort -->
  893. </td>
  894. <td> <!-- change -->
  895. </td>
  896. <td> <!-- destroy -->
  897. </td>
  898. <td> <!-- request -->
  899. </td>
  900. <td> <!-- sync -->
  901. </td>
  902. <td> <!-- error -->
  903. </td>
  904. <td> <!-- route -->
  905. <div class="icon icon-ok">
  906. </td>
  907. </tr>
  908. </tbody>
  909. </table>
  910. </p>
  911. <hr />
  912. <!-- once -->
  913. <h3 id="Events-on">object.once(events, callback, [context])</h3>
  914. <p>
  915. </p>
  916. <hr />
  917. <!-- listenTo -->
  918. <h3 id="Events-listenTo">object.listenTo(other, event, callback)</h3>
  919. <p>
  920. </p>
  921. <hr />
  922. <!-- stopListening -->
  923. <h3 id="Events-stopListening">object.stopListening([other], [event], [callback])</h3>
  924. <p>
  925. </p>
  926. <hr />
  927. <h2>Backbone.Model</h2>
  928. <hr />
  929. <!-- extend -->
  930. <h3 id="Model-extend">Backbone.Model.extend([properties], [classProperties])</h3>
  931. <p>
  932. <code>Backbone.Model</code> を継承した新しいモデルを作ります
  933. </p>
  934. <h4>properties</h4>
  935. <p>
  936. インスタンスメンバを定義します
  937. </p>
  938. <pre>
  939. var User = Backbone.Model.extend({
  940. say: function () {
  941. console.log("Hello.");
  942. }
  943. });
  944. var user = new User();
  945. user.say(); //-> Hello.
  946. </pre>
  947. <h4>classProperties</h4>
  948. <p>
  949. 静的メンバを定義します以下はFactoryパターンの例です
  950. </p>
  951. <pre>
  952. var User = Backbone.Model.extend({
  953. openFile: function () {
  954. console.log(this.canOpen);
  955. }
  956. }, {
  957. create: function (type) {
  958. if (type === "admin") {
  959. return new AdminUser;
  960. } else {
  961. return new NormalUser;
  962. }
  963. }
  964. });
  965. var AdminUser = User.extend({
  966. canOpen: true
  967. });
  968. var NormalUser = User.extend({
  969. canOpen: false
  970. });
  971. var user1 = User.create("admin");
  972. var user2 = User.create("normal");
  973. user1.openFile(); //-> true
  974. user2.openFile(); //-> false
  975. </pre>
  976. <hr />
  977. <!-- constractor -->
  978. <h3 id="Model-constractor">new Model([attributes], [options])</h3>
  979. <p>
  980. コンストラクタです
  981. </p>
  982. <h4>attributes</h4>
  983. <p>モデルの属性へ設定したい値をオブジェクトリテラルで指定します</p>
  984. <pre>
  985. var Model = Backbone.Model.extend();
  986. var model = new Model({name: "Tanaka", country: "Japan"});
  987. </pre>
  988. <h4>options</h4>
  989. <p>
  990. <code>options.parse = true</code> を設定すると<a href="#Model-parse">parseメソッド</a>を実行します
  991. </p>
  992. <pre>
  993. var User = Backbone.Model.extend({
  994. parse: function (response) {
  995. return response.user;
  996. }
  997. });
  998. var user = new User({user: {name: "Tanaka"}}, {parse: true});
  999. console.log(user.toJSON()); //-> {name: "Tanaka"}
  1000. </pre>
  1001. <p>
  1002. <code>options.collection</code> にコレクションを設定すると<a href="#Model-url">urlメソッド</a>でモデルのURLをすぐに取得できるようになりますただしこの時点ではモデルからコレクションへの一方的な参照がなされているだけでコレクションにモデルが格納されたのではありません
  1003. </p>
  1004. <pre>
  1005. var users = new Backbone.Collection();
  1006. users.url = "/hoge";
  1007. var User = Backbone.Model.extend();
  1008. var user = new User({id: 1, name: "Tanaka"}, {collection: users});
  1009. console.log(user.url()); //-> /hoge/1
  1010. console.log(users.length); //-> 0
  1011. </pre>
  1012. <p>
  1013. その他に<a href="#Model-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます
  1014. </p>
  1015. <hr />
  1016. <!-- initialize -->
  1017. <h3 id="Model-initialize">model.initialize([attributes], [options])</h3>
  1018. <p>
  1019. インスタンス生成時に呼ばれます
  1020. </p>
  1021. <h4>attributes</h4>
  1022. <p><a href="#Model-constractor">コンストラクタ</a>のattributesへ渡した値です</p>
  1023. <h4>options</h4>
  1024. <p><a href="#Model-constractor">コンストラクタ</a>のoptionsへ渡した値です</p>
  1025. <hr />
  1026. <!-- get -->
  1027. <h3 id="Model-get">model.get(attribute)</h3>
  1028. <p>
  1029. モデルの属性値を取得します
  1030. </p>
  1031. <hr />
  1032. <!-- set -->
  1033. <h3 id="Model-set">model.set(key, value, [options]) または set(attributes, [options])</h3>
  1034. <p>
  1035. モデルの属性値を設定します属性値が現在の属性値と異なる場合<a href="#Events-eventList">changeイベント</a>を発火しますまた<a href="#Model-validate">validateメソッド</a>を実行します
  1036. </p>
  1037. <h4>key, value</h4>
  1038. <p>
  1039. keyとvalueのペアで指定します
  1040. </p>
  1041. <pre>
  1042. model.set("name", "Tanaka");
  1043. model.set("country", "Japan");
  1044. </pre>
  1045. <h4>attributes</h4>
  1046. <p>
  1047. オブジェクトリテラルで指定することもできます
  1048. </p>
  1049. <pre>
  1050. model.set({name: "Tanaka", country: "Japan"});
  1051. </pre>
  1052. <h4>options</h4>
  1053. <p>
  1054. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">changeイベント</a>を発火しません
  1055. </p>
  1056. <pre>
  1057. var Model = Backbone.Model.extend({
  1058. validate: function (attrs) {
  1059. if (_.isEmpty(attrs.name)) {
  1060. return "invalid!";
  1061. }
  1062. }
  1063. });
  1064. var model = new Model();
  1065. model.on("change", function () {
  1066. console.log("changed!");
  1067. });
  1068. model.on("error", function (model, error) {
  1069. console.log(error);
  1070. });
  1071. model.set({name: "Tanaka"}); //-> "changed!"
  1072. model.set({name: "Suzuki"}, {silent: true});
  1073. model.set({name: ""}); //-> "invalid!"
  1074. model.set({name: ""}, {silent: true});
  1075. </pre>
  1076. <hr />
  1077. <!-- escape -->
  1078. <h3 id="Model-escape">model.escape(attribute)</h3>
  1079. <p>
  1080. <a href="#Model-get">getメソッド</a>と同じくモデルの属性値を取得しますがHTMLをエスケープします
  1081. </p>
  1082. <hr />
  1083. <!-- has -->
  1084. <h3 id="Model-has">model.has(attribute)</h3>
  1085. <p>
  1086. モデルが属性そのものを持っているかどうかを返します
  1087. </p>
  1088. <pre>
  1089. var model = new Backbone.Model({name: ""});
  1090. console.log(model.has("name")); //-> true
  1091. console.log(model.has("country")); //-> false
  1092. </pre>
  1093. <hr />
  1094. <!-- unset -->
  1095. <h3 id="Model-unset">model.unset(attribute, [options])</h3>
  1096. <p>
  1097. モデルから属性そのものを削除します存在する属性であれば <a href="#Events-eventList">changeイベント</a>を発火しますまた<a href="#Model-validate">validateメソッド</a>を実行します
  1098. </p>
  1099. <h4>options</h4>
  1100. <p>
  1101. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">changeイベント</a>を発火しません
  1102. </p>
  1103. <hr />
  1104. <!-- clear -->
  1105. <h3 id="Model-clear">model.clear([options])</h3>
  1106. <p>
  1107. モデルから属性そのものを全て削除します属性が1つでも存在すれば <a href="#Events-eventList">changeイベント</a>を発火しますまた<a href="#Model-validate">validateメソッド</a>を実行します
  1108. </p>
  1109. <h4>options</h4>
  1110. <p>
  1111. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">changeイベント</a>を発火しません
  1112. </p>
  1113. <hr />
  1114. <!-- id -->
  1115. <h3 id="Model-id">model.id</h3>
  1116. <p>
  1117. モデルを一意に識別するための識別子ですコレクションの中からモデルを取り出す際のキーとして使用したりモデルごとに決まるURLの一部に使用されたりします
  1118. </p>
  1119. <p>
  1120. idは通常<a href="#Model-fetch">fetchメソッド</a><a href="#Model-save">saveメソッド</a>によってバックエンド側で決定されますがクライアントサイドで手動でidを設定する場合には<a href="#Model-set">setメソッド</a>でモデルの属性値として設定しますモデルのidプロパティは自動的にその値を参照してくれます
  1121. </p>
  1122. <pre>
  1123. var model = new Backbone.Model({
  1124. id: 1,
  1125. name: "Tanaka"
  1126. });
  1127. console.log(model.toJSON()); //-> {id: 1, name: "Tanaka"}
  1128. console.log(model.id); //-> 1
  1129. </pre>
  1130. <p>
  1131. <a href="#Model-set">setメソッド</a>で設定せずにidプロパティに直接設定することも可能ですがモデルの属性値は変化しませんので注意が必要です
  1132. </p>
  1133. <pre>
  1134. var model = new Backbone.Model({
  1135. name: "Tanaka"
  1136. });
  1137. model.id = 1;
  1138. console.log(model.id); //-> 1
  1139. console.log(model.toJSON()); //-> {name: "Tanaka"}
  1140. model = new Backbone.Model({
  1141. id: 1,
  1142. name: "Tanaka"
  1143. });
  1144. model.id = 2;
  1145. console.log(model.id); //-> 2
  1146. console.log(model.toJSON()); //-> {id: 1, name: "Tanaka"}
  1147. </pre>
  1148. <hr />
  1149. <!-- idAttribute -->
  1150. <h3 id="Model-idAttribute">model.idAttribute</h3>
  1151. <p>
  1152. モデルの属性の"id"というネーミングは変更できます例えばバックエンドのデータベースのカラム名と合わせると便利ですただしモデルの<a href="#Model-id">idプロパティ</a>"id"のままです
  1153. </p>
  1154. <pre>
  1155. var Model = Backbone.Model.extend({
  1156. idAttribute: "user_id"
  1157. });
  1158. var model = new Model({
  1159. user_id: 1,
  1160. name: "Tanaka"
  1161. });
  1162. console.log(model.id); //-> 1
  1163. console.log(model.toJSON()); //-> {user_id: 1, name: "Tanaka"}
  1164. console.log(model.user_id); //-> undefined
  1165. </pre>
  1166. <hr />
  1167. <!-- cid -->
  1168. <h3 id="Model-cid">model.cid</h3>
  1169. <p>
  1170. インスタンス生成時に自動的に振られるユニークな識別子です
  1171. </p>
  1172. <hr />
  1173. <!-- attributes -->
  1174. <h3 id="Model-attributes">model.attributes</h3>
  1175. <p>
  1176. モデルの属性が格納されているプロパティです属性に値を設定する場合このプロパティを直接更新することでも可能ですがイベントの発火などを機能させるために<a href="#Model-set">setメソッド</a>を使用します
  1177. </p>
  1178. <hr />
  1179. <!-- defaults -->
  1180. <h3 id="Model-defaults">model.defaults または model.defaults()</h3>
  1181. <p>
  1182. モデルの属性の初期値を設定します関数として定義することも可能です
  1183. </p>
  1184. <pre>
  1185. var Model = Backbone.Model.extend({
  1186. defaults: function () {
  1187. return {
  1188. name: "Tanaka",
  1189. country: "Japan"
  1190. }
  1191. }
  1192. });
  1193. var model = new Model();
  1194. console.log(model.toJSON()); //-> {name: "Tanaka", country: "Japan"}
  1195. </pre>
  1196. <hr />
  1197. <!-- toJSON -->
  1198. <h3 id="Model-toJSON">model.toJSON()</h3>
  1199. <p>
  1200. <a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトを返しますJSON文字列に変換するのではありません
  1201. </p>
  1202. <pre>
  1203. var model = new Backbone.Model({
  1204. name: "Tanaka"
  1205. });
  1206. console.log(model.toJSON()); //-> { name: "Tanaka"}
  1207. console.log(JSON.stringify(model.attributes)); //-> "{"name": "Tanaka"}"
  1208. </pre>
  1209. <hr />
  1210. <!-- fetch -->
  1211. <h3 id="Model-fetch">model.fetch([options])</h3>
  1212. <p>
  1213. バックエンドとHTTPリクエストのGETメソッドで通信してリソースの取得を要求します取得結果を<a href="#Model-parse">parseメソッド</a>で変換してからモデルの属性に設定します<a href="#Model-validate">validateメソッド</a>も実行しますリクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります
  1214. </p>
  1215. <p>
  1216. 通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します正常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">syncイベント</a>を発火しますまた取得結果をモデルの属性に設定する際にfetch前の値と異なる場合には <a href="#Events-eventList">changeイベント</a>を発火します
  1217. </p>
  1218. <p>
  1219. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火します
  1220. </p>
  1221. <h4>options</h4>
  1222. <p>
  1223. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">changeイベント</a>を発火しません
  1224. </p>
  1225. <hr />
  1226. <!-- save -->
  1227. <h3 id="Model-save">model.save([key, value], [options]) または model.save([attributes], [options])</h3>
  1228. <p>
  1229. バックエンドとHTTPリクエストのPOSTまたはPUTメソッドで通信してリソースの新規作成または更新を要求しますモデルの<a href="#Model-id">idプロパティ</a>が設定されていない場合はPOSTメソッド設定されている場合はPUTメソッドで通信しますリクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります
  1230. </p>
  1231. <p>
  1232. まずモデルに設定されている属性値およびこのメソッドの引数に渡した属性値は<a href="#Model-validate">validateメソッド</a>で検証されます検証結果に問題があった場合このメソッドはfalseを返却します次にこのメソッドの引数に属性値を渡したのであればモデルの属性値に反映され反映前と反映後とで値が変化するのであれば <a href="#Events-eventList">changeイベント</a>を発火しますただし後述する <code>options.wait = true</code> を設定している場合には属性値の反映は保留され<a href="#Events-eventList">changeイベント</a>も発火しません
  1233. </p>
  1234. <p>
  1235. バックエンドとの通信開始時に<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>を発火します
  1236. </p>
  1237. <p>
  1238. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火しますこのメソッドは通信結果に関わらずjqXHRオブジェクトを返します
  1239. </p>
  1240. <h4>options</h4>
  1241. <p>
  1242. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">changeイベント</a>を発火しません
  1243. </p>
  1244. <p>
  1245. このメソッドの引数に渡した属性値はモデルの属性値へ即座に反映されますが<code>options.wait = true</code> を設定するとサーバの応答を待ってから反映するようにタイミングを変えることができます
  1246. </p>
  1247. <hr />
  1248. <!-- destroy -->
  1249. <h3 id="Model-destroy">model.destroy([options])</h3>
  1250. <p>
  1251. バックエンドとHTTPリクエストのDELETEメソッドで通信してリソースの破棄を要求しますリクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります
  1252. </p>
  1253. <p>
  1254. 通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します正常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">syncイベント</a>を発火しますこの時<a href="#Events-eventList">destroyイベント</a>を発火しますモデルがコレクションに所有されている場合は自動的にコレクションからも削除されます
  1255. </p>
  1256. <p>
  1257. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火します<a href="#Events-eventList">destroyイベント</a>は発火しません
  1258. </p>
  1259. <p>
  1260. このメソッドは通信結果に関わらずjqXHRオブジェクトを返しますただしモデルに<a href="#Model-id">idプロパティ</a>が設定されていない場合は通信せずこのメソッドはfalseを返しますこの時<a href="#Events-eventList">destroyイベント</a>を発火しますモデルがコレクションに所有されている場合は自動的にコレクションからも削除されます
  1261. </p>
  1262. <h4>options</h4>
  1263. <p>
  1264. モデルはコレクションから即座に削除されますが<code>options.wait = true</code> を設定するとサーバの応答を待ってから削除するようにタイミングを変えることができます
  1265. </p>
  1266. <hr />
  1267. <!-- validate -->
  1268. <h3 id="Model-validate">model.validate(attributes)</h3>
  1269. <p>
  1270. モデルの属性を操作する直前に呼ばれるメソッドで値を検証する処理を記述します
  1271. </p>
  1272. <p>
  1273. このメソッドは検証に合格した場合には何も返却しないようにします検証結果に問題がある場合エラーメッセージの文字列やエラー情報を格納したオブジェクトなど好みの値を返却しますこの返却値は発火する<a href="#Events-eventList">errorイベント</a>の引数に設定されます
  1274. </p>
  1275. <pre>
  1276. var Model = Backbone.Model.extend({
  1277. validate: function (attrs) {
  1278. if (_.isEmpty(attrs.name)) {
  1279. return "Invalid!";
  1280. }
  1281. }
  1282. });
  1283. var model = new Model();
  1284. model.on("error", function (model, error) {
  1285. console.log(error);
  1286. });
  1287. model.set({name: ""}); //-> "Invalid!"
  1288. </pre>
  1289. <p>
  1290. 上の例では<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>は発火します
  1291. </p>
  1292. <pre>
  1293. var Model = Backbone.Model.extend({
  1294. validate: function (attrs) {
  1295. if (_.isEmpty(attrs.name)) {
  1296. return "Invalid!";
  1297. }
  1298. }
  1299. });
  1300. var model = new Model();
  1301. model.set({name: ""} , {
  1302. error: function (model, error) {
  1303. console.log(error);
  1304. }});
  1305. //-> "Invalid!"
  1306. </pre>
  1307. <hr />
  1308. <!-- url -->
  1309. <h3 id="Model-url">model.url()</h3>
  1310. <p>
  1311. モデルのURLを取得します
  1312. </p>
  1313. <p>
  1314. <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>が優先されます
  1315. </p>
  1316. <pre>
  1317. var Model = Backbone.Model.extend();
  1318. var Collection = Backbone.Collection.extend({
  1319. url: "/users"
  1320. })
  1321. var model = new Model({id: 1});
  1322. var collection = new Collection(model);
  1323. console.log(model.url()); //-> "/users/1"
  1324. model.urlRoot = "/user";
  1325. console.log(model.url()); //-> "/user/1"
  1326. </pre>
  1327. <hr />
  1328. <!-- urlRoot -->
  1329. <h3 id="Model-urlRoot">model.urlRoot または model.urlRoot()</h3>
  1330. <p>
  1331. モデルの<a href="#Model-url">urlメソッド</a>の内部で使用されます関数として定義することも可能です
  1332. </p>
  1333. <pre>
  1334. var Model = Backbone.Model.extend({
  1335. urlRoot: function () {
  1336. return "/users";
  1337. }
  1338. });
  1339. var model = new Model({id: 1});
  1340. console.log(model.url()); //-> "/users/1"
  1341. </pre>
  1342. <hr />
  1343. <!-- parse -->
  1344. <h3 id="Model-parse">model.parse(response, xhr)</h3>
  1345. <p>
  1346. <a href="#Model-fetch">fetchメソッド</a><a href="#Model-save">saveメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれますサーバから取得したデータをそのまま属性に取り込むのではなく加工してから取り込みたい場合に利用します
  1347. </p>
  1348. <h4>response</h4>
  1349. <p>
  1350. サーバが返したデータです
  1351. </p>
  1352. <pre>
  1353. var Model = Backbone.Model.extend({
  1354. parse: function (response) {
  1355. return response.user;
  1356. }
  1357. });
  1358. var model = new Model();
  1359. model.fetch(); // サーバのレスポンスが {user: {name: "Tanaka"}} と仮定
  1360. </pre>
  1361. <p>
  1362. またモデルのインスタンス生成時にコンストラクタで <code>options.parse = true</code> を指定した場合にも実行されます
  1363. </p>
  1364. <hr />
  1365. <!-- clone -->
  1366. <h3 id="Model-clone">model.clone()</h3>
  1367. <p>
  1368. 属性が全て同じであるモデルを複製します
  1369. </p>
  1370. <hr />
  1371. <!-- isNew -->
  1372. <h3 id="Model-isNew">model.isNew()</h3>
  1373. <p>
  1374. モデルの<a href="#Model-id">idプロパティ</a>が未設定nullまたはundefinedかどうかを返します
  1375. </p>
  1376. <hr />
  1377. <!-- change -->
  1378. <h3 id="Model-change">model.change()</h3>
  1379. <p>
  1380. モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となりますこのメソッドはその状態にある属性に <a href="#Events-eventList">changeイベント</a>を発火します
  1381. </p>
  1382. <pre>
  1383. var user = new Backbone.Model();
  1384. user.on("change:name", function (model, value) {
  1385. console.log(value); //-> "Tanaka"
  1386. })
  1387. user.on("change:country", function (model, value) {
  1388. console.log(value); //-> "Japan"
  1389. })
  1390. user.on("change", function (model) {
  1391. console.log(model.toJSON()); //-> {name: "Tanaka", country: "Japan"}
  1392. })
  1393. user.set({name: "Tanaka", country: "Japan"}, {silent: true});
  1394. user.change();
  1395. </pre>
  1396. <hr />
  1397. <!-- hasChanged -->
  1398. <h3 id="Model-hasChanged">model.hasChanged([attribute])</h3>
  1399. <p>
  1400. モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となりますこのメソッドは指定した属性がその状態にあるかどうかを返します
  1401. </p>
  1402. <pre>
  1403. var model = new Backbone.Model();
  1404. model.set({name: "Suzuki"}, {silent: true});
  1405. console.log(model.hasChanged("name")); //-> true
  1406. model.set({name: "Tanaka"});
  1407. console.log(model.hasChanged("name")); //-> false
  1408. </pre>
  1409. <p>
  1410. なお発火しないまま残っている <a href="#Events-eventList">changeイベント</a><a href="#Model-change">changeメソッド</a>でまとめて発火できます
  1411. </P>
  1412. <h4>attribute</h4>
  1413. <p>
  1414. 対象の属性を指定します省略すると該当する属性が1つでもあればtrueを返します
  1415. </p>
  1416. <hr />
  1417. <!-- changedAttributes -->
  1418. <h3 id="Model-changedAttributes">model.changedAttributes([attributes])</h3>
  1419. <p>
  1420. モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となりますこのメソッドはその状態にある全ての属性を複製したオブジェクトを返します該当する属性が無い場合はfalseを返します
  1421. </p>
  1422. <h4>attributes</h4>
  1423. <p>
  1424. 指定したattributesと最後に <a href="#Events-eventList">changeイベント</a>が発火した時点での属性とを比較して異なる属性を返します該当する属性が無い場合はfalseを返します
  1425. </p>
  1426. <pre>
  1427. var user = new Backbone.Model();
  1428. user.set({
  1429. name: "Tanaka",
  1430. address: "Japan"
  1431. });
  1432. user.set({name: "Suzuki"}, {silent:true});
  1433. console.log(user.changedAttributes({name: "Tanaka", address: "Japan"})); //-> false
  1434. console.log(user.changedAttributes({name: "Tanaka", address: "China"})); //-> {address: "china"}
  1435. console.log(user.changedAttributes({name: "Suzuki"})); //-> {name: "Suzuki"}
  1436. console.log(user.changedAttributes({name: "Yamada"})); //-> {name: "Yamada"}
  1437. </pre>
  1438. <hr />
  1439. <!-- previous -->
  1440. <h3 id="Model-previous">model.previous(attribute)</h3>
  1441. <p>
  1442. 変更前の属性を取得します<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます
  1443. </p>
  1444. <pre>
  1445. var user = new Backbone.Model({name: "Tanaka"});
  1446. user.on("change", function (model) {
  1447. console.log(model.previous("name")); //-> "Tanaka"
  1448. console.log(model.get("name")); //-> "Suzuki"
  1449. })
  1450. user.set({name: "Suzuki"});
  1451. </pre>
  1452. <hr />
  1453. <!-- previousAttributes -->
  1454. <h3 id="Model-previousAttributes">model.previousAttributes()</h3>
  1455. <p>
  1456. 変更前の全ての属性を取得します<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます
  1457. </p>
  1458. <pre>
  1459. var user = new Backbone.Model({name: "Tanaka", country: "Japan"});
  1460. user.on("change", function (model) {
  1461. console.log(model.previousAttributes()); //-> {name: "Tanaka", country: "Japan"}
  1462. console.log(model.toJSON()); //-> {name: "Suzuki", country: "China"}
  1463. })
  1464. user.set({name: "Suzuki", country: "China"});
  1465. </pre>
  1466. <hr />
  1467. <h2>Backbone.Collection</h2>
  1468. <hr />
  1469. <!-- extend -->
  1470. <h3 id="Collection-extend">Backbone.Collection.extend([properties], [classProperties])</h3>
  1471. <p>
  1472. <code>Backbone.Collection</code> を継承した新しいコレクションを作ります
  1473. </p>
  1474. <h4>properties</h4>
  1475. <p>
  1476. インスタンスメンバを定義します
  1477. </p>
  1478. <h4>classProperties</h4>
  1479. <p>
  1480. 静的メンバを定義します
  1481. </p>
  1482. <hr />
  1483. <!-- constractor -->
  1484. <h3 id="Collection-constractor">new Collection([models], [options])</h3>
  1485. <p>
  1486. コンストラクタです
  1487. </p>
  1488. <h4>models</h4>
  1489. <p>
  1490. コレクションに格納するモデルを指定します複数のモデルは配列で指定します
  1491. </p>
  1492. <pre>
  1493. var User = Backbone.Model.extend();
  1494. var user1 = new User({name: "Tanaka"});
  1495. var user2 = new User({name: "Suzuki"});
  1496. var users = new Backbone.Collection([user1, user2]);
  1497. console.log(users.length); //-> 2
  1498. </pre>
  1499. <h4>options</h4>
  1500. <p>
  1501. <code>options.model</code><a href="#Collection-model">modelプロパティ</a>を設定できます
  1502. </p>
  1503. <p>
  1504. <code>options.comparator</code><a href="#Collection-comparator">comparatorメソッド</a>を設定できますすでにクラスで定義済みの<a href="#Collection-comparator">comparatorメソッド</a>を無効にする場合は<code>options.comparator=false</code>とします
  1505. </p>
  1506. <p>
  1507. <code>options.parse=true</code>を設定すると<a href="#Collection-parse">parseメソッド</a>を実行します
  1508. </p>
  1509. <p>
  1510. その他<a href="#Collection-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます
  1511. </p>
  1512. <hr />
  1513. <!-- initialize -->
  1514. <h3 id="Collection-initialize">collection.initialize([models], [options])</h3>
  1515. <p>
  1516. インスタンス生成時に呼ばれます
  1517. </p>
  1518. <h4>models</h4>
  1519. <p><a href="#Collection-constractor">コンストラクタ</a>のmodelsへ渡した値です</p>
  1520. <h4>options</h4>
  1521. <p><a href="#Collection-constractor">コンストラクタ</a>のoptionsへ渡した値です</p>
  1522. <hr />
  1523. <!-- model -->
  1524. <h3 id="Collection-model">collection.model</h3>
  1525. <p>
  1526. コレクションに格納するモデルのクラス関数オブジェクトを指定します<a href="#Collection-constractor">コンストラクタ</a><a href="#Collection-add">addメソッド</a>などの引数でオブジェクトリテラルを渡すとこのプロパティで指定したクラスに変換されます
  1527. </p>
  1528. <hr />
  1529. <!-- models -->
  1530. <h3 id="Collection-models">collection.models</h3>
  1531. <p>
  1532. モデルが格納されているプロパティですただし通常はこのプロパティを直接参照するのではなく<a href="#Collection-get">getメソッド</a><a href="#Collection-at">atメソッド</a><a href="#Collection-UnderscoreMethods">Underscore.jsのメソッド</a>を利用します
  1533. </p>
  1534. <hr />
  1535. <!-- toJSON -->
  1536. <h3 id="Collection-toJSON">collection.toJSON()</h3>
  1537. <p>
  1538. 各モデルの<a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトの配列を返しますJSON文字列に変換するのではありません
  1539. </p>
  1540. <hr />
  1541. <!-- sync -->
  1542. <h3 id="Collection-sync">collection.sync(method, collection, [options])</h3>
  1543. <p>
  1544. <a href="#Sync">Backbone.syncメソッド</a>を実行します<a href="#Collection-fetch">fetchメソッド</a>の内部で呼ばれます
  1545. </p>
  1546. <p>
  1547. このメソッドを直接呼ぶ用途としてはコレクションに格納しているモデルを一括してバックエンドへ送る場合が考えられます
  1548. </p>
  1549. <pre>
  1550. var Users = Backbone.Collection.extend({
  1551. createAll: function () {
  1552. var self = this;
  1553. options = {
  1554. success: function(models) {
  1555. self.reset(models);
  1556. }
  1557. };
  1558. return this.sync('create', this, options);
  1559. }
  1560. });
  1561. </pre>
  1562. <hr />
  1563. <!-- UnderscoreMethods -->
  1564. <h3 id="Collection-UnderscoreMethods">Underscore Methods</h3>
  1565. <p>
  1566. <a href="#Collection-models">modelsプロパティ</a>に対してUnderscore.jsの以下のメソッドを使用できます
  1567. </p>
  1568. <p>
  1569. <ul>
  1570. <li>forEach (each)</li>
  1571. <li>map (collect)</li>
  1572. <li>reduce (foldl, inject)</li>
  1573. <li>reduceRight (foldr)</li>
  1574. <li>find (detect)</li>
  1575. <li>filter (select)</li>
  1576. <li>reject</li>
  1577. <li>every (all)</li>
  1578. <li>some (any)</li>
  1579. <li>include (contains)</li>
  1580. <li>invoke</li>
  1581. <li>max</li>
  1582. <li>min</li>
  1583. <li>sortedIndex</li>
  1584. <li>shuffle</li>
  1585. <li>toArray</li>
  1586. <li>size</li>
  1587. <li>first (head, take)</li>
  1588. <li>initial</li>
  1589. <li>rest (tail)</li>
  1590. <li>last</li>
  1591. <li>without</li>
  1592. <li>indexOf</li>
  1593. <li>lastIndexOf</li>
  1594. <li>isEmpty</li>
  1595. <li>chain</li>
  1596. <li>groupBy</li>
  1597. <li>countBy</li>
  1598. <li>sortBy</li>
  1599. </ul>
  1600. </p>
  1601. <hr />
  1602. <!-- add -->
  1603. <h3 id="Collection-add">collection.add(models, [options])</h3>
  1604. <p>
  1605. コレクションにモデルを追加します引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス関数オブジェクトに変換しますがモデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします
  1606. </p>
  1607. <pre>
  1608. var User = Backbone.Model.extend({
  1609. validate: function (attr) {
  1610. if (_.isEmpty(attr.name)) {
  1611. return "invalid!";
  1612. }
  1613. }
  1614. });
  1615. var Users = Backbone.Collection.extend({
  1616. model: User
  1617. });
  1618. var users = new Users();
  1619. users.add({name: ""}); //-> Error: Can't add an invalid model to a collection
  1620. </pre>
  1621. <p>
  1622. このメソッドで追加したモデルは<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メソッドによるソートでは発火しません
  1623. </P>
  1624. <pre>
  1625. var Users = Backbone.Collection.extend({
  1626. comparator: function (model) {
  1627. return model.id;
  1628. }
  1629. });
  1630. var users = new Users;
  1631. users.add({id: 1});
  1632. users.add({id: 3});
  1633. users.add({id: 2});
  1634. console.log(users.at(0).id); //-> 1
  1635. console.log(users.at(1).id); //-> 2
  1636. console.log(users.at(2).id); //-> 3
  1637. </pre>
  1638. <p>
  1639. 最後に追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します
  1640. </p>
  1641. <p>
  1642. このメソッドはコレクション自身を返却します
  1643. </p>
  1644. <h4>models</h4>
  1645. <p>
  1646. 複数のモデルを追加する場合は配列で指定します
  1647. </p>
  1648. <h4>options</h4>
  1649. <p>
  1650. 同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合には追加されませんが<code>options.merge = true</code> を設定するとすでに格納されているモデルの属性値を上書きすることができます
  1651. </p>
  1652. <pre>
  1653. var users = new Backbone.Collection({id: 1, name: "Tanaka"});
  1654. users.add({id: 1, name: "Suzuki"});
  1655. console.log(JSON.stringify(users)); //-> [{"id":1,"name":"Tanaka"}]
  1656. users.add({id: 1, name: "Suzuki"}, {merge: true});
  1657. console.log(JSON.stringify(users)); //-> [{"id":1,"name":"Suzuki"}]
  1658. </pre>
  1659. <p>
  1660. <code>options.at</code>でモデルを追加する位置を<a href="#Collection-models">modelsプロパティ</a>のインデックスで指定することができます
  1661. </p>
  1662. <pre>
  1663. var users = new Backbone.Collection([
  1664. {id: 1},
  1665. {id: 2},
  1666. {id: 3},
  1667. {id: 4},
  1668. {id: 5}
  1669. ]);
  1670. console.log(users.pluck("id")); //-> [1, 2, 3, 4, 5]
  1671. users.add([{id: "A"}, {id: "B"}], {at: 3});
  1672. console.log(users.pluck("id")); //-> [1, 2, 3, "A", "B", 4, 5]
  1673. </pre>
  1674. <p>
  1675. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">addイベント</a>を発火しません
  1676. </p>
  1677. <p>
  1678. <code>options.sort = false</code> を設定するとソートしません
  1679. </p>
  1680. <hr />
  1681. <!-- remove -->
  1682. <h3 id="Collection-remove">collection.remove(models, [options])</h3>
  1683. <p>
  1684. コレクションからモデルを削除しますモデルそのものは破棄しません削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火してコールバック関数の引数<code>options.index</code>には削除したモデルの<a href="#Collection-models">modelsプロパティ</a>上のインデックスが設定されます
  1685. </p>
  1686. <pre>
  1687. var users = new Backbone.Collection([
  1688. {id: 1, name: "Tanaka"},
  1689. {id: 2, name: "Suzuki"},
  1690. {id: 3, name: "Nakata"}
  1691. ]);
  1692. users.on("remove", function(model, collection, options) {
  1693. console.log(options.index);
  1694. });
  1695. users.remove({id: 2});
  1696. //-> 1
  1697. </pre>
  1698. <p>
  1699. 上記の<code>options.index</code>の注意点として複数のモデルを削除した場合に得られるインデックスはイベントが発火した時点でのものでありこのremoveメソッドを呼んだ時点でのインデックスではありません
  1700. </p>
  1701. <pre>
  1702. var users = new Backbone.Collection([
  1703. {id: 1, name: "Tanaka"},
  1704. {id: 2, name: "Suzuki"},
  1705. {id: 3, name: "Nakata"}
  1706. ]);
  1707. users.on("remove", function(model, collection, options) {
  1708. console.log(options.index);
  1709. });
  1710. users.remove([{id: 2}, {id: 3}]);
  1711. //-> 1
  1712. //-> 1
  1713. </pre>
  1714. <p>
  1715. このメソッドはコレクション自身を返却します
  1716. </p>
  1717. <h4>models</h4>
  1718. <p>
  1719. 削除するモデルを指定する方法は3通りありますモデルのインスタンスそのものを渡す方法<a href="#Model-id">idプロパティ</a>の値を渡す方法"id"という名前のプロパティを持つオブジェクトを渡す方法です
  1720. </p>
  1721. <p>
  1722. 複数のモデルを削除する場合は配列で指定します
  1723. </p>
  1724. <h4>options</h4>
  1725. <p>
  1726. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">removeイベント</a>を発火しません
  1727. </p>
  1728. <hr />
  1729. <!-- reset -->
  1730. <h3 id="Collection-reset">collection.reset([models], [options])</h3>
  1731. <p>
  1732. 格納しているモデルを全て入れ替えます<a href="#Events-eventList">resetイベント</a>を発火します<a href="#Events-eventList">resetイベント</a>に関連付けしたコールバック関数の中では入れ替え前のモデルの配列を<code>options.previousModels</code>から参照できます
  1733. </p>
  1734. <pre>
  1735. var users = new Backbone.Collection([
  1736. {name: "Tanaka"},
  1737. {name: "Suzuki"}
  1738. ]);
  1739. users.on("reset", function (collection, options) {
  1740. console.log(options.previousModels[0].get("name"));
  1741. console.log(options.previousModels[1].get("name"));
  1742. });
  1743. users.reset({name: "Sasaki"});
  1744. //-> Tanaka
  1745. //-> Suzuki
  1746. </pre>
  1747. <h4>models</h4>
  1748. <p>
  1749. 新しく格納するモデルを配列で指定します省略するとコレクションは空になります
  1750. </p>
  1751. <h4>options</h4>
  1752. <p>
  1753. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">resetイベント</a>を発火しません
  1754. </p>
  1755. <hr />
  1756. <!-- update -->
  1757. <h3 id="Collection-update">collection.update(models, [options])</h3>
  1758. <p>
  1759. </p>
  1760. <hr />
  1761. <!-- get -->
  1762. <h3 id="Collection-get">collection.get(id) または collection.get(model)</h3>
  1763. <p>
  1764. コレクションに格納しているモデルを<a href="#Model-id">idプロパティ</a>の値または"id"という名前のプロパティを持つオブジェクトまたは<a href="#Model-cid">cidプロパティ</a>の値をキーに参照します
  1765. </p>
  1766. <pre>
  1767. var users = new Backbone.Collection([
  1768. {id: 1, name: "Tanaka"},
  1769. {id: 2, name: "Suzuki"},
  1770. {id: 3, name: "Nakata"},
  1771. ]);
  1772. console.log(users.get(2).get("name")); //-> Suzuki
  1773. console.log(users.get({id: 2}).get("name")); //-> Suzuki
  1774. </pre>
  1775. <hr />
  1776. <!-- at -->
  1777. <h3 id="Collection-at">collection.at(index)</h3>
  1778. <p>
  1779. コレクションに格納しているモデルを<a href="#Model-models">modelsプロパティ</a>のインデックスで参照しますなお<a href="#Model-models">modelsプロパティ</a>の格納順はソートされることにより<a href="#Collection-add">addメソッド</a>で追加した順とは限りません
  1780. </p>
  1781. <pre>
  1782. var Users = Backbone.Collection.extend({
  1783. comparator: function (model) {
  1784. return model.id;
  1785. }
  1786. });
  1787. var users = new Users();
  1788. users.add({id:1});
  1789. users.add({id:3});
  1790. users.add({id:2});
  1791. console.log(users.at(0).id); //-> 1
  1792. console.log(users.at(1).id); //-> 2
  1793. console.log(users.at(2).id); //-> 3
  1794. </pre>
  1795. <hr />
  1796. <!-- push -->
  1797. <h3 id="Collection-push">collection.push(model, [options])</h3>
  1798. <p>
  1799. コレクションの末尾にモデルを追加します引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス関数オブジェクトに変換しますがモデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします
  1800. </p>
  1801. <p>
  1802. <a href="#Collection-comparator">comparatorメソッド</a>を定義している場合にはソートします<a href="#Collection-sort">sortメソッド</a>によるソートでは<a href="#Events-eventList">sortイベント</a>を発火しますがこのpushメソッドによるソートでは発火しません
  1803. </P>
  1804. <p>
  1805. 最後に追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します
  1806. </p>
  1807. <p>
  1808. このメソッドは追加したモデルを返却しますこのメソッドは<a href="#Model-add">addメソッド</a>に別名を付けただけに思えますが返却する値に違いがあります
  1809. </p>
  1810. <h4>options</h4>
  1811. <p>
  1812. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">addイベント</a>を発火しません
  1813. </p>
  1814. <p>
  1815. <code>options.sort = false</code> を設定するとソートしません
  1816. </p>
  1817. <hr />
  1818. <!-- pop -->
  1819. <h3 id="Collection-pop">collection.pop([options])</h3>
  1820. <p>
  1821. コレクションの末尾のモデルを削除しますモデルそのものは破棄しません削除されたモデルとこのコレクションは<a href="#Events-eventList">removeイベント</a>を発火します
  1822. </p>
  1823. <p>
  1824. このメソッドは削除したモデルを返却します
  1825. </p>
  1826. <h4>options</h4>
  1827. <p>
  1828. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">removeイベント</a>を発火しません
  1829. </p>
  1830. <hr />
  1831. <!-- unshift -->
  1832. <h3 id="Collection-unshift">collection.unshift(model, [options])</h3>
  1833. <p>
  1834. コレクションの先頭にモデルを追加します引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス関数オブジェクトに変換しますがモデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします
  1835. </p>
  1836. <p>
  1837. このメソッドでモデルを追加した場合には<a href="#Collection-comparator">comparatorメソッド</a>を定義していてもソートしません
  1838. </P>
  1839. <p>
  1840. 最後に追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します
  1841. </p>
  1842. <p>
  1843. このメソッドは追加したモデルを返却します
  1844. </p>
  1845. <h4>options</h4>
  1846. <p>
  1847. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">addイベント</a>を発火しません
  1848. </p>
  1849. <hr />
  1850. <!-- shift -->
  1851. <h3 id="Collection-shift">collection.shift([options])</h3>
  1852. <p>
  1853. コレクションの先頭のモデルを削除しますモデルそのものは破棄しません削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火します
  1854. </p>
  1855. <p>
  1856. このメソッドは削除したモデルを返却します
  1857. </p>
  1858. <h4>options</h4>
  1859. <p>
  1860. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">removeイベント</a>を発火しません
  1861. </p>
  1862. <hr />
  1863. <!-- slice -->
  1864. <h3 id="Collection-slice">collection.slice([begin], [end])</h3>
  1865. <p>
  1866. コレクションの指定された範囲のモデルを参照します
  1867. </p>
  1868. <h4>begin</h4>
  1869. <p>
  1870. <a href="#Collection-models">modelsプロパティ</a>の開始インデックスを指定します
  1871. </p>
  1872. <h4>end</h4>
  1873. <p>
  1874. <a href="#Collection-models">modelsプロパティ</a>の終了インデックスを指定します
  1875. </p>
  1876. <hr />
  1877. <!-- length -->
  1878. <h3 id="Collection-length">collection.length</h3>
  1879. <p>
  1880. コレクションに格納されているモデルの数を返します
  1881. </p>
  1882. <hr />
  1883. <!-- comparator -->
  1884. <h3 id="Collection-comparator">collection.comparator(model) または collection.comparator(model1, model2)</h3>
  1885. <p>
  1886. <a href="#Collection-sort">sortメソッド</a>で使用する比較関数を設定します
  1887. </p>
  1888. <pre>
  1889. var users = new Backbone.Collection([
  1890. {name: "Tanaka", age: 10},
  1891. {name: "Suzuki", age: 40},
  1892. {name: "Katou", age: 50},
  1893. {name: "Gotou", age: 20},
  1894. {name: "Mogi", age: 30}
  1895. ]);
  1896. users.comparator = function (model) {
  1897. return model.get("age");
  1898. };
  1899. users.sort();
  1900. console.log(users.pluck("name")); //-> ["Tanaka", "Gotou", "Mogi", "Suzuki", "Katou"]
  1901. </pre>
  1902. <p>
  1903. Javascript標準のArrayオブジェクトが持つsortメソッドと同じく引数を2つ持つ比較関数でも設定できます複数のソートキーを指定したい場合に使用します
  1904. </p>
  1905. <pre>
  1906. var users = new Backbone.Collection([
  1907. {name: "Tanaka", age: 10, gender: "male"},
  1908. {name: "Suzuki", age: 40, gender: "male"},
  1909. {name: "Katou", age: 50, gender: "female"},
  1910. {name: "Gotou", age: 20, gender: "female"},
  1911. {name: "Mogi", age: 30, gender: "male"}
  1912. ]);
  1913. users.comparator = function (a, b) {
  1914. if (a.get("gender") > b.get("gender")) return 1;
  1915. if (a.get("gender") < b.get("gender")) return -1;
  1916. return a.get("age") - b.get("age");
  1917. };
  1918. users.sort();
  1919. console.log(users.pluck("name")); //-> ["Gotou", "Katou", "Tanaka", "Mogi", "Suzuki"]
  1920. </pre>
  1921. <hr />
  1922. <!-- sort -->
  1923. <h3 id="Collection-sort">collection.sort([options])</h3>
  1924. <p>
  1925. 格納しているモデルをソートします<a href="#Collection-comparator">comparatorメソッド</a>を定義していない場合例外をスローしますソートにより並びが変わったかどうかに関わらず<a href="#Events-eventList">sortイベント</a>を発火します
  1926. </p>
  1927. <h4>options</h4>
  1928. <p>
  1929. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">sortイベント</a>を発火しません
  1930. </p>
  1931. <hr />
  1932. <!-- pluck -->
  1933. <h3 id="Collection-pluck">collection.pluck(attribute)</h3>
  1934. <p>
  1935. 格納しているモデルから指定した属性を取り出した配列を作ります
  1936. </p>
  1937. <pre>
  1938. var users = new Backbone.Collection();
  1939. users.add({id:1, name: "Tanaka"});
  1940. users.add({id:2, name: "Suzuki"});
  1941. users.add({id:3, name: "Katou"});
  1942. console.log(users.pluck("name")); //-> ["Tanaka", "Suzuki", "Katou"]
  1943. </pre>
  1944. <hr />
  1945. <!-- where -->
  1946. <h3 id="Collection-where">collection.where(attributes)</h3>
  1947. <p>
  1948. 格納しているモデルのうち指定した属性値に一致するモデルを取り出した配列を作ります
  1949. </p>
  1950. <pre>
  1951. var users = new Backbone.Collection();
  1952. users.add({name: "Tanaka", age: 10});
  1953. users.add({name: "Suzuki", age: 10});
  1954. users.add({name: "Katou", age: 30});
  1955. console.log(users.where({age: 10}).length); //-> 2
  1956. </pre>
  1957. <hr />
  1958. <!-- url -->
  1959. <h3 id="Collection-url">collection.url または collection.url()</h3>
  1960. <p>
  1961. コレクションの<a href="#Collection-fetch">fetchメソッド</a>での通信先となるURLを設定しますまたコレクションが所有するモデルに<a href="#Model-urlRoot">urlRootプロパティ</a>が設定されていない場合にはそのモデルの<a href="#Model-url">urlメソッド</a>の内部で使用されモデルのURLの一部となります
  1962. </p>
  1963. <hr />
  1964. <!-- parse -->
  1965. <h3 id="Collection-parse">collection.parse(response, xhr)</h3>
  1966. <p>
  1967. <a href="#Collection-fetch">fetchメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれますサーバから取得したデータをそのまま属性に取り込むのではなく加工してから取り込みたい場合に利用します
  1968. </p>
  1969. <hr />
  1970. <!-- clone -->
  1971. <h3 id="Collection-clone">collection.clone()</h3>
  1972. <p>
  1973. 同じ<a href="#Collection-models">modelsプロパティ</a>を持つ新しいコレクションを複製します
  1974. </p>
  1975. <hr />
  1976. <!-- fetch -->
  1977. <h3 id="Collection-fetch">collection.fetch([options])</h3>
  1978. <p>
  1979. バックエンドと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>です設定していない場合は例外をスローします
  1980. </p>
  1981. <p>
  1982. 通信開始時に<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>を発火します
  1983. </p>
  1984. <p>
  1985. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火します
  1986. </p>
  1987. <h4>options</h4>
  1988. <p>
  1989. <code>options.silent = true</code>を設定すると<a href="#Events-eventList">addイベント</a><a href="#Events-eventList">resetイベント</a>を発火しません
  1990. </p>
  1991. <p>
  1992. コレクションに格納済みのモデルは全て削除して取得したモデルに入れ替えますが<code>options.add = true</code>を設定すると削除せずに追加しますこの時<code>options.merge = true</code>を設定すると同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合は格納済みのモデルの属性値を上書きします
  1993. </p>
  1994. <hr />
  1995. <!-- create -->
  1996. <h3 id="Collection-create">collection.create(model, [options])</h3>
  1997. <p>
  1998. バックエンドとHTTPリクエストのPOSTメソッドで通信してリソースの新規作成を要求しますリクエスト先のURLはモデルの<a href="#Model-url">urlメソッド</a>で決まります
  1999. </p>
  2000. <p>
  2001. このメソッドの引数にモデルのインスタンスではなく単なるオブジェクトリテラルを渡した場合は<a href="#Model-validate">validateメソッド</a>で検証されます検証結果に問題があった場合このメソッドはfalseを返却します検証結果に問題がなければ<a href="#Collection-model">modelプロパティ</a>に設定しているクラス関数オブジェクトに変換してコレクションへ追加しますこの時<a href="#Events-eventList">addイベント</a>を発火します
  2002. </p>
  2003. <p>
  2004. バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します通信した結果正常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">syncイベント</a>を発火します
  2005. </p>
  2006. <p>
  2007. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火しますこのメソッドは通信結果に関わらず新しいモデルを返します
  2008. </p>
  2009. <h4>options</h4>
  2010. <p>
  2011. <code>options.silent = true</code> を設定すると<a href="#Events-eventList">addイベント</a>を発火しません
  2012. </p>
  2013. <p>
  2014. モデルは即座にコレクションに追加されますが<code>options.wait = true</code> を設定するとサーバの応答を待ってから追加するようにタイミングを変えることができます
  2015. </p>
  2016. <hr />
  2017. <h2>Backbone.Router</h2>
  2018. <hr />
  2019. <h3 id="Router-extend">Backbone.Router.extend([properties], [classProperties])</h3>
  2020. <p>
  2021. <code>Backbone.Router</code> を継承した新しいルーターを作ります
  2022. </p>
  2023. <h4>properties</h4>
  2024. <p>
  2025. インスタンスメンバを定義します
  2026. </p>
  2027. <h4>classProperties</h4>
  2028. <p>
  2029. 静的メンバを定義します
  2030. </p>
  2031. <hr />
  2032. <h3 id="Router-constractor">new Router([options])</h3>
  2033. <p>
  2034. コンストラクタです
  2035. </p>
  2036. <h4>options</h4>
  2037. <p>
  2038. <a href="#Router-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用します
  2039. </p>
  2040. <hr />
  2041. <h3 id="Router-initialize">router.initialize([options])</h3>
  2042. <p>
  2043. インスタンス生成時に呼ばれます
  2044. </p>
  2045. <h4>options</h4>
  2046. <p>
  2047. <a href="#Router-constractor">コンストラクタ</a>のoptionsへ渡した値です
  2048. </p>
  2049. <hr />
  2050. <h3 id="Router-routes">router.routes</h3>
  2051. <p>
  2052. URLとコールバック関数の関連付けをハッシュマップで指定します下の例では<code>#users</code>へアクセスすると<code>createView</code>関数を実行します
  2053. </p>
  2054. <pre>
  2055. var Route = Backbone.Router.extend({
  2056. routes: {
  2057. "users": "createView"
  2058. },
  2059. createView: function () {
  2060. //
  2061. }
  2062. });
  2063. </pre>
  2064. <p>
  2065. URLの中にコロンで始まる変数を指定するとパラメータとしてコールバック関数に渡すことができます下の例では<code>#users/1/2</code>へアクセスすると<code>createView</code>関数の第1引数に1第2引数に2が渡ります
  2066. </p>
  2067. <pre>
  2068. var Route = Backbone.Router.extend({
  2069. routes: {
  2070. "users/:group/:id": "createView"
  2071. },
  2072. createView: function (group, id) {
  2073. //
  2074. }
  2075. });
  2076. </pre>
  2077. <p>
  2078. 上記の例でidを省略して<code>#users/1</code>へアクセスするとコールバック関数は呼ばれませんカッコで囲うとそのパラメータは省略可能になります
  2079. </p>
  2080. <pre>
  2081. routes: {
  2082. "users/:group(/:id)": "callback"
  2083. }
  2084. </pre>
  2085. <p>
  2086. アスタリスクで始める変数を指定するとそれ以降の全ての文字列がコールバック関数の引数に渡されます下の例では<code>#users/1/2/3</code>へアクセスするとコールバック関数の第1引数に<code>1/2/3</code>が渡ります
  2087. </p>
  2088. <pre>
  2089. routes: {
  2090. "users/*query": "callback"
  2091. }
  2092. </pre>
  2093. <p>
  2094. これらのURLパターンにマッチするとコールバック関数が実在するかどうかに関わらず<a href="#Events-eventList">route:name</a>イベントを発火します<code>name</code>はコールバック関数名です
  2095. </p>
  2096. <hr />
  2097. <h3 id="Router-route">router.route(route, name, [callback])</h3>
  2098. <p>
  2099. <a href="#Router-routes">routesプロパティ</a>を使用せずに個別にルーティングを設定します
  2100. </p>
  2101. <pre>
  2102. var Route = Backbone.Router.extend({
  2103. initialize: function () {
  2104. this.route("users/:id", "users", this.createView);
  2105. },
  2106. createView: function (id) {
  2107. console.log(id);
  2108. }
  2109. });
  2110. </pre>
  2111. <h4>route</h4>
  2112. <p>
  2113. URLのパターンを指定します正規表現で指定することもできます
  2114. </p>
  2115. <pre>
  2116. initialize: function () {
  2117. this.route(/users\/([0-9]+)/, "users", this.createView);
  2118. },
  2119. </pre>
  2120. <h4>name</h4>
  2121. <p>
  2122. 発火する<a href="#Events-eventList">routeイベント</a>の名前<code>route:name</code>を指定します
  2123. </p>
  2124. <h4>callback</h4>
  2125. <p>
  2126. コールバック関数を指定します省略すると上記の<code>name</code>で指定した名前を持つ関数がコールバック関数となります
  2127. </p>
  2128. <pre>
  2129. var Route = Backbone.Router.extend({
  2130. initialize: function () {
  2131. this.route("users", "userFnc");
  2132. },
  2133. userFnc: function () {
  2134. //
  2135. }
  2136. });
  2137. </pre>
  2138. <hr />
  2139. <h3 id="Router-navigate">router.navigate(fragment, [options])</h3>
  2140. <p>
  2141. URLを遷移します
  2142. </p>
  2143. <h4>fragment</h4>
  2144. <p>
  2145. 遷移先のURLを指定します
  2146. </p>
  2147. <h4>options</h4>
  2148. <p>
  2149. このメソッドで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>を発火します
  2150. </p>
  2151. <p>
  2152. また<code>options.replace = true</code>を設定するとブラウザの履歴を新しく追加せずに上書きします
  2153. </p>
  2154. <hr />
  2155. <h2>Backbone.sync</h2>
  2156. <hr />
  2157. <h3 id="Sync">Backbone.sync(method, model, [options])</h3>
  2158. <p>
  2159. モデルやコレクションの属性をバックエンド側とRESTスタイルで非同期に送受信しますこのメソッドはモデルの<a href="#Model-save">saveメソッド</a>などの内部で呼ばれて通信処理を委譲されますこのメソッドをオーバーライドすることで例えばブラウザのLocal Storage保存するように動作を変えることができます
  2160. </p>
  2161. <p>
  2162. バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します通信した結果正常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">syncイベント</a>を発火します
  2163. </p>
  2164. <p>
  2165. 異常を表すHTTPステータスが返って来た場合<a href="#Events-eventList">errorイベント</a>を発火します
  2166. </p>
  2167. <h4>method</h4>
  2168. <p>
  2169. <code>create</code><code>update</code><code>delete</code><code>read</code>のいずれかを指定しますそれぞれ以下のHTTPメソッドで通信します
  2170. <ul>
  2171. <li>create : POST</li>
  2172. <li>update : PUT</li>
  2173. <li>delete : DELETE</li>
  2174. <li>read : GET</li>
  2175. </ul>
  2176. </p>
  2177. <h4>model</h4>
  2178. <p>
  2179. 対象のモデルやコレクションを指定します
  2180. </p>
  2181. <h4>options</h4>
  2182. <p>
  2183. jQuery.ajaxの引数として渡す値です<code>options.success</code><code>options.error</code>のコールバック関数などを指定しますなお正常を表すHTTPステータスが返って来たにも関わらず<code>options.error</code>が呼ばれる場合バックエンド側が送ってきたJSON文字列が正しくないことが考えられます
  2184. </p>
  2185. <hr />
  2186. <h3 id="Sync-ajax">Backbone.ajax(settings)</h3>
  2187. <p>
  2188. jQuery.ajaxへのショートカットですBackbone.js内部でのajaxはこのオブジェクトを参照するのでオーバーライドして独自の処理に変更できます
  2189. </p>
  2190. <hr />
  2191. <h3 id="Sync-emulateHTTP">Backbone.emulateHTTP</h3>
  2192. <p>
  2193. <code>true</code>を設定するとHTTPリクエストのPUTメソッドとDELETEメソッドの代わりにPOSTメソッドを使います本来PUTとDELETEのどちらを使いたかったのかは<code>X-HTTP-Method-Override</code>ヘッダに設定されますバックエンド側の都合でPUTやDELETEが利用できない場合に指定します
  2194. </p>
  2195. <pre>
  2196. POST /user/1 HTTP/1.1
  2197. X-Requested-With: XMLHttpRequest
  2198. X-HTTP-Method-Override: PUT
  2199. Content-Type: application/json
  2200. Accept: application/json, text/javascript, */*; q=0.01
  2201. {"id":1,"name":"Tanaka"}
  2202. </pre>
  2203. <hr />
  2204. <h3 id="Sync-emulateJSON">Backbone.emulateJSON</h3>
  2205. <p>
  2206. <code>true</code>を設定すると、HTTPヘッダのMIMEタイプは<code>application/json</code>ではなく<code>application/x-www-form-urlencoded</code>が設定され、また、データは"model"という名前のパラメータに格納されます。バックエンドとJSON形式でやり取りできない場合に指定します。
  2207. </p>
  2208. <p>
  2209. また、同時に<a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a>を<code>true</code>に設定している場合、PUTメソッドとDELETEメソッドは<code>_method</code>パラメータに格納し、HTTPリクエストはPOSTメソッドを使います。
  2210. </p>
  2211. <pre>
  2212. POST /user/1 HTTP/1.1
  2213. X-Requested-With: XMLHttpRequest
  2214. X-HTTP-Method-Override: PUT
  2215. Content-Type: application/x-www-form-urlencoded
  2216. Accept: application/json, text/javascript, */*; q=0.01
  2217. model:{"id":1,"name":"Tanaka"}
  2218. _method:PUT
  2219. </pre>
  2220. <hr />
  2221. <h2>Backbone.View</h2>
  2222. <hr />
  2223. <h3 id="View-extend">Backbone.View.extend([properties], [classProperties])</h3>
  2224. <p>
  2225. <code>Backbone.View</code> を継承した新しいビューを作ります
  2226. </p>
  2227. <h4>properties</h4>
  2228. <p>
  2229. インスタンスメンバを定義します
  2230. </p>
  2231. <h4>classProperties</h4>
  2232. <p>
  2233. 静的メンバを定義します
  2234. </p>
  2235. <hr />
  2236. <h3 id="View-constractor">new View([options]) または new View([options()])</h3>
  2237. <p>
  2238. コンストラクタです
  2239. </p>
  2240. <h4>options</h4>
  2241. <p>
  2242. <a href="#Model-constractor">モデルのコンストラクタ</a>のoptionsはその場限りの値ですがビューの場合にはインスタンスメンバである<a href="#View-options">optionsプロパティ</a>へ格納されるためいつでも参照することができます
  2243. </p>
  2244. <p>
  2245. なお<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>へ設定されます
  2246. </p>
  2247. <hr />
  2248. <h3 id="View-initialize">view.initialize([options])</h3>
  2249. <p>
  2250. インスタンス生成時に呼ばれます
  2251. </p>
  2252. <h4>options</h4>
  2253. <p>
  2254. <a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です
  2255. </p>
  2256. <hr />
  2257. <h3 id="View-options">view.options</h3>
  2258. <p>
  2259. <a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です
  2260. </p>
  2261. <hr />
  2262. <h3 id="View-el">view.el または view.el()</h3>
  2263. <p>
  2264. ビューに関連付けするDOM要素を設定しますビューはこのDOM要素をルートとするDOMツリーに対してさまざまな処理を行います例えば<a href="#View-$">$メソッド</a>はDOMツリー内から要素を探し<a href="#View-events">eventsプロパティ</a>はイベントの関連付けをDOMツリー内の要素に対して行います
  2265. </p>
  2266. <p>
  2267. DOM要素はページ上に実在していなくても構いませんDOMへのアクセスはコストが高いためむしろメモリ上でDOM要素の編集を終えた後にページ上に追加したほうが効率的です
  2268. </p>
  2269. <hr />
  2270. <h3 id="View-$el">view.$el</h3>
  2271. <p>
  2272. <a href="#View-el">elプロパティ</a>に設定しているDOM要素をjQueryオブジェクトに変換した値へのショートカットです
  2273. </p>
  2274. <hr />
  2275. <h3 id="View-setElement">view.setElement(element, [delegate])</h3>
  2276. <p>
  2277. <a href="#View-el">elプロパティ</a>を設定し直します<a href="#View-events">eventsプロパティ</a>で設定したイベントは古い<a href="#View-el">elプロパティ</a>から削除され新しい<a href="#View-el">elプロパティ</a>へ設定されます
  2278. </p>
  2279. <h4>delegate</h4>
  2280. <p>
  2281. <code>false</code>を設定すると新しい<a href="#View-el">elプロパティ</a>に対して<a href="#View-events">eventsプロパティ</a>で設定したイベントを関連付けしません
  2282. </p>
  2283. <pre>
  2284. var Profile = Backbone.View.extend({
  2285. el: "&lt;h1&gt;",
  2286. events: {
  2287. "click": function (e) {console.log(e.target, "fire!");}
  2288. }
  2289. });
  2290. var profile = new Profile();
  2291. profile.$el.trigger("click"); //-> &lt;h1&gt; fire!
  2292. profile.setElement("&lt;h2&gt;");
  2293. profile.$el.trigger("click"); //-> &lt;h2&gt; fire!
  2294. profile.setElement("&lt;h3&gt;", false);
  2295. profile.$el.trigger("click"); //-> 発火しない
  2296. </pre>
  2297. <hr />
  2298. <h3 id="View-model">view.model</h3>
  2299. <p>
  2300. ビューで使用するモデルを設定します
  2301. </p>
  2302. <hr />
  2303. <h3 id="View-collection">view.collection</h3>
  2304. <p>
  2305. ビューで使用するコレクションを設定します
  2306. </p>
  2307. <hr />
  2308. <h3 id="View-id">view.id または view.id()</h3>
  2309. <p>
  2310. ビューに関連付けされるDOM要素のid属性を設定しますインスタンス生成時に参照されます<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません
  2311. </p>
  2312. <hr />
  2313. <h3 id="View-attributes">view.attributes または view.attributes()</h3>
  2314. <p>
  2315. ビューに関連付けするDOM要素の属性をオブジェクトリテラルで設定しますインスタンス生成時に参照されます<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません
  2316. </p>
  2317. <pre>
  2318. var Profile = Backbone.View.extend({
  2319. tagName: "input",
  2320. attributes: {
  2321. type: "text",
  2322. name: "userName",
  2323. value: "Tanaka"
  2324. }
  2325. });
  2326. var profile = new Profile();
  2327. console.log(profile.el); //-> &lt;input type="text" name="userName" value="Tanaka"&gt;
  2328. </pre>
  2329. <hr />
  2330. <h3 id="View-className">view.className または view.className()</h3>
  2331. <p>
  2332. ビューに関連付けするDOM要素のclass属性を設定しますインスタンス生成時に参照されます<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません
  2333. </p>
  2334. <pre>
  2335. var Profile = Backbone.View.extend({
  2336. className: "alert alert-info"
  2337. });
  2338. var profile = new Profile();
  2339. console.log(profile.el); //-> &lt;div class="alert alert-info"&gt;
  2340. </pre>
  2341. <hr />
  2342. <h3 id="View-tagName">view.tagName または view.tagName()</h3>
  2343. <p>
  2344. ビューに関連付けするDOM要素のタグ名を設定しますインスタンス生成時に参照されます設定しない場合は<code>div</code>が設定されます<a href="#View-constractor">コンストラクタ</a><a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません
  2345. </p>
  2346. <hr />
  2347. <h3 id="View-dollar">view.$(selector)</h3>
  2348. <p>
  2349. jQyeryおよびZeptoのfindメソッドへのショートカットです<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーから<code>selector</code>に合致する子孫要素を返します
  2350. </p>
  2351. <hr />
  2352. <h3 id="View-render">view.render()</h3>
  2353. <p>
  2354. <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに対する操作を記述するメソッドです別のメソッド名でも特に問題はありません
  2355. </p>
  2356. <p>
  2357. <code>this</code>を返却して呼び元でメソッドチェーンを使えるようにすると便利です
  2358. </p>
  2359. <pre>
  2360. var Hoge = Backbone.View.extend({
  2361. render: function () {
  2362. this.$el.html("Hello.");
  2363. return this;
  2364. }
  2365. });
  2366. console.log((new Hoge()).render().$el.html()); //-> Hello.
  2367. </pre>
  2368. <hr />
  2369. <h3 id="View-remove">view.remove()</h3>
  2370. <p>
  2371. <a href="#View-el">elプロパティ</a>に設定されているDOM要素の破棄およびこのビューに関連付けしているイベントを全て破棄します
  2372. </p>
  2373. <hr />
  2374. <h3 id="View-make">view.make(tagName, [attributes], [content])</h3>
  2375. <p>
  2376. DOM要素を作成するためのユーティリティメソッドです
  2377. </p>
  2378. <pre>
  2379. var profile = new Backbone.View();
  2380. var el = profile.make("p", {class: "name"}, "Tanaka");
  2381. console.log(el.outerHTML); //-> &lt;p class="name"&gt;Tanaka&lt;/p&gt;
  2382. </pre>
  2383. <hr />
  2384. <h3 id="View-events">view.events または view.events()</h3>
  2385. <p>
  2386. <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリー上で発火したイベントとコールバック関数との関連付けを設定します
  2387. </p>
  2388. <p>
  2389. <code>{ "イベント名 [セレクタ]", "コールバック関数名" }</code>
  2390. </p>
  2391. <pre>
  2392. var Profile = Backbone.View.extend({
  2393. el: "#hoge",
  2394. events: {
  2395. "click button": "say"
  2396. },
  2397. say: function (e) {
  2398. console.log("Hello.");
  2399. }
  2400. });
  2401. </pre>
  2402. <p>
  2403. <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに新しいDOM要素を追加した場合にもこのeventsプロパティで設定している関連付けは動的に行われます
  2404. </p>
  2405. <p>
  2406. コールバック関数内の<code>this</code>ビューのインスタンスに束縛されますまた実在しないコールバック関数名を指定すると例外をスローします
  2407. </p>
  2408. <hr />
  2409. <h3 id="View-delegateEvents">view.delegateEvents([events])</h3>
  2410. <p>
  2411. <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーで発火するイベントにコールバック関数を関連付けます<a href="#View-events">eventsプロパティ</a>で設定する手段がありますのでこのメソッドを直接呼ぶ場面は限られます
  2412. </p>
  2413. <h4>events</h4>
  2414. <p>
  2415. <a href="#View-events">eventsプロパティ</a>と同じ要領でイベントとコールバック関数の関連付けを指定します
  2416. </p>
  2417. <p>
  2418. ただしこのメソッドでイベントを設定するとeventsに指定した新しいイベント以外は削除されるためイベントを追加する用途には使えません代わりにjQuery等のメソッドで設定する方法が考えられますがこのdelegateEventsメソッドで登録していないイベントは<a href="#View-undelegateEvents">undelegateEventsメソッド</a>で削除されないためメモリリークを起こす可能性があります
  2419. </p>
  2420. <p>
  2421. そのためイベントは動的に必要となるイベントも含めて<a href="#View-events">eventsプロパティ</a>であらかじめ設定しておきます
  2422. </p>
  2423. <hr />
  2424. <h3 id="View-undelegateEvents">view.undelegateEvents()</h3>
  2425. <p>
  2426. <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに関連付けしているイベントを削除しますただし<a href="#View-delegateEvents">delegateEventsメソッド</a>で関連付けしたイベントのみが対象となります
  2427. </p>
  2428. <hr />
  2429. <h3 id="View-cid">view.cid</h3>
  2430. <p>
  2431. インスタンス生成時に自動的に振られるユニークな識別子です
  2432. </p>
  2433. </div>
  2434. </body>
  2435. </html>