플러그인 컴포넌트에서 jQuery 문제 발생

개발
1

플러그인 컴포넌트에 대해 jQuery가 자동으로 활성화됩니까? 설정 단계를 놓친 건가요?

jQuery를 통해 HTML DOM에 단순히 접근하는 데 문제가 있습니다(최종 목표는 jQuery의 autocomplete 기능을 사용하는 것입니다). 다음은 제 시도 중 하나입니다. id를 사용하여 요소의 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("in the 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 in temp</p>
<input id="eleinp" value="HAHAHA">

이 외에도 this.element, (this.element), (this), $() 등을 시도해 보았습니다.

2

init은 jQuery를 적용하기에는 라이프사이클에서 너무 이른 단계입니다. 또한 jQuery를 별도로 가져올 필요도 없습니다. 마지막으로, jQuery를 정말로 사용해야 하는지 먼저 평가해 보시기 바랍니다. 사용해야 한다면, didInsertElement나 didRender가 이를 적용하기 위한 올바른 위치입니다.

3

감사합니다! didRender()가 잘 작동했고, 중복된 import 문도 제거했습니다. ‘datalist’ HTML 요소와 호환되지 않는 커스텀 검색 구문을 입력 시 사용해야 하므로 jQuery를 사용하고 있습니다. datalist는 명시적으로 부분 문자열을 포함하는 경우에만 옵션을 표시하기 때문입니다.

4

jQuery는 향후 2년 안에 Ember, 그리고 Discourse에서 제거될 예정이므로 사용을 피하세요. 최신 표준 JS만으로도 충분합니다.

5

알려줘서 고마워요. 이제 JQuery의 autocomplete 대신 Awesomplete를 사용해보려고 해요.