Backbone.js の model.save() で通信できない

2014年10月5日 17:54

今回は完全に「見落とし」なので、あえてフォローするまでもないのだが、一応ひととおりの説明をば。

Backbone.js は model.save() を実行することで、バックエンドと通信してリソースの新規作成や更新が行なえる。通信先は url メソッド(モデルの場合は urlRoot)で指定できる。例えばこんな感じだ。

var Model = Backbone.Model.extend({
    urlRoot: '/api/create'
});
var model = new Model();

たとえばこの model をモデルに指定したビューにて、ボタンのクリックイベントに create というメソッドを割り当てたとしよう。

var View = Backbone.View.extend({
    el: '#hoge',
    events: {
        'click button': 'create'
    },
    create: function() {
        this.model.save({
            name: 'fuga'
        }, {
            success: function(model) {
                // 成功した時の処理
            },
            error: function(model, xhr, options) {
                // 失敗した時の処理
            }
        });
    }
});
var view = new View({
    model: model
});

ボタンをクリックすると /api/create と POST メソッドで通信し、name: 'fuga' というパラメータが渡される。が、そのモデルに validate メソッドが指定してあった場合、実際の通信よりも前に検証が行なわれる。

var Model = Backbone.Model.extend({
    urlRoot: '/api/create',
    validate: function(attrs) {
        if (attrs.name == 'fuga') {
            return 'NG';
        }
    }
});

検証に成功した場合、validate メソッドは何も返却しないように記述する。上記の場合は name: 'fuga' というパラメータが検証されて 'NG' という文字列が返却されるが、model.save() の場合は何かが返却されたことで通信をキャンセルする。

やはりというか、公式ドキュメント(日本語版)ぐらいちゃんと読めって話ですね。