[Solved] How to know when a Backbone model.fetch() completes?

I bind on the change event of my backbone models like this.

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

Sometimes I want to fetch the latest version of the model and forcibly render the view. So I do this


Unfortunately model.fetch() only fires the change event if the new data is different from what was previously stored in the model.

How can I always trigger a this.render callback when fetch completes, whether it triggers a change event or not?

Thanks (in advance) for your help

Solution #1:

You can use the $.ajax success callback, but you can also just listen for the Backbone sync and error events on the model. sync fires after a successful call to the server, error fires after a failed call to the server.

this.model.on('sync', this.render, this);
this.model.on('error', this.handleError, this);
Respondent: Ben
Solution #2:

The fetch method can optionally accept has success and error callbacks; the simplest solution is to put you view’s render in the success callback. You could also probably use the returned jqXHR promise, but if there’s ever a case where the AJAX would be successful (per jQuery) but model initialization fails, that usage could be problematic.

Respondent: JayC
Solution #3:

I don’t know what is your code structure, however if your are fetching your model inside your view, you can use something like this

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

else, if your are fetching your model outside your view, you can pass your promise to your view and make something similar

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

and inside your view, for example in initialize

View = Backbone.View.extend({
    initialize: function(){
        this.options.promise.done(function () {
            // your code here
Respondent: Hayk Aghabekyan
Solution #4:

How about this solution:

// 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) {
    if (error) error(xhr, textStatus, errorThrown);

  options.success = function(resp) {
    if (success), resp);

  options.complete = function() {
    if (complete) complete();


  return, options);

Link to gist

Respondent: Andrew Fedyk
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy