Backbone.jsからリクエストするAPIのURLを変更

デフォルトの送信先URL

Backbone.jsのcollectionでurlプロパティを/(ルート)に設定したとします。

var app = app || {};

(function () {
  'use strict';
		
  app.Engineers = Backbone.Collection.extend({
    model: app.Engineer,
    url: '/',
    initialize: function(){
      this.fetch({reset: true});
    }
  });
})();

その場合には、サーバ側のエンドポイントは以下の仕様を前提にして、Backbone.syncが自動的にリクエストURLを構成します。

• 一覧取得 → GET /
• 個別取得 → GET /:id
• 登録 → POST /
• 変更 → PUT /:id
• 削除 → DELETE /:id

サーバ側のREST APIのURLを変更してみます。

カスタマイズのやり方

API側のリクエストURLを以下の仕様にカスタマイズします。

• 一覧取得 → GET /
• 個別取得 → GET /id/:id
• 登録 → POST /new
• 変更 → PUT /id/:id
• 削除 → DELETE /id/:id

個別取得の場合は、

GET /id/3

というURLにアクセスしてリソースを取得する形になります。

Modelのsyncプロパティを使ってBackbone.syncの振る舞いを上書きすることが可能ですので、HTTPメソッドの種類に応じて、options.urlをカスタマイズすることが出来ます。

var app = app || {};

(function () {
  'use strict';
	
  app.Engineer = Backbone.Model.extend({
    defaults: {
      name: "developer",
      skill: "empty",
      busy: false
    },
    sync: function(method, model, options){
      if(method=='read'){

      }
      else if(method=='create'){
        options.url =  '/new'; 
      }
      else if(method=='update' || method=='delete'){
        options.url =  '/id/' + model.id; 
      }
      else{
        console.log(method);
      }
      Backbone.sync(method, model, options);
    }
  });
})();

Backbone.syncでは、

• read
• create
• update
• delete

としてHTTPメソッド名を扱いますので、その値で条件分岐を行いoptions.url(リクエスト先URL)をカスタマイズすることが可能です。

リクエストのサンプル

urlプロパティを設定することで、サーバ側へのリクエストが発生するBackbone.jsのメソッドをあげてみます。

新規登録

createメソッドによりPOSTリクエストが送信され、新規にmodelが追加されます。

collection.create([
  {name: "kiyoharu"}
]);

更新

特定のModelを取得した上で、saveメソッドを使うとPUTリクエストが送信されます。

m = collection.get(3)
m.set({name: 'new kiyoharu'})
m.save()

削除

destroyメソッドによりサーバ側にdeleteリクエストを送信することが出来ます。

m = collection.get(3)
m.destroy()