了解骨​​干网和木偶查看生命周期 [英] Understanding Backbone and Marionette View lifecycle

问题描述

我是新来这个世界，我需要了解一些骨干和木偶的概念。在这里，我试图解释一些我学的概念。这将是巨大的，有对他们的一些反馈。

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.

的渲染函数定义呈现模板的逻辑。当它完成后，的OnRender 回调被调用。在这里，我想呈现的观点得到了未连接到DOM。它由由标签名（默认为 DIV ），它包含我连接到它的模板。要明确插入标记到DOM我需要的地方追加它。难道我错了吗？

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);​

木偶扩展了区域的概念骨干。在显示方法可以在一个区域被调用，以present特定视图。

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);

在这种情况下，显示方法将调用渲染函数自身的最后，当该视图的内容将被放置在DOM中，昂秀上调用这一观点。它是确定？

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?

从木偶文档也有叫 onDomRefresh 另一个回调。从我的实验，我发现这个方法之前昂秀调用。所以，我的假设是，鉴于尚未连接到DOM呢。但医生说以下几点。

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.

引发的观点被渲染后，已经在DOM中所示
  通过Marionette.Region，并已重新呈现。

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?

先谢谢了。

推荐答案

有关它的价值，我相信你所说的一切都或多或少是正确的。

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

查看源（可这里 - 寻找DomRefresh）的MonitorDOMRefresh位混合在每一个视图，并添加此API：

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);
  });
};

所以真的，所有发生的事情是2事件侦听器视图，回调（附件 handleShow / handleRender ）设置一个布尔值 _isShown 或 _isRendered 和呼叫 triggerDomRefresh ，它说：

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");
    }
  }
}

所以，你去... onDomRefresh 将被称为随时视图已经被渲染，如图所示，然后重新渲染。

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

希望帮助！

这篇关于了解骨​​干网和木偶查看生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！