javascript - Marionette document.querySelector ('#test' ) 返回 null 但这样做。$ ('#test' ) 不会

Question

我有一个简单的 Marionette 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。

如果 View 的 HTML 需要位于 DOM 中，则可以使用 onAttached。

请注意，DOM 查找比针对 View 的 el 进行的查找慢，因此除非需要针对 DOM 进行查找，否则通常最好将 onRender 与 this.$() 查找结合使用。

编辑:由于您使用的是 ItemView，因此必须使用 < v3，这里是 onAttach 的 v2 文档: https://marionettejs.com/docs/v2.4.7/marionette.view.html#view-attach--onattach-event

第二次编辑:添加代码片段(抱歉，花了一段时间才找到旧的 Marionette 依赖项)

var MyView = Backbone.Marionette.ItemView.extend({
  template: Handlebars.compile('<p id="hello-world">Hello World</p>'),
  onRender: function() {
    console.log('onRender');
    console.log('querySelector', document.querySelector('#hello-world'));
    console.log('querySelector equal null?', document.querySelector('#hello-world') === null);
    console.log('this.$el', this.$('#hello-world')[0]);
  },
  onAttach: function() {
    console.log('onAttach');
    console.log('querySelector', document.querySelector('#hello-world'));
    console.log('querySelector equal null?', document.querySelector('#hello-world') === null);
    console.log('this.$el', this.$('#hello-world')[0]);
  }
});

// ParentView to mock an application
var ParentView = Backbone.Marionette.LayoutView.extend({
    el: '.test-container',
    template: Handlebars.compile('<div class="my-region"></div>'),
    regions: {
      myRegion: '.my-region'
    },
    onRender: function() {
      var myView = new MyView();
      this.showChildView('myRegion', myView);
    }
});

var parentView = new ParentView();
parentView.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.3.1/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.7/backbone.marionette.js"></script>

<div class="test-container"></div>