Marionette document.querySelector ('# test') возвращает ноль, но при этом. $ ('# Test') не делает - PullRequest
Новая
       25

Marionette document.querySelector ('# test') возвращает ноль, но при этом. $ ('# Test') не делает

0 голосов
/ 23 сентября 2019

У меня есть простая марионетка 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 возвращает ноль по сравнению с этим. $, Мне нужно сделать document.querySelector, потому что библиотека, которую я используюиспользует его внутренне, когда я передаю идентификатор / класс

1 Ответ

1 голос
/ 25 сентября 2019

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

В onRender шаблон будет отображаться в памяти (то есть this. $ El), но еще не присоединен к DOM.

Вы можете использовать onAttachedесли HTML-код представления должен находиться в DOM.

Обратите внимание, что поиск в DOM выполняется медленнее, чем поиск в el представления, поэтому, если поиск не требуется в DOM, обычно лучше использовать onRender с этим. $ () lookups.

Редактировать: поскольку вы используете ItemView, должен использовать https://marionettejs.com/docs/v2.4.7/marionette.view.html#view-attach--onattach-event

2-е редактирование: добавление фрагмента (извините, потребовалось некоторое время, чтобы найти старые зависимости марионеток) 

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>
...