Problem mit jQuery in Plugin-Komponente

Entwickler
1

Ist jQuery automatisch für Plugin-Komponenten aktiviert? Habe ich einen Einrichtungsschritt übersehen?

Ich habe Probleme, einfach über jQuery auf das HTML-DOM zuzugreifen (mit dem Ziel, die Autocomplete-Funktion von jQuery zu nutzen). Hier ist ein Beispiel eines meiner Versuche, die ID eines Elements über seine ID abzurufen. Das Element wird nie gefunden. Es ist, als hätte das JavaScript keinen Bezugspunkt.

---- in /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'));
  }
});

---- in /src/plugins/test/assets/javascripts/discourse/templates/components ----
---- element-main.hbs ----
<p>element-main in temp</p>
<input id="eleinp" value="HAHAHA">

Ich habe auch dies.element, (this.element), (this), $() usw. ausprobiert.

2

init ist im Lebenszyklus zu früh, um jQuery anzuwenden. Außerdem musst du es nicht importieren. Schließlich solltest du prüfen, ob du jQuery überhaupt wirklich benötigst. Falls du es verwenden musst, sind didInsertElement oder didRender die richtigen Stellen dafür.

3

Vielen Dank! didRender() hat gut funktioniert. Ich habe auch die überflüssige Import-Anweisung entfernt. Ich verwende jQuery, da ich eine benutzerdefinierte Suchanfrage bei der Eingabe habe, die nicht mit dem HTML-Element ‘datalist’ harmoniert. Das liegt daran, dass datalist nur Optionen anzeigt, wenn diese explizit eine Teilzeichenkette enthalten.

4

Versuchen Sie, jQuery zu vermeiden, da es in den nächsten zwei Jahren aus Ember und damit auch aus Discourse entfernt wird. Modernes Vanilla JS ist ausreichend.

5

Danke für den Hinweis, ich schaue mir jetzt Awesomplete anstelle von JQueries Autocomplete an