Question

I would like to render a view for a model when the model is first fetched but not on every change.

My setup is as follows:

var m = new $.model.Customer({id: customer});
var v = new $.view.GeneralEditView({el: $("#general"), model: m});
m.fetch();

Then in the view initialize I bind the change event to the render method to render when the model is loaded:

this.model.bind('change', this.render);

The problem is that the view then renders on every change. I’d like to only render after the fetch. Unfortunately I’m not aware of any event that’s fired after a fetch for a model other than change.

Is there something like ‘reset’ for collections that I can bind to?

EDIT:

Perhaps to put it more succinctly, for Backbone models is there a way to distinguish when a model is loaded from the server versus changed locally?

Answer 1

There are a bunch of different ways to approach this (these all assume var view = this; somewhere in your view code):

• Call .fetch() with a one-time success callback:

  m.fetch({
      success: function() {
          view.render();
      }
  });
  

• Bind to change but unbind in the handler:

  function handle() {
      view.render();
      view.model.off('change', handle);
  }
  this.model.bind('change', handle);
  

• Use _.once to limit handler calls:

  this.model.bind('change', _.once(function() {
      view.render();
  }));
  

• Use a .ready() pattern for your models – example here. I like this option in cases where multiple views need to know when the model is loaded, and when you need to want to be able to write the same code without worrying about whether your model is loaded yet. The downside of this is that it requires you to add a model method like .isFullyLoaded() to test every time; the upside is that using a test function, rather than setting a flag, allows models to be loaded in bulk as part of a collection without having to change your code.