Проблема с Jquery в компоненте плагина

Разработка
1

Включён ли jQuery автоматически для компонентов плагинов? Я что-то упустил на этапе настройки?

У меня возникают проблемы с простым доступом к HTML DOM через jQuery (конечная цель — использование функции autocomplete из jQuery). Вот пример одной из моих попыток: я пытаюсь получить ID элемента по его идентификатору, но элемент так и не находится. Создаётся впечатление, что у JavaScript нет точки отсчёта.

---- в /src/plugins/test/assets/javascripts/discourse/components ----
---- element-main.js.es6 ----
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import jQuery from 'jquery';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    console.log("в templates/components/element-main.js.es6");
    console.log(jQuery);
    const aaa = jQuery('#eleinp');
    console.log(aaa);
    console.log(aaa.attr('id'));
  }
});

---- в /src/plugins/test/assets/javascripts/discourse/templates/components ----
---- element-main.hbs ----
<p>element-main в шаблоне</p>
<input id="eleinp" value="HAHAHA">

Я также пробовал this.element, (this.element), (this), $() и другие варианты.

2

init слишком рано в жизненном цикле для применения jQuery. Кроме того, вам не нужно его импортировать. Наконец, вам следует оценить, действительно ли вам нужно использовать его изначально. Если вы всё же должны его использовать, то правильными местами будут didInsertElement или didRender.

3

Спасибо! Метод didRender() сработал отлично, я также убрал избыточное объявление импорта. Я использую jQuery, так как у меня есть пользовательский запрос поиска при вводе, который несовместим с HTML-элементом ‘datalist’. Это связано с тем, что datalist отображает варианты только тогда, когда они явно содержат подстроку.

4

Постарайтесь избегать jQuery, так как она будет удалена из Ember и, следовательно, из Discourse в течение следующих двух лет. Современного ванильного JavaScript достаточно.

5

Спасибо за предупреждение, я сейчас рассматриваю Awesomplete вместо автозаполнения JQuery.