backbone.js 在测试期间未触发Marionette onAttach生命周期

6jjcrrmo  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(151)

我正在编写测试,其中我在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仍然没有启动,这使得我无法编写测试

j7dteeu8

j7dteeu81#

视图上的attach事件和区域上的show事件是有区别的(onAttach方法是一种方便的方法,不需要listenTo订阅)。

附加

当您的视图显示在区域 * 中时,attach事件被触发,这会将视图附加到DOM* --附加到在页面的document中具有祖先的元素(document.documentElement)。这意味着视图的元素(el)或父视图或祖先视图的已附加到DOM。仅在父视图的区域中显示视图是不够的。首先,当父视图附加到DOM时,该事件将向下递归地触发到所有子视图。
在显示子视图之前,可以通过测试parentView来检查它:

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

如果您的视图需要附加到DOM才能正常工作,您必须选择DOM中的一个元素,并在其中显示父视图。例如,在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 })。不要记得在不需要时销毁它。

显示

当一个视图显示在一个区域中时,事件show将在该区域上触发,而不是在视图上触发。(我写的是Marionette 3或更新版本。Marionette 2在视图上触发了show事件。)
如果您的事件处理程序需要在父视图区域中显示视图后立即执行,而不是在DOM中显示视图后立即执行,请考虑将代码移到render事件(或onRender方法)。您可以在区域上侦听show事件,然后在子视图上重新触发它,但最好遵循Marionette的最佳实践并使用其他事件。

相关问题