Backbone.jsの特徴にRESTful APIとの親和性の高さがあります。
Backbone.ModelはリソースのAciteveRecordです。
はじめの一歩としてRESTful APIから情報取得します。

準備

依存ライブラリ

Backbone.jsはjQueryとunderscoreに依存しています。
準備を簡単にするために、各ライブラリをCDNから取得します。

<head>
  <script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone.js"></script>
</head>

RESTful API

JSONPlaceholder - Fake online REST API for developersを使います。
http://jsonplaceholder.typicode.com/posts/1 からリソースを取得します。

情報取得

ソースコード

<head>
  <script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone.js"></script>
  <script>
    const PostModel = Backbone.Model.extend({
      url: 'http://jsonplaceholder.typicode.com/posts/1'
    })

    new PostModel()
      .fetch()
      .done((post) => console.log(JSON.stringify(post)))
  </script>
</head>

説明

urlプロパティ

Modelのurlを指定します。
Modelは1つリソースと対応します。idまで指定します。

複数のリソースを扱う場合はBackbone.Colletionを使います。
今回は説明しません。

fetchメソッド

fetchメソッドを使ってRESTful APIを呼び出します。
次のリクエストを生成します。

GET /posts/1 HTTP/1.1
Host: jsonplaceholder.typicode.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/javascript, */*; q=0.01
Origin: null
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Accept-Encoding: gzip, deflate, sdch
Accept-Language: ja,en-US;q=0.8,en;q=0.6,zh-TW;q=0.4,zh;q=0.2

結果の扱い方

Ajaxリクエストは非同期です。
結果の扱い方は2種類あります。

Taskベース非同期パターン

Deferred ObjectであるjqXHRを使ってTaskベース非同期パターンが使えます。

new PostModel()
  .fetch()
  .done((post) => console.log(JSON.stringify(post)))

jqXHRですので、コールバック関数の引数は

data
textStatus
jqXHR

です。

イベントベース非同期パターン

Modelはイベントを発火できます。
イベントベースの非同期パターンが使えます。

changeイベント

new PostModel()
  .on('change', (post) => {
    console.log(JSON.stringify(post))
  })
  .fetch()

if (!model.set(serverAttrs, options)) return false;

Ajaxリクエストが成功し、レスポンスが取得するとモデルを更新し、changeイベントが発火します。コールバック関数の引数は

モデル
fetchの第二引数で指定したオプション

です。

syncイベント

new PostModel()
  .on('sync', (post) => {
    console.log(JSON.stringify(post))
  })
  .fetch()

https://github.com/jashkenas/backbone/blob/master/backbone.js#L596
またsyncイベントで更新を取得することもできます。

model.trigger('sync', model, resp, options);

コールバック関数の引数は

モデル
取得したデータ
fetchの第二引数で指定したオプション

です。

結果のJSON

いずれの方法でも次のjsonを表示します。

{"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"}

https://github.com/jashkenas/backbone/blob/master/backbone.js#L430
ModelはtoJSONメソッドを持っています。内部にデータを持つthis.attributesのコピーを返します。
JSON.stringifyで呼び出すと、RESTful APIから取得したデータと同じJSONを取得できます。

// Return a copy of the model's `attributes` object.
toJSON: function(options) {
  return _.clone(this.attributes);
}

感想

イベント毎にコールバック関数の引数が違うのが辛そうです。

Backbone.jsのModel.fetch で RESTful API から情報取得

準備