javascript - 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 时，我正在使用的库在内部使用它

标签： javascriptbackbone.jshandlebars.jsmarionette

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.$() 查找一起使用。

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

第二次编辑：添加片段（抱歉，花了一段时间才找到较旧的木偶依赖项）

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>