javascript - Marionette onAttach 生命周期在测试期间未触发

Question

我正在编写测试，其中 onAttach 生命周期方法中有一些逻辑，但在测试时永远不会调用 onAttach。

这就是我最初尝试测试它的方式

 beforeEach(() => {
        view = new OffersTab();
        view.render();
 });

但我的理解是，当显示区域时，它的 onAttach 会被触发，所以我尝试这样做，

beforeEach(() => {
    let parentView = new AllOffers();
    parentView.render();
    parentView.getRegion('offersTab').show(new OffersTab());

    view = parentView.getRegion('offersTab');
});

但是 onAttach 仍然没有触发，让我无法编写测试

Answer 1

attach event 之间存在差异在 View 和 show event在一个地区。 (onAttach 方法是一种便捷方法，不需要通过 listenTo 订阅。)

附加

当您的 View 显示在某个区域中时，会触发 attach 事件，并且这会将 View 附加到 DOM - 附加到其祖先位于页面中的元素文档 (document.documentElement)。这意味着 View 的元素 (el) 或父 View 或祖先 View 的元素已附加到 DOM。仅在父 View 区域中显示 View 是不够的。首先，当该父 View 附加到 DOM 时，该事件将递归地触发到所有 subview 。

在显示 subview 之前，您可以通过测试 parentView 来检查它:

// All will return false
document.documentElement.contains(parentView.el);
Marionette.isNodeAttached(parentView.el);
parentView.isAttached();

如果您的 View 需要附加到 DOM 才能正常工作，您必须选择 DOM 中的一个元素并在其中显示父 View 。例如，在 document.body 中:

let body, parentView, view;

before(() => { // mocha's "before all"
  body = new Marionette.Region({ el: 'body' });
});

beforeEach(() => {
  parentView = new AllOffers();
  body.show(parentView); // attach the parent view to DOM

  view = new OffersTab();
  parentView.getRegion('offersTab').show(view);
});

afterEach(() => {
  body.empty(); // detach and destroy the view
});

或者，您可以将 AllOffers 附加到 DOM 本身及其代码。或者将 DOM 中的元素传递给其构造函数，例如:new AllOffers({ el: body })。当你不需要它时，不要记得销毁它。

显示

当 View 在某个区域中显示时，show 事件将在该区域上触发，而不是在 View 上触发。 (我写的是 Marionette 3 或更新版本。Marionette 2 触发了 View 上的 show 事件。)

如果您的事件处理程序需要在父 View 区域中显示 View 后立即执行，而不是在 View 出现在 DOM 中后执行，请考虑将代码移至 render event (或 onRender 方法)。您可以监听该区域的 show 事件并在您的 subview 上重新触发它，但您最好遵循 Marionette 的最佳实践和 use other events .