Marionette document.querySelector（'＃test'）返回null，但是这样做。$（'＃test'）不会

Question

我有一个简单的木偶ItemView，

import Marionette from 'backbone.marionette';
import Tabs from '@component/tabs/src/js/views/Tabs';
import template from '../../../templates/partials/one/tabs.hbs'
export default Marionette.ItemView.extend({
  template,

  onRender() {
    console.log(document.querySelector('#tabs-main')); //--> null
    console.log(this.$('#tabs-main')[0]); // gets appropriate dom element
  }
})

[有没有为什么document.querySelector返回null而不是执行此操作的原因。$，我需要做document.querySelector，因为当我传入id / class时，我正在使用的库在内部使用它

Answer 1

参考https://marionettejs.com/docs/v3.5.1/viewlifecycle.html#view-creation-lifecycle

在onRender中，模板将呈现在内存中（即this。$ el），但尚未附加到DOM。

如果视图的HTML需要在DOM中，则可以使用onAttached。

请注意，DOM查找要比对视图el的查找慢，因此，除非需要对DOM进行查找，否则通常最好将onRender与this。$（）查找一起使用。