2013-02-17 9 views
10

このようなバックボーンモデルの変更イベントにバインドします。バックボーンmodel.fetch()が完了したときを知る方法?

this.model.on("change", this.render, this); 

時々、モデルの最新バージョンを取得し、強制的にビューをレンダリングしたい場合があります。新しいデータが以前のモデルに保存されたものと異なる場合だから私はこの

this.model.fetch(); 

は残念ながらmodel.fetch()のみ変更イベントを発生させます。

フェッチが完了したときに、変更イベントをトリガーするかどうかにかかわらず、いつthis.renderコールバックを常にトリガーできますか?あなたの助けのために(事前に)

おかげ

答えて

11

$.ajax成功コールバックを使用できますが、バックボーンsyncerrorイベントをモデルでリッスンすることもできます。 syncは、サーバーへの呼び出しが成功した後に起動し、errorは、サーバーへの呼び出しに失敗した後に起動します。

this.model.on('sync', this.render, this); 
this.model.on('error', this.handleError, this); 
1

任意で受け入れることができfetch方法は、成功とエラーコールバックを持っています。最も簡単な解決策は、ビューのrenderを成功のコールバックに入れることです。おそらく返されたjqXHR約束を使用することもできますが、AJAXが成功するケース(jQuery単位)はありますが、モデルの初期化に失敗した場合、その使用は問題になる可能性があります。

1

私はあなたのコードの構造は、あなたがあなたのビュー内のモデルを取得している場合は、あなたがあなたのモデルを取得している場合しかし、あなたは、他にこの

var that = this; 
this.model.fetch().done(function() { 
    that.render(); 
}); 

ようなものを使用することができ、何であるかわかりませんあなたの視野の外に、あなたはあなたのビューにあなたの約束を渡すことができますし、初期

に例えば

var promise = model.fetch(); 
// other code here 
var view = new View({ 
    model: model, 
    promise: promise 
}); 

と、ビュー内の似たような、作りますこのソリューションについてどのように

View = Backbone.View.extend({ 
    initialize: function(){ 
     this.options.promise.done(function() { 
      // your code here 
     }); 
    } 
}); 
1

// emit fetch:error, fetch:success, fetch:complete, and fetch:start events 
fetch: function(options) { 
    var _this = this; 

    options = options || {}; 

    var error = options.error; 
    var success = options.success; 
    var complete = options.complete; 

    options.error = function(xhr, textStatus, errorThrown) { 
    _this.trigger('fetch:error'); 
    if (error) error(xhr, textStatus, errorThrown); 
    }; 

    options.success = function(resp) { 
    _this.trigger('fetch:success'); 
    if (success) success.call(options.context, resp); 
    }; 

    options.complete = function() { 
    _this.trigger('fetch:complete'); 
    if (complete) complete(); 
    }; 

    _this.trigger('fetch:start'); 

    return Backbone.Model.prototype.fetch.call(this, options); 
} 

リンクGISTするhttps://gist.github.com/fedyk/23761ce1236c5673fb84

関連する問題