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与区域上的show event之间存在差异。（onAttach方法是一种便捷方法，不需要订阅listenTo。）

附加

当您的视图显示在区域中时，将触发attach事件，该事件将视图附加到DOM -元素的祖先在页面的{{1 }}（document）。这意味着该视图的元素（document.documentElement）或父视图或祖先视图的元素都已附加到DOM。仅在父视图的区域中显示视图是不够的。首先，当该父视图附加到DOM时，该事件将递归地触发到所有子视图。

在其中显示子视图之前，可以通过测试el进行检查：

parentView

如果需要将视图附加到DOM才能正常工作，则必须选择DOM中的元素并在其中显示父视图。例如，在// All will return false document.documentElement.contains(parentView.el); Marionette.isNodeAttached(parentView.el); parentView.isAttached();中：

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 });及其代码附加到DOM本身。或将DOM中的元素传递到其构造函数，例如：AllOffers。不要记住在不需要时将其销毁。

显示

在区域中显示视图时，事件new AllOffers({ el: body })将在该区域而不是视图上触发。（我写过有关《木偶3》或更新版本的文章。《木偶2》在视图上触发了show事件。）

如果事件处理程序需要在父视图的区域中显示该视图之后立即执行，而不是在该视图出现在DOM中之后执行，请考虑将代码移至render event（或show方法）。您可以收听该地区的onRender事件，然后在子视图中重新触发该事件，但是最好遵循Marionette的最佳做法和use other events。

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

1 个答案:

附加

显示