如何检查是不是呈现了主干视图？

Posted 2023-02-26

【中文标题】如何检查是不是呈现了主干视图？

【英文标题】：How to check if a backbone view is rendered?如何检查是否呈现了主干视图？

【发布时间】：2016-03-30 13:00:07

【问题描述】：

我正在尝试使用以下代码将视图附加到 Backbone 中的项目：

var viewContainer = this.$el.find('.view-container'),
  pageWrap = this.$el.nextAll();

修复 if (viewContainer.empty())

  this.myView= new ProductsView();
    viewContainer.append(application.myView.render().$el),
    console.log(myView);

我正在使用toggle 函数将此视图附加到viewContainer，但是，每次我单击按钮时，myView 都会一次又一次地附加到viewContainer，而不仅仅是一次。在附加视图之前，如何检查视图是否已经在其中呈现？我可以使用!this.rendered() 等效项吗？

我找到了这个thread，但在这种情况下它对我没有帮助。

更新 - FROM console.log(viewContainer)

[div.view-container.product-container.active, div#subjects_menu.view-container.product-container.hidden.active, prevObject: p.fn.p.init[1], context: undefined, selector: ".view-container"]

【问题讨论】：

How can I check if a Backbone.View is currently rendered in DOM?的可能重复

可能，但它仍然没有告诉我在附加视图之前如何访问this.rendered = true;。

我想你想检查viewContainer 是否有任何孩子而不是viewContainer.length。您可以通过在 if 条件中使用 viewContainer.is(:empty) 来做到这一点。

viewContainer.is(:empty) 不起作用，因为它是一个 div。我尝试使用if (viewContainer.length == 0)，但现在它保持空无错误。

您需要在viewContainer 中追加产品视图，因此您需要在追加之前检查它是否为空。使用viewContainer.length 会告诉您UI 中是否有元素.view-container，而且您似乎已经拥有了。可以在追加前后显示console.log(viewContainer)的值吗？

【参考方案1】：

从外观上看，如果 ProductsView 已经存在，您要确保它不会被创建。

最简单的方法是：

if(!this.myView) 
  this.myView= new ProductsView();
  viewContainer.append(application.myView.render().$el),

使用应用程序状态比查询 DOM 更好。当您删除产品视图时，只需在之后执行this.myView = null。

---

您想要查询 DOM 以了解视图是否被渲染的唯一时间可能是当您必须集成一个隔离的外部应用程序时，您无法控制在渲染时不会触发任何事件/提供回调等.