/index.html
HTML | 2735 lines | 2371 code | 300 blank | 64 comment | 0 complexity | a02703c3e5763caf34b6b672acf16a5e MD5 | raw file
- <!DOCTYPE HTML>
- <html lang="ja">
- <head>
- <meta charset="UTF-8" />
- <title>Backbone.js 日本語リファレンス</title>
- <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
- <link rel="icon" href="http://backbonejs.org/docs/images/favicon.ico" />
- <style type="text/css">
- @media print {
- .no-print { display: none }
- }
- </style>
- </head>
- <body>
- <div class="container">
-
- <h1>Backbone.js 日本語リファレンス</h1>
-
- <div class="alert alert-info">
- このドキュメントは、<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とは異なる部分があります。
- </div>
-
- <ul class="no-print">
- <li>Events</li>
- <ul>
- <li><a href="#Events-on">on</a></li>
- <li><a href="#Events-off">off</a></li>
- <li><a href="#Events-trigger">trigger</a></li>
- <li><a href="#Events-once">once</a></li>
- <li><a href="#Events-listenTo">listenTo</a></li>
- <li><a href="#Events-stopListening">stopListening</a></li>
- </ul>
- <li>Model</li>
- <ul>
- <li><a href="#Model-extend">extend</a></li>
- <li><a href="#Model-constractor">constractor</a></li>
- <li><a href="#Model-initialize">initialize</a></li>
- <li><a href="#Model-get">get</a></li>
- <li><a href="#Model-set">set</a></li>
- <li><a href="#Model-escape">escape</a></li>
- <li><a href="#Model-has">has</a></li>
- <li><a href="#Model-unset">unset</a></li>
- <li><a href="#Model-clear">clear</a></li>
- <li><a href="#Model-id">id</a></li>
- <li><a href="#Model-idAttribute">idAttribute</a></li>
- <li><a href="#Model-cid">cid</a></li>
- <li><a href="#Model-attributes">attributes</a></li>
- <li><a href="#Model-defaults">defaults</a></li>
- <li><a href="#Model-toJSON">toJSON</a></li>
- <li><a href="#Model-fetch">fetch</a></li>
- <li><a href="#Model-save">save</a></li>
- <li><a href="#Model-destroy">destroy</a></li>
- <li><a href="#Model-validate">validate</a></li>
- <li><a href="#Model-url">url</a></li>
- <li><a href="#Model-urlRoot">urlRoot</a></li>
- <li><a href="#Model-parse">parse</a></li>
- <li><a href="#Model-clone">clone</a></li>
- <li><a href="#Model-isNew">isNew</a></li>
- <li><a href="#Model-change">change</a></li>
- <li><a href="#Model-hasChanged">hasChanged</a></li>
- <li><a href="#Model-changedAttributes">changedAttributes</a></li>
- <li><a href="#Model-previous">previous</a></li>
- <li><a href="#Model-previousAttributes">previousAttributes</a></li>
- </ul>
- <li>Collection</li>
- <ul>
- <li><a href="#Collection-extend">extend</a></li>
- <li><a href="#Collection-constractor">constractor</a></li>
- <li><a href="#Collection-initialize">initialize</a></li>
- <li><a href="#Collection-model">model</a></li>
- <li><a href="#Collection-models">models</a></li>
- <li><a href="#Collection-toJSON">toJSON</a></li>
- <li><a href="#Collection-sync">sync</a></li>
- <li><a href="#Collection-UnderscoreMethods">Underscore Methods</a></li>
- <li><a href="#Collection-add">add</a></li>
- <li><a href="#Collection-remove">remove</a></li>
- <li><a href="#Collection-reset">reset</a></li>
- <li><a href="#Collection-update">update</a></li>
- <li><a href="#Collection-get">get</a></li>
- <li><a href="#Collection-at">at</a></li>
- <li><a href="#Collection-push">push</a></li>
- <li><a href="#Collection-pop">pop</a></li>
- <li><a href="#Collection-unshift">unshift</a></li>
- <li><a href="#Collection-shift">shift</a></li>
- <li><a href="#Collection-slice">slice</a></li>
- <li><a href="#Collection-length">length</a></li>
- <li><a href="#Collection-comparator">comparator</a></li>
- <li><a href="#Collection-sort">sort</a></li>
- <li><a href="#Collection-pluck">pluck</a></li>
- <li><a href="#Collection-where">where</a></li>
- <li><a href="#Collection-url">url</a></li>
- <li><a href="#Collection-parse">parse</a></li>
- <li><a href="#Collection-clone">clone</a></li>
- <li><a href="#Collection-fetch">fetch</a></li>
- <li><a href="#Collection-create">create</a></li>
- </ul>
- <li>Router</li>
- <ul>
- <li><a href="#Router-extend">extend</a></li>
- <li><a href="#Router-constractor">constractor</a></li>
- <li><a href="#Router-initialize">initialize</a></li>
- <li><a href="#Router-routes">routes</a></li>
- <li><a href="#Router-route">route</a></li>
- <li><a href="#Router-navigate">navigate</a></li>
- </ul>
- <li>Sync</li>
- <ul>
- <li><a href="#Sync">Backbone.sync</a></li>
- <li><a href="#Sync-ajax">Backbone.ajax</a></li>
- <li><a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a></li>
- <li><a href="#Sync-emulateJSON">Backbone.emulateJSON</a></li>
- </ul>
- <li>View</li>
- <ul>
- <li><a href="#View-extend">extend</a></li>
- <li><a href="#View-constractor">constractor</a></li>
- <li><a href="#View-initialize">initialize</a></li>
- <li><a href="#View-options">options</a></li>
- <li><a href="#View-el">el</a></li>
- <li><a href="#View-$el">$el</a></li>
- <li><a href="#View-setElement">setElement</a></li>
- <li><a href="#View-model">model</a></li>
- <li><a href="#View-collection">collection</a></li>
- <li><a href="#View-id">id</a></li>
- <li><a href="#View-attributes">attributes</a></li>
- <li><a href="#View-className">className</a></li>
- <li><a href="#View-tagName">tagName</a></li>
- <li><a href="#View-dollar">$ (jQuery or Zepto)</a></li>
- <li><a href="#View-render">render</a></li>
- <li><a href="#View-remove">remove</a></li>
- <li><a href="#View-make">make</a></li>
- <li><a href="#View-events">events</a></li>
- <li><a href="#View-delegateEvents">delegateEvents</a></li>
- <li><a href="#View-undelegateEvents">undelegateEvents</a></li>
- <li><a href="#View-cid">cid</a></li>
- </ul>
- </ul>
-
- <hr />
-
- <h2>Backbone.Events</h2>
- <hr />
-
- <!-- on -->
- <h3 id="Events-on">object.on(events, callback, [context])</h3>
- <p>
- オブジェクトに対して、イベントが発火した時に呼び出したいコールバック関数を設定します。
- </p>
- <h4>events</h4>
- <p>
- イベント名です。半角スペースで区切って複数のイベント名を指定することもできます。<code>all</code> を指定すると、どのイベントが発火した場合にもコールバック関数が呼ばれます。
- </p>
- <p>
- イベント名とコールバック関数のペアをオブジェクトリテラルで設定することもできます。この場合、第2引数はcontextになります。
- </p>
- <pre>
- var func1 = function () {
- console.log(this.msg1);
- };
-
- var func2 = function (model) {
- console.log(this.msg2);
- };
-
- var msg = {
- msg1: "Changed!",
- msg2: "Destroyed!"
- };
-
- var model = new Backbone.Model();
- model.on({change: func1, destroy: func2}, msg);
-
- model.set({name: "Tanaka"}); //-> Changed!
- model.destroy(); //-> Destroyed!
- </pre>
- <h4>callback</h4>
- <p>
- イベントが発火すると呼ばれるコールバック関数です。コールバック関数に渡される引数は、イベントを発火させる<a href="#Events-trigger">triggerメソッド</a>が決定します。
- </p>
- <p>
- Backbone.jsが発火するイベントとコールバック関数の引数の対応は以下の通りです。
- </p>
- <p id="Events-eventList">
- <table class="table table-condensed table-bordered">
- <thead>
- <tr>
- <th>
- イベント
- </th>
- <th>
- 引数
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- add
- </td>
- <td>
- model, collection, options
- </td>
- </tr>
- <tr>
- <td>
- remove
- </td>
- <td>
- model, collection, options
- </td>
- </tr>
- <tr>
- <td>
- reset
- </td>
- <td>
- collection, options
- </td>
- </tr>
- <tr>
- <td>
- sort
- </td>
- <td>
- collection, options
- </td>
- </tr>
- <tr>
- <td>
- change
- </td>
- <td>
- model, options
- </td>
- </tr>
- <tr>
- <td>
- change:[attribute]
- </td>
- <td>
- model, value, options
- </td>
- </tr>
- <tr>
- <td>
- destroy
- </td>
- <td>
- model, collection, options
- </td>
- </tr>
- <tr>
- <td>
- request
- </td>
- <td>
- model, xhr, options
- </td>
- </tr>
- <tr>
- <td>
- sync
- </td>
- <td>
- model, resp, options
- </td>
- </tr>
- <tr>
- <td>
- error
- </td>
- <td>
- model, xhr, options または model, error, options
- </td>
- </tr>
- <tr>
- <td>
- route:[name]
- </td>
- <td>
- *args(URLと関連付けたコールバック関数に渡される引数)
- </td>
- </tr>
- <tr>
- <td>
- all
- </td>
- <td>
- eventName, *args(イベントと関連付けたコールバック関数に渡される引数)
- </td>
- </tr>
- </tbody>
- </table>
- </p>
-
- <h4>context</h4>
- <p>
- コールバック関数の中の<code>this</code>キーワードを束縛します。
- </p>
-
- <hr />
-
- <!-- off -->
- <h3 id="Events-off">object.off([events], [callback], [context])</h3>
- <p>
- 設定されているイベントを削除します。全ての引数を省略すると、オブジェクトに設定されているイベントを全て削除します。
- </p>
- <h4>events</h4>
- <p>
- 削除するイベント名です。半角スペースで区切って複数のイベント名を指定することもできます。省略する場合はnullを渡します。
- </p>
- <h4>callback</h4>
- <p>
- 削除するイベントを、コールバック関数で指定します。省略する場合はnullを渡します。
- </p>
- <h4>context</h4>
- <p>
- 削除するイベントを、<code>this</code> に束縛しているオブジェクトで指定します。省略する場合はnullを渡します。
- </p>
-
- <hr />
-
- <!-- trigger -->
- <h3 id="Events-trigger">object.trigger(events, [*args])</h3>
- <p>
- イベントを発火します。また、<a href="#Events-on">onメソッド</a>で設定したコールバック関数へ渡す引数を指定します。
- </p>
- <h4>events</h4>
- <p>
- 発火させるイベント名です。複数のイベントを空白で区切って指定できます。
- </p>
- <h4>args</h4>
- <p>
- イベントと関連付けされているコールバック関数の引数に渡されます。
- </p>
- <pre>
- var user = {name: "Tanaka"};
- _.extend(user, Backbone.Events);
-
- user.on("Say", function (obj, msg) {
- console.log(obj.name + " said " + msg);
- });
-
- user.trigger("Say", user, "Hello."); //-> Tanaka said Hello.
- </pre>
- <p>
- なお、Backbone.jsのコレクションは、所有するモデルの全てのイベントを監視しており、モデルがイベントを発火すると同じイベントを発火します。
- </p>
- <pre>
- var User = Backbone.Model.extend({
- validate: function (attr) {
- if (_.isEmpty(attr.name)) {
- return "invalid!";
- }
- }
- });
- var user = new User();
-
- var users = new Backbone.Collection();
- users.add(user);
- users.on("all", function (eventName) {
- console.log(eventName);
- });
-
- user.set({name:"tanaka"});
- //-> change:name
- //-> change
-
- user.set({name:""});
- //-> error
- </pre>
-
- <p>
- Backbone.jsのメソッドと発火されるイベントの対応は以下の通りです。
- </p>
- <p>
- <table class="table table-bordered table-condensed">
- <thead>
- <tr>
- <th>
- メソッド / イベント
- </th>
- <td style="width:60px">
- add
- </td>
- <td style="width:60px">
- remove
- </td>
- <td style="width:60px">
- reset
- </td>
- <td style="width:60px">
- sort
- </td>
- <td style="width:60px">
- change
- </td>
- <td style="width:60px">
- destroy
- </td>
- <td style="width:60px">
- request
- </td>
- <td style="width:60px">
- sync
- </td>
- <td style="width:60px">
- error
- </td>
- <td style="width:60px">
- route
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- model.set
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.unset
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.clear
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.fetch
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sync -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.save
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sync -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.destroy
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- request -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sync -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.validate
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- model.change
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.add
- </td>
- <td> <!-- add -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.push
- </td>
- <td> <!-- add -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.unshift
- </td>
- <td> <!-- add -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.remove
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.pop
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.shift
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.sort
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.reset
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.fetch
- </td>
- <td> <!-- add -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sync -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- collection.create
- </td>
- <td> <!-- add -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- sync -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- error -->
- <div class="icon icon-ok">
- </td>
- <td> <!-- route -->
- </td>
- </tr>
- <tr>
- <td>
- router.navigate
- </td>
- <td> <!-- add -->
- </td>
- <td> <!-- remove -->
- </td>
- <td> <!-- reset -->
- </td>
- <td> <!-- sort -->
- </td>
- <td> <!-- change -->
- </td>
- <td> <!-- destroy -->
- </td>
- <td> <!-- request -->
- </td>
- <td> <!-- sync -->
- </td>
- <td> <!-- error -->
- </td>
- <td> <!-- route -->
- <div class="icon icon-ok">
- </td>
- </tr>
- </tbody>
- </table>
- </p>
-
- <hr />
-
- <!-- once -->
- <h3 id="Events-on">object.once(events, callback, [context])</h3>
- <p>
- </p>
-
- <hr />
-
- <!-- listenTo -->
- <h3 id="Events-listenTo">object.listenTo(other, event, callback)</h3>
- <p>
- </p>
-
- <hr />
-
- <!-- stopListening -->
- <h3 id="Events-stopListening">object.stopListening([other], [event], [callback])</h3>
- <p>
- </p>
-
- <hr />
-
- <h2>Backbone.Model</h2>
- <hr />
-
- <!-- extend -->
- <h3 id="Model-extend">Backbone.Model.extend([properties], [classProperties])</h3>
- <p>
- <code>Backbone.Model</code> を継承した新しいモデルを作ります。
- </p>
- <h4>properties</h4>
- <p>
- インスタンスメンバを定義します。
- </p>
- <pre>
- var User = Backbone.Model.extend({
- say: function () {
- console.log("Hello.");
- }
- });
-
- var user = new User();
- user.say(); //-> Hello.
- </pre>
- <h4>classProperties</h4>
- <p>
- 静的メンバを定義します。以下はFactoryパターンの例です。
- </p>
- <pre>
- var User = Backbone.Model.extend({
- openFile: function () {
- console.log(this.canOpen);
- }
- }, {
- create: function (type) {
- if (type === "admin") {
- return new AdminUser;
- } else {
- return new NormalUser;
- }
- }
- });
-
- var AdminUser = User.extend({
- canOpen: true
- });
-
- var NormalUser = User.extend({
- canOpen: false
- });
-
- var user1 = User.create("admin");
- var user2 = User.create("normal");
-
- user1.openFile(); //-> true
- user2.openFile(); //-> false
- </pre>
-
- <hr />
-
- <!-- constractor -->
- <h3 id="Model-constractor">new Model([attributes], [options])</h3>
- <p>
- コンストラクタです。
- </p>
- <h4>attributes</h4>
- <p>モデルの属性へ設定したい値をオブジェクトリテラルで指定します。</p>
- <pre>
- var Model = Backbone.Model.extend();
- var model = new Model({name: "Tanaka", country: "Japan"});
- </pre>
-
- <h4>options</h4>
- <p>
- <code>options.parse = true</code> を設定すると、<a href="#Model-parse">parseメソッド</a>を実行します。
- </p>
- <pre>
- var User = Backbone.Model.extend({
- parse: function (response) {
- return response.user;
- }
- });
- var user = new User({user: {name: "Tanaka"}}, {parse: true});
-
- console.log(user.toJSON()); //-> {name: "Tanaka"}
- </pre>
- <p>
- <code>options.collection</code> にコレクションを設定すると、<a href="#Model-url">urlメソッド</a>でモデルのURLをすぐに取得できるようになります。ただし、この時点ではモデルからコレクションへの一方的な参照がなされているだけで、コレクションにモデルが格納されたのではありません。
- </p>
- <pre>
- var users = new Backbone.Collection();
- users.url = "/hoge";
-
- var User = Backbone.Model.extend();
- var user = new User({id: 1, name: "Tanaka"}, {collection: users});
-
- console.log(user.url()); //-> /hoge/1
- console.log(users.length); //-> 0
- </pre>
- <p>
- その他に、<a href="#Model-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます。
- </p>
-
- <hr />
-
- <!-- initialize -->
- <h3 id="Model-initialize">model.initialize([attributes], [options])</h3>
- <p>
- インスタンス生成時に呼ばれます。
- </p>
- <h4>attributes</h4>
- <p><a href="#Model-constractor">コンストラクタ</a>のattributesへ渡した値です。</p>
- <h4>options</h4>
- <p><a href="#Model-constractor">コンストラクタ</a>のoptionsへ渡した値です。</p>
-
- <hr />
-
- <!-- get -->
- <h3 id="Model-get">model.get(attribute)</h3>
- <p>
- モデルの属性値を取得します。
- </p>
-
- <hr />
-
- <!-- set -->
- <h3 id="Model-set">model.set(key, value, [options]) または set(attributes, [options])</h3>
- <p>
- モデルの属性値を設定します。属性値が現在の属性値と異なる場合、<a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
- </p>
- <h4>key, value</h4>
- <p>
- keyとvalueのペアで指定します。
- </p>
- <pre>
- model.set("name", "Tanaka");
- model.set("country", "Japan");
- </pre>
- <h4>attributes</h4>
- <p>
- オブジェクトリテラルで指定することもできます。
- </p>
- <pre>
- model.set({name: "Tanaka", country: "Japan"});
- </pre>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- validate: function (attrs) {
- if (_.isEmpty(attrs.name)) {
- return "invalid!";
- }
- }
- });
-
- var model = new Model();
-
- model.on("change", function () {
- console.log("changed!");
- });
-
- model.on("error", function (model, error) {
- console.log(error);
- });
-
- model.set({name: "Tanaka"}); //-> "changed!"
- model.set({name: "Suzuki"}, {silent: true});
-
- model.set({name: ""}); //-> "invalid!"
- model.set({name: ""}, {silent: true});
- </pre>
-
- <hr />
-
- <!-- escape -->
- <h3 id="Model-escape">model.escape(attribute)</h3>
- <p>
- <a href="#Model-get">getメソッド</a>と同じくモデルの属性値を取得しますが、HTMLをエスケープします。
- </p>
-
- <hr />
-
- <!-- has -->
- <h3 id="Model-has">model.has(attribute)</h3>
- <p>
- モデルが属性そのものを持っているかどうかを返します。
- </p>
- <pre>
- var model = new Backbone.Model({name: ""});
-
- console.log(model.has("name")); //-> true
- console.log(model.has("country")); //-> false
- </pre>
-
- <hr />
-
- <!-- unset -->
- <h3 id="Model-unset">model.unset(attribute, [options])</h3>
- <p>
- モデルから属性そのものを削除します。存在する属性であれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- clear -->
- <h3 id="Model-clear">model.clear([options])</h3>
- <p>
- モデルから属性そのものを全て削除します。属性が1つでも存在すれば <a href="#Events-eventList">changeイベント</a>を発火します。また、<a href="#Model-validate">validateメソッド</a>を実行します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- id -->
- <h3 id="Model-id">model.id</h3>
- <p>
- モデルを一意に識別するための識別子です。コレクションの中からモデルを取り出す際のキーとして使用したり、モデルごとに決まるURLの一部に使用されたりします。
- </p>
- <p>
- idは通常、<a href="#Model-fetch">fetchメソッド</a>や<a href="#Model-save">saveメソッド</a>によってバックエンド側で決定されますが、クライアントサイドで手動でidを設定する場合には、<a href="#Model-set">setメソッド</a>でモデルの属性値として設定します。モデルのidプロパティは自動的にその値を参照してくれます。
- </p>
- <pre>
- var model = new Backbone.Model({
- id: 1,
- name: "Tanaka"
- });
-
- console.log(model.toJSON()); //-> {id: 1, name: "Tanaka"}
- console.log(model.id); //-> 1
- </pre>
- <p>
- <a href="#Model-set">setメソッド</a>で設定せずに、idプロパティに直接設定することも可能ですが、モデルの属性値は変化しませんので注意が必要です。
- </p>
- <pre>
- var model = new Backbone.Model({
- name: "Tanaka"
- });
- model.id = 1;
-
- console.log(model.id); //-> 1
- console.log(model.toJSON()); //-> {name: "Tanaka"}
-
- model = new Backbone.Model({
- id: 1,
- name: "Tanaka"
- });
- model.id = 2;
-
- console.log(model.id); //-> 2
- console.log(model.toJSON()); //-> {id: 1, name: "Tanaka"}
- </pre>
-
- <hr />
-
- <!-- idAttribute -->
- <h3 id="Model-idAttribute">model.idAttribute</h3>
- <p>
- モデルの属性の"id"というネーミングは変更できます。例えばバックエンドのデータベースのカラム名と合わせると便利です。ただし、モデルの<a href="#Model-id">idプロパティ</a>は"id"のままです。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- idAttribute: "user_id"
- });
-
- var model = new Model({
- user_id: 1,
- name: "Tanaka"
- });
-
- console.log(model.id); //-> 1
- console.log(model.toJSON()); //-> {user_id: 1, name: "Tanaka"}
- console.log(model.user_id); //-> undefined
- </pre>
-
- <hr />
-
- <!-- cid -->
- <h3 id="Model-cid">model.cid</h3>
- <p>
- インスタンス生成時に自動的に振られるユニークな識別子です。
- </p>
-
- <hr />
-
- <!-- attributes -->
- <h3 id="Model-attributes">model.attributes</h3>
- <p>
- モデルの属性が格納されているプロパティです。属性に値を設定する場合、このプロパティを直接更新することでも可能ですが、イベントの発火などを機能させるために<a href="#Model-set">setメソッド</a>を使用します。
- </p>
-
- <hr />
-
- <!-- defaults -->
- <h3 id="Model-defaults">model.defaults または model.defaults()</h3>
- <p>
- モデルの属性の初期値を設定します。関数として定義することも可能です。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- defaults: function () {
- return {
- name: "Tanaka",
- country: "Japan"
- }
- }
- });
- var model = new Model();
-
- console.log(model.toJSON()); //-> {name: "Tanaka", country: "Japan"}
- </pre>
-
- <hr />
-
- <!-- toJSON -->
- <h3 id="Model-toJSON">model.toJSON()</h3>
- <p>
- <a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトを返します。JSON文字列に変換するのではありません。
- </p>
- <pre>
- var model = new Backbone.Model({
- name: "Tanaka"
- });
-
- console.log(model.toJSON()); //-> { name: "Tanaka"}
- console.log(JSON.stringify(model.attributes)); //-> "{"name": "Tanaka"}"
- </pre>
-
- <hr />
-
- <!-- fetch -->
- <h3 id="Model-fetch">model.fetch([options])</h3>
- <p>
- バックエンドとHTTPリクエストのGETメソッドで通信して、リソースの取得を要求します。取得結果を<a href="#Model-parse">parseメソッド</a>で変換してからモデルの属性に設定します。<a href="#Model-validate">validateメソッド</a>も実行します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
- </p>
- <p>
- 通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。また、取得結果をモデルの属性に設定する際に、fetch前の値と異なる場合には <a href="#Events-eventList">changeイベント</a>を発火します。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- save -->
- <h3 id="Model-save">model.save([key, value], [options]) または model.save([attributes], [options])</h3>
- <p>
- バックエンドとHTTPリクエストのPOSTまたはPUTメソッドで通信して、リソースの新規作成または更新を要求します。モデルの<a href="#Model-id">idプロパティ</a>が設定されていない場合はPOSTメソッド、設定されている場合はPUTメソッドで通信します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
- </p>
-
- <p>
- まず、モデルに設定されている属性値、およびこのメソッドの引数に渡した属性値は、<a href="#Model-validate">validateメソッド</a>で検証されます。検証結果に問題があった場合、このメソッドはfalseを返却します。次に、このメソッドの引数に属性値を渡したのであればモデルの属性値に反映され、反映前と反映後とで値が変化するのであれば <a href="#Events-eventList">changeイベント</a>を発火します。ただし、後述する <code>options.wait = true</code> を設定している場合には、属性値の反映は保留され、<a href="#Events-eventList">changeイベント</a>も発火しません。
- </p>
- <p>
- バックエンドとの通信開始時に<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>を発火します。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">changeイベント</a>を発火しません。
- </p>
- <p>
- このメソッドの引数に渡した属性値はモデルの属性値へ即座に反映されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから反映するようにタイミングを変えることができます。
- </p>
-
- <hr />
-
- <!-- destroy -->
- <h3 id="Model-destroy">model.destroy([options])</h3>
- <p>
- バックエンドとHTTPリクエストのDELETEメソッドで通信して、リソースの破棄を要求します。リクエスト先のURLは<a href="#Model-url">urlメソッド</a>で決まります。
- </p>
- <p>
- 通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。<a href="#Events-eventList">destroyイベント</a>は発火しません。
- </p>
- <p>
- このメソッドは、通信結果に関わらずjqXHRオブジェクトを返します。ただし、モデルに<a href="#Model-id">idプロパティ</a>が設定されていない場合は通信せず、このメソッドはfalseを返します。この時、<a href="#Events-eventList">destroyイベント</a>を発火します。モデルがコレクションに所有されている場合は、自動的にコレクションからも削除されます。
- </p>
- <h4>options</h4>
- <p>
- モデルはコレクションから即座に削除されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから削除するようにタイミングを変えることができます。
- </p>
-
- <hr />
-
- <!-- validate -->
- <h3 id="Model-validate">model.validate(attributes)</h3>
- <p>
- モデルの属性を操作する直前に呼ばれるメソッドで、値を検証する処理を記述します。
- </p>
- <p>
- このメソッドは、検証に合格した場合には何も返却しないようにします。検証結果に問題がある場合、エラーメッセージの文字列や、エラー情報を格納したオブジェクトなど好みの値を返却します。この返却値は、発火する<a href="#Events-eventList">errorイベント</a>の引数に設定されます。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- validate: function (attrs) {
- if (_.isEmpty(attrs.name)) {
- return "Invalid!";
- }
- }
- });
-
- var model = new Model();
-
- model.on("error", function (model, error) {
- console.log(error);
- });
-
- model.set({name: ""}); //-> "Invalid!"
- </pre>
- <p>
- 上の例では、<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>は発火します。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- validate: function (attrs) {
- if (_.isEmpty(attrs.name)) {
- return "Invalid!";
- }
- }
- });
-
- var model = new Model();
-
- model.set({name: ""} , {
- error: function (model, error) {
- console.log(error);
- }});
- //-> "Invalid!"
- </pre>
-
- <hr />
-
- <!-- url -->
- <h3 id="Model-url">model.url()</h3>
- <p>
- モデルのURLを取得します。
- </p>
- <p>
- <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>が優先されます。
- </p>
- <pre>
- var Model = Backbone.Model.extend();
-
- var Collection = Backbone.Collection.extend({
- url: "/users"
- })
-
- var model = new Model({id: 1});
- var collection = new Collection(model);
-
- console.log(model.url()); //-> "/users/1"
-
- model.urlRoot = "/user";
- console.log(model.url()); //-> "/user/1"
- </pre>
-
- <hr />
-
- <!-- urlRoot -->
- <h3 id="Model-urlRoot">model.urlRoot または model.urlRoot()</h3>
- <p>
- モデルの<a href="#Model-url">urlメソッド</a>の内部で使用されます。関数として定義することも可能です。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- urlRoot: function () {
- return "/users";
- }
- });
- var model = new Model({id: 1});
-
- console.log(model.url()); //-> "/users/1"
- </pre>
-
- <hr />
-
- <!-- parse -->
- <h3 id="Model-parse">model.parse(response, xhr)</h3>
- <p>
- <a href="#Model-fetch">fetchメソッド</a>や<a href="#Model-save">saveメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれます。サーバから取得したデータをそのまま属性に取り込むのではなく、加工してから取り込みたい場合に利用します。
- </p>
- <h4>response</h4>
- <p>
- サーバが返したデータです。
- </p>
- <pre>
- var Model = Backbone.Model.extend({
- parse: function (response) {
- return response.user;
- }
- });
-
- var model = new Model();
- model.fetch(); // サーバのレスポンスが {user: {name: "Tanaka"}} と仮定
- </pre>
- <p>
- また、モデルのインスタンス生成時に、コンストラクタで <code>options.parse = true</code> を指定した場合にも実行されます。
- </p>
-
- <hr />
-
- <!-- clone -->
- <h3 id="Model-clone">model.clone()</h3>
- <p>
- 属性が全て同じであるモデルを複製します。
- </p>
-
- <hr />
-
- <!-- isNew -->
- <h3 id="Model-isNew">model.isNew()</h3>
- <p>
- モデルの<a href="#Model-id">idプロパティ</a>が未設定(nullまたはundefined)かどうかを返します。
- </p>
-
- <hr />
-
- <!-- change -->
- <h3 id="Model-change">model.change()</h3>
- <p>
- モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある属性に <a href="#Events-eventList">changeイベント</a>を発火します。
- </p>
- <pre>
- var user = new Backbone.Model();
-
- user.on("change:name", function (model, value) {
- console.log(value); //-> "Tanaka"
- })
-
- user.on("change:country", function (model, value) {
- console.log(value); //-> "Japan"
- })
-
- user.on("change", function (model) {
- console.log(model.toJSON()); //-> {name: "Tanaka", country: "Japan"}
- })
-
- user.set({name: "Tanaka", country: "Japan"}, {silent: true});
-
- user.change();
- </pre>
-
- <hr />
-
- <!-- hasChanged -->
- <h3 id="Model-hasChanged">model.hasChanged([attribute])</h3>
- <p>
- モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、指定した属性がその状態にあるかどうかを返します。
- </p>
- <pre>
- var model = new Backbone.Model();
-
- model.set({name: "Suzuki"}, {silent: true});
- console.log(model.hasChanged("name")); //-> true
-
- model.set({name: "Tanaka"});
- console.log(model.hasChanged("name")); //-> false
- </pre>
- <p>
- なお、発火しないまま残っている <a href="#Events-eventList">changeイベント</a>は、<a href="#Model-change">changeメソッド</a>でまとめて発火できます。
- </P>
- <h4>attribute</h4>
- <p>
- 対象の属性を指定します。省略すると、該当する属性が1つでもあればtrueを返します。
- </p>
-
- <hr />
-
- <!-- changedAttributes -->
- <h3 id="Model-changedAttributes">model.changedAttributes([attributes])</h3>
- <p>
- モデルの属性を <code>options.silent = true</code> で設定すると <a href="#Events-eventList">changeイベント</a>が発火しないまま属性が設定された状態となります。このメソッドは、その状態にある全ての属性を複製したオブジェクトを返します。該当する属性が無い場合はfalseを返します。
- </p>
- <h4>attributes</h4>
- <p>
- 指定したattributesと、最後に <a href="#Events-eventList">changeイベント</a>が発火した時点での属性とを比較して、異なる属性を返します。該当する属性が無い場合はfalseを返します。
- </p>
- <pre>
- var user = new Backbone.Model();
-
- user.set({
- name: "Tanaka",
- address: "Japan"
- });
-
- user.set({name: "Suzuki"}, {silent:true});
-
- console.log(user.changedAttributes({name: "Tanaka", address: "Japan"})); //-> false
- console.log(user.changedAttributes({name: "Tanaka", address: "China"})); //-> {address: "china"}
- console.log(user.changedAttributes({name: "Suzuki"})); //-> {name: "Suzuki"}
- console.log(user.changedAttributes({name: "Yamada"})); //-> {name: "Yamada"}
- </pre>
-
- <hr />
-
- <!-- previous -->
- <h3 id="Model-previous">model.previous(attribute)</h3>
- <p>
- 変更前の属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。
- </p>
- <pre>
- var user = new Backbone.Model({name: "Tanaka"});
-
- user.on("change", function (model) {
- console.log(model.previous("name")); //-> "Tanaka"
- console.log(model.get("name")); //-> "Suzuki"
- })
-
- user.set({name: "Suzuki"});
- </pre>
-
- <hr />
-
- <!-- previousAttributes -->
- <h3 id="Model-previousAttributes">model.previousAttributes()</h3>
- <p>
- 変更前の全ての属性を取得します。<a href="#Events-eventList">changeイベント</a>にバインドしたコールバック関数の中でのみ使用できます。
- </p>
- <pre>
- var user = new Backbone.Model({name: "Tanaka", country: "Japan"});
-
- user.on("change", function (model) {
- console.log(model.previousAttributes()); //-> {name: "Tanaka", country: "Japan"}
- console.log(model.toJSON()); //-> {name: "Suzuki", country: "China"}
- })
-
- user.set({name: "Suzuki", country: "China"});
- </pre>
-
-
- <hr />
-
- <h2>Backbone.Collection</h2>
- <hr />
-
- <!-- extend -->
- <h3 id="Collection-extend">Backbone.Collection.extend([properties], [classProperties])</h3>
- <p>
- <code>Backbone.Collection</code> を継承した新しいコレクションを作ります。
- </p>
- <h4>properties</h4>
- <p>
- インスタンスメンバを定義します。
- </p>
- <h4>classProperties</h4>
- <p>
- 静的メンバを定義します。
- </p>
-
- <hr />
-
- <!-- constractor -->
- <h3 id="Collection-constractor">new Collection([models], [options])</h3>
- <p>
- コンストラクタです。
- </p>
- <h4>models</h4>
- <p>
- コレクションに格納するモデルを指定します。複数のモデルは配列で指定します。
- </p>
- <pre>
- var User = Backbone.Model.extend();
- var user1 = new User({name: "Tanaka"});
- var user2 = new User({name: "Suzuki"});
-
- var users = new Backbone.Collection([user1, user2]);
-
- console.log(users.length); //-> 2
- </pre>
- <h4>options</h4>
- <p>
- <code>options.model</code>で<a href="#Collection-model">modelプロパティ</a>を設定できます。
- </p>
- <p>
- <code>options.comparator</code>で<a href="#Collection-comparator">comparatorメソッド</a>を設定できます。すでにクラスで定義済みの<a href="#Collection-comparator">comparatorメソッド</a>を無効にする場合は<code>options.comparator=false</code>とします。
- </p>
- <p>
- <code>options.parse=true</code>を設定すると、<a href="#Collection-parse">parseメソッド</a>を実行します。
- </p>
- <p>
- その他、<a href="#Collection-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用できます。
- </p>
-
- <hr />
-
- <!-- initialize -->
- <h3 id="Collection-initialize">collection.initialize([models], [options])</h3>
- <p>
- インスタンス生成時に呼ばれます。
- </p>
- <h4>models</h4>
- <p><a href="#Collection-constractor">コンストラクタ</a>のmodelsへ渡した値です。</p>
- <h4>options</h4>
- <p><a href="#Collection-constractor">コンストラクタ</a>のoptionsへ渡した値です。</p>
-
- <hr />
-
- <!-- model -->
- <h3 id="Collection-model">collection.model</h3>
- <p>
- コレクションに格納するモデルのクラス(関数オブジェクト)を指定します。<a href="#Collection-constractor">コンストラクタ</a>や<a href="#Collection-add">addメソッド</a>などの引数でオブジェクトリテラルを渡すと、このプロパティで指定したクラスに変換されます。
- </p>
-
- <hr />
-
- <!-- models -->
- <h3 id="Collection-models">collection.models</h3>
- <p>
- モデルが格納されているプロパティです。ただし、通常はこのプロパティを直接参照するのではなく、<a href="#Collection-get">getメソッド</a>や<a href="#Collection-at">atメソッド</a>、<a href="#Collection-UnderscoreMethods">Underscore.jsのメソッド</a>を利用します。
- </p>
-
- <hr />
-
- <!-- toJSON -->
- <h3 id="Collection-toJSON">collection.toJSON()</h3>
- <p>
- 各モデルの<a href="#Model-attributes">attributesプロパティ</a>を複製したオブジェクトの配列を返します。JSON文字列に変換するのではありません。
- </p>
-
- <hr />
-
- <!-- sync -->
- <h3 id="Collection-sync">collection.sync(method, collection, [options])</h3>
- <p>
- <a href="#Sync">Backbone.syncメソッド</a>を実行します。<a href="#Collection-fetch">fetchメソッド</a>の内部で呼ばれます。
- </p>
- <p>
- このメソッドを直接呼ぶ用途としては、コレクションに格納しているモデルを一括してバックエンドへ送る場合が考えられます。
- </p>
- <pre>
- var Users = Backbone.Collection.extend({
- createAll: function () {
- var self = this;
- options = {
- success: function(models) {
- self.reset(models);
- }
- };
- return this.sync('create', this, options);
- }
- });
- </pre>
-
- <hr />
-
- <!-- UnderscoreMethods -->
- <h3 id="Collection-UnderscoreMethods">Underscore Methods</h3>
- <p>
- <a href="#Collection-models">modelsプロパティ</a>に対して、Underscore.jsの以下のメソッドを使用できます。
- </p>
- <p>
- <ul>
- <li>forEach (each)</li>
- <li>map (collect)</li>
- <li>reduce (foldl, inject)</li>
- <li>reduceRight (foldr)</li>
- <li>find (detect)</li>
- <li>filter (select)</li>
- <li>reject</li>
- <li>every (all)</li>
- <li>some (any)</li>
- <li>include (contains)</li>
- <li>invoke</li>
- <li>max</li>
- <li>min</li>
- <li>sortedIndex</li>
- <li>shuffle</li>
- <li>toArray</li>
- <li>size</li>
- <li>first (head, take)</li>
- <li>initial</li>
- <li>rest (tail)</li>
- <li>last</li>
- <li>without</li>
- <li>indexOf</li>
- <li>lastIndexOf</li>
- <li>isEmpty</li>
- <li>chain</li>
- <li>groupBy</li>
- <li>countBy</li>
- <li>sortBy</li>
- </ul>
- </p>
-
- <hr />
-
- <!-- add -->
- <h3 id="Collection-add">collection.add(models, [options])</h3>
- <p>
- コレクションにモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
- </p>
- <pre>
- var User = Backbone.Model.extend({
- validate: function (attr) {
- if (_.isEmpty(attr.name)) {
- return "invalid!";
- }
- }
- });
-
- var Users = Backbone.Collection.extend({
- model: User
- });
- var users = new Users();
-
- users.add({name: ""}); //-> Error: Can't add an invalid model to a collection
- </pre>
- <p>
- このメソッドで追加したモデルは<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メソッドによるソートでは発火しません。
- </P>
- <pre>
- var Users = Backbone.Collection.extend({
- comparator: function (model) {
- return model.id;
- }
- });
- var users = new Users;
- users.add({id: 1});
- users.add({id: 3});
- users.add({id: 2});
-
- console.log(users.at(0).id); //-> 1
- console.log(users.at(1).id); //-> 2
- console.log(users.at(2).id); //-> 3
- </pre>
- <p>
- 最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
- </p>
- <p>
- このメソッドはコレクション自身を返却します。
- </p>
- <h4>models</h4>
- <p>
- 複数のモデルを追加する場合は配列で指定します。
- </p>
- <h4>options</h4>
- <p>
- 同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合には追加されませんが、<code>options.merge = true</code> を設定すると、すでに格納されているモデルの属性値を上書きすることができます。
- </p>
- <pre>
- var users = new Backbone.Collection({id: 1, name: "Tanaka"});
-
- users.add({id: 1, name: "Suzuki"});
- console.log(JSON.stringify(users)); //-> [{"id":1,"name":"Tanaka"}]
-
- users.add({id: 1, name: "Suzuki"}, {merge: true});
- console.log(JSON.stringify(users)); //-> [{"id":1,"name":"Suzuki"}]
- </pre>
- <p>
- <code>options.at</code>でモデルを追加する位置を<a href="#Collection-models">modelsプロパティ</a>のインデックスで指定することができます。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {id: 1},
- {id: 2},
- {id: 3},
- {id: 4},
- {id: 5}
- ]);
-
- console.log(users.pluck("id")); //-> [1, 2, 3, 4, 5]
-
- users.add([{id: "A"}, {id: "B"}], {at: 3});
-
- console.log(users.pluck("id")); //-> [1, 2, 3, "A", "B", 4, 5]
- </pre>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
- </p>
- <p>
- <code>options.sort = false</code> を設定するとソートしません。
- </p>
-
- <hr />
-
- <!-- remove -->
- <h3 id="Collection-remove">collection.remove(models, [options])</h3>
- <p>
- コレクションからモデルを削除します。モデルそのものは破棄しません。削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火して、コールバック関数の引数<code>options.index</code>には削除したモデルの<a href="#Collection-models">modelsプロパティ</a>上のインデックスが設定されます。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {id: 1, name: "Tanaka"},
- {id: 2, name: "Suzuki"},
- {id: 3, name: "Nakata"}
- ]);
-
- users.on("remove", function(model, collection, options) {
- console.log(options.index);
- });
-
- users.remove({id: 2});
- //-> 1
- </pre>
- <p>
- 上記の<code>options.index</code>の注意点として、複数のモデルを削除した場合に得られるインデックスはイベントが発火した時点でのものであり、このremoveメソッドを呼んだ時点でのインデックスではありません。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {id: 1, name: "Tanaka"},
- {id: 2, name: "Suzuki"},
- {id: 3, name: "Nakata"}
- ]);
-
- users.on("remove", function(model, collection, options) {
- console.log(options.index);
- });
-
- users.remove([{id: 2}, {id: 3}]);
- //-> 1
- //-> 1
- </pre>
- <p>
- このメソッドはコレクション自身を返却します。
- </p>
- <h4>models</h4>
- <p>
- 削除するモデルを指定する方法は3通りあります。モデルのインスタンスそのものを渡す方法、<a href="#Model-id">idプロパティ</a>の値を渡す方法、"id"という名前のプロパティを持つオブジェクトを渡す方法です。
- </p>
- <p>
- 複数のモデルを削除する場合は配列で指定します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- reset -->
- <h3 id="Collection-reset">collection.reset([models], [options])</h3>
- <p>
- 格納しているモデルを全て入れ替えます。<a href="#Events-eventList">resetイベント</a>を発火します。<a href="#Events-eventList">resetイベント</a>に関連付けしたコールバック関数の中では、入れ替え前のモデルの配列を<code>options.previousModels</code>から参照できます。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {name: "Tanaka"},
- {name: "Suzuki"}
- ]);
-
- users.on("reset", function (collection, options) {
- console.log(options.previousModels[0].get("name"));
- console.log(options.previousModels[1].get("name"));
- });
-
- users.reset({name: "Sasaki"});
- //-> Tanaka
- //-> Suzuki
- </pre>
- <h4>models</h4>
- <p>
- 新しく格納するモデルを配列で指定します。省略すると、コレクションは空になります。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">resetイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- update -->
- <h3 id="Collection-update">collection.update(models, [options])</h3>
- <p>
- </p>
-
- <hr />
-
- <!-- get -->
- <h3 id="Collection-get">collection.get(id) または collection.get(model)</h3>
- <p>
- コレクションに格納しているモデルを<a href="#Model-id">idプロパティ</a>の値、または"id"という名前のプロパティを持つオブジェクト、または<a href="#Model-cid">cidプロパティ</a>の値をキーに参照します。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {id: 1, name: "Tanaka"},
- {id: 2, name: "Suzuki"},
- {id: 3, name: "Nakata"},
- ]);
-
- console.log(users.get(2).get("name")); //-> Suzuki
- console.log(users.get({id: 2}).get("name")); //-> Suzuki
- </pre>
-
- <hr />
-
- <!-- at -->
- <h3 id="Collection-at">collection.at(index)</h3>
- <p>
- コレクションに格納しているモデルを<a href="#Model-models">modelsプロパティ</a>のインデックスで参照します。なお、<a href="#Model-models">modelsプロパティ</a>の格納順は、ソートされることにより、<a href="#Collection-add">addメソッド</a>で追加した順とは限りません。
- </p>
- <pre>
- var Users = Backbone.Collection.extend({
- comparator: function (model) {
- return model.id;
- }
- });
- var users = new Users();
- users.add({id:1});
- users.add({id:3});
- users.add({id:2});
-
- console.log(users.at(0).id); //-> 1
- console.log(users.at(1).id); //-> 2
- console.log(users.at(2).id); //-> 3
- </pre>
-
- <hr />
-
- <!-- push -->
- <h3 id="Collection-push">collection.push(model, [options])</h3>
- <p>
- コレクションの末尾にモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
- </p>
- <p>
- <a href="#Collection-comparator">comparatorメソッド</a>を定義している場合にはソートします。<a href="#Collection-sort">sortメソッド</a>によるソートでは<a href="#Events-eventList">sortイベント</a>を発火しますが、このpushメソッドによるソートでは発火しません。
- </P>
- <p>
- 最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
- </p>
- <p>
- このメソッドは追加したモデルを返却します。このメソッドは<a href="#Model-add">addメソッド</a>に別名を付けただけに思えますが、返却する値に違いがあります。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
- </p>
- <p>
- <code>options.sort = false</code> を設定するとソートしません。
- </p>
-
- <hr />
-
- <!-- pop -->
- <h3 id="Collection-pop">collection.pop([options])</h3>
- <p>
- コレクションの末尾のモデルを削除します。モデルそのものは破棄しません。削除されたモデルとこのコレクションは<a href="#Events-eventList">removeイベント</a>を発火します。
- </p>
- <p>
- このメソッドは削除したモデルを返却します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- unshift -->
- <h3 id="Collection-unshift">collection.unshift(model, [options])</h3>
- <p>
- コレクションの先頭にモデルを追加します。引数にオブジェクトリテラルを渡すと<a href="#Collection-model">modelプロパティ</a>で指定されているモデルのクラス(関数オブジェクト)に変換しますが、モデルの<a href="#Model-validate">validateメソッド</a>の検証結果に問題がある場合には例外をスローします。
- </p>
- <p>
- このメソッドでモデルを追加した場合には、<a href="#Collection-comparator">comparatorメソッド</a>を定義していてもソートしません。
- </P>
- <p>
- 最後に、追加されたモデルは<a href="#Events-eventList">addイベント</a>を発火します。
- </p>
- <p>
- このメソッドは追加したモデルを返却します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- shift -->
- <h3 id="Collection-shift">collection.shift([options])</h3>
- <p>
- コレクションの先頭のモデルを削除します。モデルそのものは破棄しません。削除されたモデルは<a href="#Events-eventList">removeイベント</a>を発火します。
- </p>
- <p>
- このメソッドは削除したモデルを返却します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">removeイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- slice -->
- <h3 id="Collection-slice">collection.slice([begin], [end])</h3>
- <p>
- コレクションの指定された範囲のモデルを参照します。
- </p>
- <h4>begin</h4>
- <p>
- <a href="#Collection-models">modelsプロパティ</a>の開始インデックスを指定します。
- </p>
- <h4>end</h4>
- <p>
- <a href="#Collection-models">modelsプロパティ</a>の終了インデックスを指定します。
- </p>
-
- <hr />
-
- <!-- length -->
- <h3 id="Collection-length">collection.length</h3>
- <p>
- コレクションに格納されているモデルの数を返します。
- </p>
-
- <hr />
-
- <!-- comparator -->
- <h3 id="Collection-comparator">collection.comparator(model) または collection.comparator(model1, model2)</h3>
- <p>
- <a href="#Collection-sort">sortメソッド</a>で使用する比較関数を設定します。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {name: "Tanaka", age: 10},
- {name: "Suzuki", age: 40},
- {name: "Katou", age: 50},
- {name: "Gotou", age: 20},
- {name: "Mogi", age: 30}
- ]);
-
- users.comparator = function (model) {
- return model.get("age");
- };
-
- users.sort();
-
- console.log(users.pluck("name")); //-> ["Tanaka", "Gotou", "Mogi", "Suzuki", "Katou"]
- </pre>
- <p>
- Javascript標準のArrayオブジェクトが持つsortメソッドと同じく、引数を2つ持つ比較関数でも設定できます。複数のソートキーを指定したい場合に使用します。
- </p>
- <pre>
- var users = new Backbone.Collection([
- {name: "Tanaka", age: 10, gender: "male"},
- {name: "Suzuki", age: 40, gender: "male"},
- {name: "Katou", age: 50, gender: "female"},
- {name: "Gotou", age: 20, gender: "female"},
- {name: "Mogi", age: 30, gender: "male"}
- ]);
-
- users.comparator = function (a, b) {
- if (a.get("gender") > b.get("gender")) return 1;
- if (a.get("gender") < b.get("gender")) return -1;
- return a.get("age") - b.get("age");
- };
-
- users.sort();
-
- console.log(users.pluck("name")); //-> ["Gotou", "Katou", "Tanaka", "Mogi", "Suzuki"]
- </pre>
-
- <hr />
-
- <!-- sort -->
- <h3 id="Collection-sort">collection.sort([options])</h3>
- <p>
- 格納しているモデルをソートします。<a href="#Collection-comparator">comparatorメソッド</a>を定義していない場合、例外をスローします。ソートにより並びが変わったかどうかに関わらず、<a href="#Events-eventList">sortイベント</a>を発火します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">sortイベント</a>を発火しません。
- </p>
-
- <hr />
-
- <!-- pluck -->
- <h3 id="Collection-pluck">collection.pluck(attribute)</h3>
- <p>
- 格納しているモデルから指定した属性を取り出した配列を作ります。
- </p>
- <pre>
- var users = new Backbone.Collection();
- users.add({id:1, name: "Tanaka"});
- users.add({id:2, name: "Suzuki"});
- users.add({id:3, name: "Katou"});
-
- console.log(users.pluck("name")); //-> ["Tanaka", "Suzuki", "Katou"]
- </pre>
-
- <hr />
-
- <!-- where -->
- <h3 id="Collection-where">collection.where(attributes)</h3>
- <p>
- 格納しているモデルのうち、指定した属性値に一致するモデルを取り出した配列を作ります。
- </p>
- <pre>
- var users = new Backbone.Collection();
- users.add({name: "Tanaka", age: 10});
- users.add({name: "Suzuki", age: 10});
- users.add({name: "Katou", age: 30});
-
- console.log(users.where({age: 10}).length); //-> 2
- </pre>
-
- <hr />
-
- <!-- url -->
- <h3 id="Collection-url">collection.url または collection.url()</h3>
- <p>
- コレクションの<a href="#Collection-fetch">fetchメソッド</a>での通信先となるURLを設定します。また、コレクションが所有するモデルに<a href="#Model-urlRoot">urlRootプロパティ</a>が設定されていない場合には、そのモデルの<a href="#Model-url">urlメソッド</a>の内部で使用され、モデルのURLの一部となります。
- </p>
-
- <hr />
-
- <!-- parse -->
- <h3 id="Collection-parse">collection.parse(response, xhr)</h3>
- <p>
- <a href="#Collection-fetch">fetchメソッド</a>によりサーバから取得した値がモデルの属性へ設定される直前に呼ばれます。サーバから取得したデータをそのまま属性に取り込むのではなく、加工してから取り込みたい場合に利用します。
- </p>
-
- <hr />
-
- <!-- clone -->
- <h3 id="Collection-clone">collection.clone()</h3>
- <p>
- 同じ<a href="#Collection-models">modelsプロパティ</a>を持つ新しいコレクションを複製します。
- </p>
-
- <hr />
-
- <!-- fetch -->
- <h3 id="Collection-fetch">collection.fetch([options])</h3>
- <p>
- バックエンドと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>です。設定していない場合は例外をスローします。
- </p>
- <p>
- 通信開始時に<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>を発火します。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code>を設定すると、<a href="#Events-eventList">addイベント</a>や<a href="#Events-eventList">resetイベント</a>を発火しません。
- </p>
- <p>
- コレクションに格納済みのモデルは全て削除して取得したモデルに入れ替えますが、<code>options.add = true</code>を設定すると削除せずに追加します。この時、<code>options.merge = true</code>を設定すると、同じ<a href="#Model-id">idプロパティ</a>のモデルがすでにコレクションに格納されている場合は格納済みのモデルの属性値を上書きします。
- </p>
-
- <hr />
-
- <!-- create -->
- <h3 id="Collection-create">collection.create(model, [options])</h3>
- <p>
- バックエンドとHTTPリクエストのPOSTメソッドで通信して、リソースの新規作成を要求します。リクエスト先のURLはモデルの<a href="#Model-url">urlメソッド</a>で決まります。
- </p>
- <p>
- このメソッドの引数にモデルのインスタンスではなく単なるオブジェクトリテラルを渡した場合は、<a href="#Model-validate">validateメソッド</a>で検証されます。検証結果に問題があった場合、このメソッドはfalseを返却します。検証結果に問題がなければ、<a href="#Collection-model">modelプロパティ</a>に設定しているクラス(関数オブジェクト)に変換して、コレクションへ追加します。この時、<a href="#Events-eventList">addイベント</a>を発火します。
- </p>
- <p>
- バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。通信した結果、正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。このメソッドは、通信結果に関わらず新しいモデルを返します。
- </p>
- <h4>options</h4>
- <p>
- <code>options.silent = true</code> を設定すると、<a href="#Events-eventList">addイベント</a>を発火しません。
- </p>
- <p>
- モデルは即座にコレクションに追加されますが、<code>options.wait = true</code> を設定すると、サーバの応答を待ってから追加するようにタイミングを変えることができます。
- </p>
-
- <hr />
-
- <h2>Backbone.Router</h2>
- <hr />
-
- <h3 id="Router-extend">Backbone.Router.extend([properties], [classProperties])</h3>
- <p>
- <code>Backbone.Router</code> を継承した新しいルーターを作ります。
- </p>
- <h4>properties</h4>
- <p>
- インスタンスメンバを定義します。
- </p>
- <h4>classProperties</h4>
- <p>
- 静的メンバを定義します。
- </p>
-
- <hr />
-
- <h3 id="Router-constractor">new Router([options])</h3>
- <p>
- コンストラクタです。
- </p>
- <h4>options</h4>
- <p>
- <a href="#Router-initialize">initializeメソッド</a>へ一時的な値を渡す用途に利用します。
- </p>
-
- <hr />
-
- <h3 id="Router-initialize">router.initialize([options])</h3>
- <p>
- インスタンス生成時に呼ばれます。
- </p>
- <h4>options</h4>
- <p>
- <a href="#Router-constractor">コンストラクタ</a>のoptionsへ渡した値です。
- </p>
-
- <hr />
-
- <h3 id="Router-routes">router.routes</h3>
- <p>
- URLとコールバック関数の関連付けをハッシュマップで指定します。下の例では、<code>#users</code>へアクセスすると<code>createView</code>関数を実行します。
- </p>
- <pre>
- var Route = Backbone.Router.extend({
- routes: {
- "users": "createView"
- },
- createView: function () {
- //
- }
- });
- </pre>
- <p>
- URLの中にコロンで始まる変数を指定すると、パラメータとしてコールバック関数に渡すことができます。下の例では、<code>#users/1/2</code>へアクセスすると<code>createView</code>関数の第1引数に1、第2引数に2が渡ります。
- </p>
- <pre>
- var Route = Backbone.Router.extend({
- routes: {
- "users/:group/:id": "createView"
- },
- createView: function (group, id) {
- //
- }
- });
- </pre>
- <p>
- 上記の例でidを省略して<code>#users/1</code>へアクセスすると、コールバック関数は呼ばれません。カッコで囲うとそのパラメータは省略可能になります。
- </p>
- <pre>
- routes: {
- "users/:group(/:id)": "callback"
- }
- </pre>
- <p>
- アスタリスクで始める変数を指定すると、それ以降の全ての文字列がコールバック関数の引数に渡されます。下の例では、<code>#users/1/2/3</code>へアクセスするとコールバック関数の第1引数に<code>1/2/3</code>が渡ります。
- </p>
- <pre>
- routes: {
- "users/*query": "callback"
- }
- </pre>
- <p>
- これらのURLパターンにマッチすると、コールバック関数が実在するかどうかに関わらず<a href="#Events-eventList">route:name</a>イベントを発火します。<code>name</code>はコールバック関数名です。
- </p>
-
- <hr />
-
- <h3 id="Router-route">router.route(route, name, [callback])</h3>
- <p>
- <a href="#Router-routes">routesプロパティ</a>を使用せずに個別にルーティングを設定します。
- </p>
- <pre>
- var Route = Backbone.Router.extend({
- initialize: function () {
- this.route("users/:id", "users", this.createView);
- },
- createView: function (id) {
- console.log(id);
- }
- });
- </pre>
- <h4>route</h4>
- <p>
- URLのパターンを指定します。正規表現で指定することもできます。
- </p>
- <pre>
- initialize: function () {
- this.route(/users\/([0-9]+)/, "users", this.createView);
- },
- </pre>
- <h4>name</h4>
- <p>
- 発火する<a href="#Events-eventList">routeイベント</a>の名前<code>route:name</code>を指定します。
- </p>
- <h4>callback</h4>
- <p>
- コールバック関数を指定します。省略すると、上記の<code>name</code>で指定した名前を持つ関数がコールバック関数となります。
- </p>
- <pre>
- var Route = Backbone.Router.extend({
- initialize: function () {
- this.route("users", "userFnc");
- },
- userFnc: function () {
- //
- }
- });
- </pre>
-
- <hr />
-
- <h3 id="Router-navigate">router.navigate(fragment, [options])</h3>
- <p>
- URLを遷移します。
- </p>
- <h4>fragment</h4>
- <p>
- 遷移先のURLを指定します。
- </p>
- <h4>options</h4>
- <p>
- このメソッドで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>を発火します。
- </p>
- <p>
- また、<code>options.replace = true</code>を設定すると、ブラウザの履歴を新しく追加せずに上書きします。
- </p>
-
-
- <hr />
-
- <h2>Backbone.sync</h2>
- <hr />
-
- <h3 id="Sync">Backbone.sync(method, model, [options])</h3>
- <p>
- モデルやコレクションの属性をバックエンド側とRESTスタイルで非同期に送受信します。このメソッドはモデルの<a href="#Model-save">saveメソッド</a>などの内部で呼ばれて通信処理を委譲されます。このメソッドをオーバーライドすることで、例えばブラウザのLocal Storage保存するように動作を変えることができます。
- </p>
- <p>
- バックエンドとの通信開始時に<a href="#Events-eventList">requestイベント</a>を発火します。通信した結果、正常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">syncイベント</a>を発火します。
- </p>
- <p>
- 異常を表すHTTPステータスが返って来た場合、<a href="#Events-eventList">errorイベント</a>を発火します。
- </p>
- <h4>method</h4>
- <p>
- <code>create</code>、<code>update</code>、<code>delete</code>、<code>read</code>のいずれかを指定します。それぞれ、以下のHTTPメソッドで通信します。
- <ul>
- <li>create : POST</li>
- <li>update : PUT</li>
- <li>delete : DELETE</li>
- <li>read : GET</li>
- </ul>
- </p>
- <h4>model</h4>
- <p>
- 対象のモデルやコレクションを指定します。
- </p>
- <h4>options</h4>
- <p>
- jQuery.ajaxの引数として渡す値です。<code>options.success</code>や<code>options.error</code>のコールバック関数などを指定します。なお、正常を表すHTTPステータスが返って来たにも関わらず<code>options.error</code>が呼ばれる場合、バックエンド側が送ってきたJSON文字列が正しくないことが考えられます。
- </p>
-
- <hr />
-
- <h3 id="Sync-ajax">Backbone.ajax(settings)</h3>
- <p>
- jQuery.ajaxへのショートカットです。Backbone.js内部でのajaxはこのオブジェクトを参照するので、オーバーライドして独自の処理に変更できます。
- </p>
-
- <hr />
-
- <h3 id="Sync-emulateHTTP">Backbone.emulateHTTP</h3>
- <p>
- <code>true</code>を設定すると、HTTPリクエストのPUTメソッドとDELETEメソッドの代わりにPOSTメソッドを使います。本来PUTとDELETEのどちらを使いたかったのかは、<code>X-HTTP-Method-Override</code>ヘッダに設定されます。バックエンド側の都合でPUTやDELETEが利用できない場合に指定します。
- </p>
- <pre>
- POST /user/1 HTTP/1.1
- X-Requested-With: XMLHttpRequest
- X-HTTP-Method-Override: PUT
- Content-Type: application/json
- Accept: application/json, text/javascript, */*; q=0.01
-
- {"id":1,"name":"Tanaka"}
- </pre>
-
- <hr />
-
- <h3 id="Sync-emulateJSON">Backbone.emulateJSON</h3>
- <p>
- <code>true</code>を設定すると、HTTPヘッダのMIMEタイプは<code>application/json</code>ではなく<code>application/x-www-form-urlencoded</code>が設定され、また、データは"model"という名前のパラメータに格納されます。バックエンドとJSON形式でやり取りできない場合に指定します。
- </p>
- <p>
- また、同時に<a href="#Sync-emulateHTTP">Backbone.emulateHTTP</a>を<code>true</code>に設定している場合、PUTメソッドとDELETEメソッドは<code>_method</code>パラメータに格納し、HTTPリクエストはPOSTメソッドを使います。
- </p>
- <pre>
- POST /user/1 HTTP/1.1
- X-Requested-With: XMLHttpRequest
- X-HTTP-Method-Override: PUT
- Content-Type: application/x-www-form-urlencoded
- Accept: application/json, text/javascript, */*; q=0.01
-
- model:{"id":1,"name":"Tanaka"}
- _method:PUT
- </pre>
-
- <hr />
-
- <h2>Backbone.View</h2>
- <hr />
-
- <h3 id="View-extend">Backbone.View.extend([properties], [classProperties])</h3>
- <p>
- <code>Backbone.View</code> を継承した新しいビューを作ります。
- </p>
- <h4>properties</h4>
- <p>
- インスタンスメンバを定義します。
- </p>
- <h4>classProperties</h4>
- <p>
- 静的メンバを定義します。
- </p>
-
- <hr />
-
- <h3 id="View-constractor">new View([options]) または new View([options()])</h3>
- <p>
- コンストラクタです。
- </p>
- <h4>options</h4>
- <p>
- <a href="#Model-constractor">モデルのコンストラクタ</a>のoptionsはその場限りの値ですが、ビューの場合にはインスタンスメンバである<a href="#View-options">optionsプロパティ</a>へ格納されるため、いつでも参照することができます。
- </p>
- <p>
- なお、<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>へ設定されます。
- </p>
-
- <hr />
-
- <h3 id="View-initialize">view.initialize([options])</h3>
- <p>
- インスタンス生成時に呼ばれます。
- </p>
- <h4>options</h4>
- <p>
- <a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です。
- </p>
-
- <hr />
-
- <h3 id="View-options">view.options</h3>
- <p>
- <a href="#View-constractor">コンストラクタ</a>のoptionsへ渡した値です。
- </p>
-
- <hr />
-
- <h3 id="View-el">view.el または view.el()</h3>
- <p>
- ビューに関連付けするDOM要素を設定します。ビューは、このDOM要素をルートとするDOMツリーに対してさまざまな処理を行います。例えば<a href="#View-$">$メソッド</a>はDOMツリー内から要素を探し、<a href="#View-events">eventsプロパティ</a>はイベントの関連付けをDOMツリー内の要素に対して行います。
- </p>
- <p>
- DOM要素はページ上に実在していなくても構いません。DOMへのアクセスはコストが高いため、むしろメモリ上でDOM要素の編集を終えた後にページ上に追加したほうが効率的です。
- </p>
-
- <hr />
-
- <h3 id="View-$el">view.$el</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定しているDOM要素をjQueryオブジェクトに変換した値へのショートカットです。
- </p>
-
- <hr />
-
- <h3 id="View-setElement">view.setElement(element, [delegate])</h3>
- <p>
- <a href="#View-el">elプロパティ</a>を設定し直します。<a href="#View-events">eventsプロパティ</a>で設定したイベントは古い<a href="#View-el">elプロパティ</a>から削除され、新しい<a href="#View-el">elプロパティ</a>へ設定されます。
- </p>
- <h4>delegate</h4>
- <p>
- <code>false</code>を設定すると、新しい<a href="#View-el">elプロパティ</a>に対して<a href="#View-events">eventsプロパティ</a>で設定したイベントを関連付けしません。
- </p>
- <pre>
- var Profile = Backbone.View.extend({
- el: "<h1>",
- events: {
- "click": function (e) {console.log(e.target, "fire!");}
- }
- });
-
- var profile = new Profile();
-
- profile.$el.trigger("click"); //-> <h1> fire!
-
- profile.setElement("<h2>");
- profile.$el.trigger("click"); //-> <h2> fire!
-
- profile.setElement("<h3>", false);
- profile.$el.trigger("click"); //-> 発火しない
- </pre>
-
- <hr />
-
- <h3 id="View-model">view.model</h3>
- <p>
- ビューで使用するモデルを設定します。
- </p>
-
- <hr />
-
- <h3 id="View-collection">view.collection</h3>
- <p>
- ビューで使用するコレクションを設定します。
- </p>
-
- <hr />
-
- <h3 id="View-id">view.id または view.id()</h3>
- <p>
- ビューに関連付けされるDOM要素のid属性を設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a>で<a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
- </p>
-
- <hr />
-
- <h3 id="View-attributes">view.attributes または view.attributes()</h3>
- <p>
- ビューに関連付けするDOM要素の属性をオブジェクトリテラルで設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a>で<a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
- </p>
- <pre>
- var Profile = Backbone.View.extend({
- tagName: "input",
- attributes: {
- type: "text",
- name: "userName",
- value: "Tanaka"
- }
- });
- var profile = new Profile();
-
- console.log(profile.el); //-> <input type="text" name="userName" value="Tanaka">
- </pre>
-
- <hr />
-
- <h3 id="View-className">view.className または view.className()</h3>
- <p>
- ビューに関連付けするDOM要素のclass属性を設定します。インスタンス生成時に参照されます。<a href="#View-constractor">コンストラクタ</a>で<a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
- </p>
- <pre>
- var Profile = Backbone.View.extend({
- className: "alert alert-info"
- });
- var profile = new Profile();
-
- console.log(profile.el); //-> <div class="alert alert-info">
- </pre>
-
- <hr />
-
- <h3 id="View-tagName">view.tagName または view.tagName()</h3>
- <p>
- ビューに関連付けするDOM要素のタグ名を設定します。インスタンス生成時に参照されます。設定しない場合は<code>div</code>が設定されます。<a href="#View-constractor">コンストラクタ</a>で<a href="View-el">elプロパティ</a>を設定した場合はそちらが優先されるため意味がありません。
- </p>
-
- <hr />
-
- <h3 id="View-dollar">view.$(selector)</h3>
- <p>
- jQyeryおよびZeptoのfindメソッドへのショートカットです。<a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーから、<code>selector</code>に合致する子孫要素を返します。
- </p>
-
- <hr />
-
- <h3 id="View-render">view.render()</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに対する操作を記述するメソッドです。別のメソッド名でも特に問題はありません。
- </p>
- <p>
- <code>this</code>を返却して、呼び元でメソッドチェーンを使えるようにすると便利です。
- </p>
- <pre>
- var Hoge = Backbone.View.extend({
- render: function () {
- this.$el.html("Hello.");
- return this;
- }
- });
-
- console.log((new Hoge()).render().$el.html()); //-> Hello.
- </pre>
-
- <hr />
-
- <h3 id="View-remove">view.remove()</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素の破棄、および、このビューに関連付けしているイベントを全て破棄します。
- </p>
-
- <hr />
-
- <h3 id="View-make">view.make(tagName, [attributes], [content])</h3>
- <p>
- DOM要素を作成するためのユーティリティ・メソッドです。
- </p>
- <pre>
- var profile = new Backbone.View();
-
- var el = profile.make("p", {class: "name"}, "Tanaka");
-
- console.log(el.outerHTML); //-> <p class="name">Tanaka</p>
- </pre>
-
- <hr />
-
- <h3 id="View-events">view.events または view.events()</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリー上で発火したイベントとコールバック関数との関連付けを設定します。
- </p>
- <p>
- <code>{ "イベント名 [セレクタ]", "コールバック関数名" }</code>
- </p>
- <pre>
- var Profile = Backbone.View.extend({
- el: "#hoge",
- events: {
- "click button": "say"
- },
- say: function (e) {
- console.log("Hello.");
- }
- });
- </pre>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに新しいDOM要素を追加した場合にも、このeventsプロパティで設定している関連付けは動的に行われます。
- </p>
- <p>
- コールバック関数内の<code>this</code>は、ビューのインスタンスに束縛されます。また、実在しないコールバック関数名を指定すると、例外をスローします。
- </p>
-
- <hr />
-
- <h3 id="View-delegateEvents">view.delegateEvents([events])</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーで発火するイベントにコールバック関数を関連付けます。<a href="#View-events">eventsプロパティ</a>で設定する手段がありますので、このメソッドを直接呼ぶ場面は限られます。
- </p>
- <h4>events</h4>
- <p>
- <a href="#View-events">eventsプロパティ</a>と同じ要領で、イベントとコールバック関数の関連付けを指定します。
- </p>
- <p>
- ただし、このメソッドでイベントを設定すると、eventsに指定した新しいイベント以外は削除されるため、イベントを追加する用途には使えません。代わりにjQuery等のメソッドで設定する方法が考えられますが、このdelegateEventsメソッドで登録していないイベントは<a href="#View-undelegateEvents">undelegateEventsメソッド</a>で削除されないためメモリリークを起こす可能性があります。
- </p>
- <p>
- そのため、イベントは動的に必要となるイベントも含めて<a href="#View-events">eventsプロパティ</a>であらかじめ設定しておきます。
- </p>
-
- <hr />
-
- <h3 id="View-undelegateEvents">view.undelegateEvents()</h3>
- <p>
- <a href="#View-el">elプロパティ</a>に設定されているDOM要素をルートとするDOMツリーに関連付けしているイベントを削除します。ただし、<a href="#View-delegateEvents">delegateEventsメソッド</a>で関連付けしたイベントのみが対象となります。
- </p>
-
- <hr />
-
- <h3 id="View-cid">view.cid</h3>
- <p>
- インスタンス生成時に自動的に振られるユニークな識別子です。
- </p>
-
- </div>
-
- </body>
- </html>