JSDeferredでBackbone.jsのモデル更新を快適に

いまだに参加者が増えなくて大変なBackbone.js Advent Calendarの8日目の記事です．
参加はこちらから！→ http://atnd.org/events/22017

Backbone.ModelやBackbone.Collectionのsaveやfetch

Backbone.jsでmodel.saveやcollection.fetchが成功/失敗したときの処理は，それらの引数に関数を渡して書きます．

collection.fetch({
    data: params,
    success: function(model, res) { 
        // 取得成功時の処理
    },
    error: function(model, res) { 
        // 取得失敗時の処理
    }
});

しかしこの書き方はあまり良いとは言えません．

• ぱっと見たときにどういう処理が実行されるのかわかりにくい
• success/errorの順番が上記のように守られていればいいですが，ほかのパラメタが間に入ったり後に付いたりすると流れを追いにくくなる
• fetch/save完了時の処理が大きくなるにつれて，引数部分が長くなっていく
• コールバックが切り出すほどの大きさでないときは微妙に汚いコードになる…

fetchやsaveは頻繁に利用するので，もうちょっと読みやすい，わかりやすい書き方をしたいところです．

JSDeferred

ところでcho45さんが作られたJSDeferred(ドメインかっこいい)というライブラリがあります．これは煩雑になりがちな，JavaScriptの非同期処理を直感的な形で書けるようにするものです．

例えばjQuery用の jsdeferred.jquery.js を利用すると，$.ajaxのsuccess/error処理を以下のように書くことができます．

$.ajax({ url: '/foo' })
    .next(function(res) {
        // 成功時の処理
        console.log(res);
    })
    .error(function(e) {
        // エラー時の処理
        console.error(e);
    });

Backbone.js & JSDeferred

Backbone.ModelやBackbone.CollectionのsaveやfetchはいずれもBackbone.syncを返し，そしてBackbone.syncは$.ajaxを返します．
そこでJSDeferredと組み合わせることで上の$.ajaxの例と同じようにメソッドチェインの形で成功/失敗時の処理を書くことができます．

collection.fetch({ data: params })
    .next(function(response) {
        // 取得成功時の処理
        console.log(response);
    })
    .error(function(e) {
        // 取得失敗時の処理
        console.error(e);
    });

最初の例よりもずっとわかりやすいですね！

注意点

Backbone.Collection#createだけはBackbone.syncではなく，作成したモデルを返すためこのように書くことができません．
それ以外のメソッドではDeferredをロードすれば上のように綺麗に書くことができます．

matome

Backbone.jsに限らずJSDeferredを使うことでJSを綺麗に書けるようになるので，JavaScriptを書く人は一度試してみることを薦めます:)

再度ですが，そろそろネタがないのでBackbone.js Advent Calendarに参加してください!今回みたいにBackbone.jsにちょっと絡んだ程度の内容でもOKです．
Backbone.jsの日本語コンテンツを増やしましょう! http://atnd.org/events/22017