Backbone view Render method default parameter

Question

I have a backbone view which is associated with model. View is listening for change method and it calls render if model is changed.

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

I'm having a problem that my backbone view's render method is getting called multiple times. I'm trying to debug this problem. For this purpose I added console.log statement in the render method:

render: function(data) {
    if(this.model){
        console.log("Render Method:",data," For model:",this.model.cid);
    }
}

Now this data value is getting printed as undefined sometimes or something like model. Does anyone know what is the argument passed to a model change listener?

Note that : I'm not passing anything to render method.

and backbone documentation mentions nothing about this: http://documentcloud.github.io/backbone/#View-render

Answer 1

The change event passes the model and a hash of options

In backbone sources:

 this.trigger('change', this, options);

And so in the documentation as mu is too short has commented:

"change" (model, options) — when a model's attributes have changed.

Answer 2

As far as I am aware the render function is not supposed to have any parameters pass to it

  Event.Listen=Backbone.View.extend({
          model: 'something'
        initialize:function(){
           this.listenTo(this.model,'change',this.render);

      }
        render:function(){
          //is called when the listen to event is triggered
          //if(this.model) does not make a lot of sense?? Does it need to be 
             //true ornull
           //call another object
           new Event.DoSomething();

        }
   });

From the Backbone site "Tell an object to listen to a particular event on an "other" object"

Answer 3

Looks like externally to the View there are other calls to render(additional to the event listener).

if you try this(listen to other method instead of render):

this.listenTo(this.model, 'change', this.customMethod);

And then declare this in the view below render:

customMethod: function() {
    console.log(arguments, '<==== is there arguments?');
    if(this.model){
        console.log("Custom Render Method For model:",this.model.cid);
    }
}

So please review in your code, where additional to the model.change listener, you are calling the render method outside the view.

Answer 4

The event callback gets called multiple times if the binding happens multiple times i.e.

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

is being executed multiple times.

It can also happen if the change is triggered multiple times. eg. you setting each of the attributes of a model in a for loop rather than at once.

Any call back receives an event as argument. In your case

render: function(data) {
    if(this.model){
        console.log("Render Method:",data," For model:",this.model.cid);
    }
}

data will be logged as undefined when view.render() is called. data will be an event object when triggered by a change event