marionette.js 查看 onShow 与 onRender 之间的区别？答案

【问题标题】：marionette.js view difference between onShow vs onRender?marionette.js 查看 onShow 与 onRender 之间的区别？
【发布时间】：2013-06-14 17:47:51
【问题描述】：

我是 Marionette.js 的新手，在重构现有的 Backbone.js 代码时，我注意到 Marionette 视图 (itemview) 上的两个回调在我看来很相似，即 onRender 和 onShow。有什么区别和更好的使用方式？

但是，查看源代码，我认为“渲染”和“显示”事件都在“视图初始化”中引发。

constructor: function(){
    _.bindAll(this, "render");

    var args = Array.prototype.slice.apply(arguments);
    Backbone.View.prototype.constructor.apply(this, args);

    Marionette.MonitorDOMRefresh(this);
    this.listenTo(this, "show", this.onShowCalled, this);
}

【问题讨论】：

标签： backbone.js view marionette

【解决方案1】：

我认为 Vitaliy 的回答中有些地方并不完全正确。正确的是：

onShow ：视图本身不会触发“显示”事件。它由一个地区触发。所以在某些情况下它不会被调用。

onRender ：每次渲染视图时都会执行此方法。

请注意，'onRender' 正在执行并不意味着对象实际上已添加到 DOM。它只是意味着它刚刚被渲染（数据填充了模板，你有一个 this.$el 来处理，等等）

另一方面，如果 'onShow' 被调用是因为 'show' 事件已从区域触发，并且区域通常表示DOM，你可能期望当 'onShow' 被调用时，视图确实被添加到了 DOM 中。

【讨论】：

这是正确的，onRender 在元素插入 DOM 后触发的说法具有误导性，会让很多人感到困惑。
为什么不改进答案？
抱歉，我不知道我能做到这一点：/ 我只是编辑答案并更改它，还是我需要做更多的事情？再次道歉:(
出于可访问性目的，在某些情况下，您需要在元素被添加到 DOM 后立即将注意力集中在元素上，以便屏幕阅读器可以阅读其内容。例如，当加载微调器出现时，它的视图中可能有文本，因此您可以使用一点 jQuery：this.$('#spinner-title').focus();。但我注意到焦点实际上只发生在 onShow 上，而不是 onRender 上。这显示了两种类型的回调之间的区别。
还有一个可用的事件，onDomRefresh，当视图从“影子 DOM”移动到真实 DOM 时，会调用该事件。

【解决方案2】：

onShow：视图本身不会触发“显示”事件。它由一个地区触发。所以在某些情况下它不会被调用。

onRender：每次渲染视图时都会执行此方法。

【讨论】：

但是，查看源代码，我认为“渲染”和“显示”事件都在“视图初始化”中引发......`构造函数：function（）{ _.bindAll（this， “使成为”）; var args = Array.prototype.slice.apply(arguments); Backbone.View.prototype.constructor.apply(this, args); Marionette.MonitorDOMRefresh(this); this.listenTo(this, "show", this.onShowCalled, this); }`
不，ItemView（从 View 扩展）只是订阅 show 事件 - this.listenTo(this, "show", this.onShowCalled, this); 并且不会触发它。 render 事件在 render 方法内触发，而不是在 view initialize 上。所以可以随时手动调用。
另外，我不认为 onRender 在普通视图上可用 - 仅在 itemviews 上。

【解决方案3】：

嗯，这是 Marionette 中的 show 方法，它解释了问题

show: function(view){

       this.ensureEl();

       var isViewClosed = view.isClosed || _.isUndefined(view.$el);

       var isDifferentView = view !== this.currentView;

       if (isDifferentView) {
         this.close();
       }

       view.render();

       if (isDifferentView || isViewClosed) {
         this.open(view);
       }

       this.currentView = view;

       Marionette.triggerMethod.call(this, "show", view);
       Marionette.triggerMethod.call(view, "show");
     }

【讨论】：

【解决方案4】：

在版本 3 中，区域事件 show 和 before:show 不再触发在视图上。在大多数情况下，您可以使用 render 和 before:render 事件。如果你需要知道视图在 DOM 中，然后你可以使用 attach 或 dom:refresh

信息http://blog.marionettejs.com/2016/08/23/marionette-v3/index.html

【讨论】：