Understanding Backbone and Marionette View lifecycle

Question

I'm new to this world and I need to understand some of the concepts of Backbone and Marionette. Here I'm trying to explain some of the concepts I'm learning. It would be great to having some feedback on them.

The render function defines the logic for rendering a template. When it is finished, the onRender callback is called. Here I suppose the rendered view has been not attached to the DOM. It is composed by a tagName (the default is div) that contains the template I attached to it. To explicitly insert that tag into the DOM I need to append it somewhere. Am I wrong?

In general, I do the following.

var view = new MyView();
view.render();
$("container").append(view.$el);

Marionette extends Backbone with the concept of regions. The show method can be called on a region to present a specific view.

var view = new MyView();
region.show(view);

In this case, the show method will be call the render function on its own and finally, when the content of the view will be put in the DOM, the onShow is called on that view. Is it ok?

From Marionette doc there is also another callback called onDomRefresh. From my experiments, I've noticed that this method is called before onShow. So, my supposition is that the view has not been attached to the DOM yet. But the doc says the following.

Triggered after the view has been rendered, has been shown in the DOM via a Marionette.Region, and has been re-rendered.

Could you give some hints on it?

Thanks in advance.

IanRr IanRr · Accepted Answer · 2013-08-11T00:08:10

For what it's worth, I believe everything you've said is more or less correct.

Looking at the source (available here -- look for "DomRefresh") the MonitorDOMRefresh bits are mixed in to every view and add this API:

return function(view){
  view.listenTo(view, "show", function(){
    handleShow(view);
  });

  view.listenTo(view, "render", function(){
    handleRender(view);
  });
};

So really, all that's happening is the attachment of 2 event listeners to the view, and the callbacks (handleShow/handleRender) set a boolean _isShown or _isRendered and call triggerDomRefresh, which says:

function triggerDOMRefresh(view){
  if (view._isShown && view._isRendered){
    if (_.isFunction(view.triggerMethod)){
      view.triggerMethod("dom:refresh");
    }
  }
}

So, there you go... onDomRefresh will be called anytime the view has been rendered, shown, and then re-rendered.

Hope that helps!

Understanding Backbone and Marionette View lifecycle

1 Answers