了解Backbone和Marionette View生命周期

Lor*_*o B 8 javascript lifecycle backbone.js backbone-views marionette

我是这个世界的新手,我需要了解Backbone和Marionette的一些概念.在这里,我试图解释一些我正在学习的概念.对它们进行一些反馈会很棒.

render函数定义了呈现模板的逻辑.完成后,将onRender调用回调.这里我假设渲染的视图没有附加到DOM.它由一个tagName(默认值div)组成,其中包含我附加到它的模板.要将该标记显式插入DOM,我需要将其附加到某处.我错了吗?

一般来说,我会做以下事情.

var view = new MyView();
view.render();
$("container").append(view.$el);?
Run Code Online (Sandbox Code Playgroud)

Marionette使用区域概念扩展了Backbone.show可以在区域上调用该方法以呈现特定视图.

var view = new MyView();
region.show(view);
Run Code Online (Sandbox Code Playgroud)

在这种情况下,该show方法将自己调用该render函数,最后,当视图的内容将被放入DOM中时,将在该视图上调用该函数onShow.好吗?

从Marionette doc开始,还有一个叫做回调的回调onDomRefresh.从我的实验中,我注意到之前调用过此方法onShow.所以,我的假设是视图尚未附加到DOM.但该文件说明如下.

在渲染视图后触发,已经通过Marionette.Region显示在DOM中,并且已经重新渲染.

你能给它一些提示吗?

提前致谢.

小智 3

无论如何,我相信你所说的一切或多或少都是正确的。

查看源代码(可在此处找到- 查找“DomRefresh”),MonitorDOMRefresh 位混合到每个视图中并添加此 API:

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

  view.listenTo(view, "render", function(){
    handleRender(view);
  });
};
Run Code Online (Sandbox Code Playgroud)

所以实际上,所发生的只是将 2 个事件侦听器附加到视图,并且回调 ( handleShow/ handleRender) 设置一个布尔值_isShownor_isRendered和 call triggerDomRefresh,其中表示:

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

所以,就这样……onDomRefresh只要视图被渲染、显示,然后重新渲染,就会被调用。

希望有帮助!