插件组件中 jQuery 的问题

开发
1

jQuery 是否已自动为插件组件启用？我是否遗漏了某个设置步骤？

我在通过 jQuery 访问 HTML DOM 时遇到了问题（最终目标是使用 jQuery 的 自动完成功能）。以下是我的一次尝试示例，试图通过元素的 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("在 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)、$() 等方法。

1 个赞
2

init 在生命周期中过早，不适合应用 jQuery。此外，您无需导入它。最后，您需要评估是否真的需要首先使用它。如果您确实需要使用它，didInsertElement 或 didRender 才是正确的使用位置。

3 个赞
3

谢谢！didRender() 运行良好，我也移除了冗余的 import 语句。我使用了 jQuery，因为我在输入框上有一个自定义的搜索逻辑，它与 ‘datalist’ HTML 元素不兼容。这是因为 datalist 仅在选项明确包含子字符串时才会显示。

4

尽量避免使用 jQuery，因为它将在未来两年内从 Ember 以及 Discourse 中移除。原生现代 JavaScript 已足够。

6 个赞
5

谢谢提醒，我现在正在查看 Awesomplete，而不是 JQuery 的 autocomplete。

2 个赞