Backbone marionette render

Question

I'm trying to re-render a Marionette Itemview when a "page:change:after" event is triggered from other parts of my code. I tried doing it in two ways:

1.

    self.listenTo(this.paginatedCollection,"page:change:after",function(){
        console.log("page:change:after detected!!!!!!!!!!!!!!!!!!");

        self.render;
    });

2.

    this.listenTo(this.paginatedCollection,"page:change:after",self.render);

For some reason, #2 works but not #1. The console log in the callback of #1 did run though (I can see "page:change:after detected" on my console). I also added an onRender method that prints out "onRender!" when I used #2, but not #1. It looks like the view did not render with #1. Can someone provide some insights into this behaviour?

Here's a more complete code snippet to provide better context:

Views.PaginationControls = Marionette.ItemView.extend({
        template: "#contact-paginator",

        initialize: function(options){

          var self = this;
          this.paginatedCollection = options.paginatedCollection;

          //why is this not working?
          self.listenTo(this.paginatedCollection,"page:change:after",function(){
              console.log("page:change:after detected!!!!!!!!!!!!!!!!!!");

              self.render;
          });



          //this works
          this.listenTo(this.paginatedCollection,"page:change:after",self.render);
        },

        onRender: function(){
          console.log("onRender!")
        }

});

Dan W Dan W · Accepted Answer · 2014-09-03T19:50:43

In the first example, you are not executing the method - should be 'self.render()` - I suspect this is the root of the issue

That said - I think this would work and is probably cleaner, since you can get rid of self altogether:

this.listenTo(this.paginatedCollection,"page:change:after",this.render);

Backbone marionette render

1 Answers