ruby-on-rails - 如何使用 Rails 6 安装 easydropdown

Question

easydropdown安装到 Rails 6的正确方法是什么？

我跑去yarn add easydropdown把它添加到我的应用程序中。似乎还可以；我验证了我的浏览器在 js 源代码中可以看到它。

在此之后，不完全确定该怎么做。在 app/javascripts/packs/application.js 中，我尝试添加这些行。没有导致错误。

• require('easydropdown')
• import easydropdown from 'easydropdown'
• import Easydropdown from 'easydropdown'- 案件重要吗？

但是在我的页面和 js 控制台中，我不断看到easydropdown is not defined.

我错过了什么？

Answer 1

使用 webpack 时，require 语句不是全局的，因此您需要在使用它的文件中 require 库。

在您的 application.js 包文件中添加以下内容：

import easydropdown from 'easydropdown';

document.addEventListener("turbolinks:load", () => {
  easydropdown('.easydropdown')
});

只要您的选择具有“easydropdown”类，这应该使它们全部工作。

您的样式需要添加到您的资产中或导入到此包文件中。

Answer 2

感谢@ben-trewern 帮助我到达这里。

对于 Rails 6，这对我有用：

1. yarn add easydropdown将其安装到您的 Rails 应用程序中

2. 将加载程序代码附加到app/javascripts/packs/application.js.

   我找到了两种可行的方法。老实说，我不知道哪个更好或为什么。

   选项 1：使用import

   import easydropdown from 'easydropdown';
   window.easydropdown = easydropdown;
   

   选项 2：使用require

   const easydropdown = require('easydropdown')
   window.easydropdown = easydropdown.default
   

3. 现在您可以easydropdown在视图中使用函数（包括<script>标签）。

额外帮助：您使用的是 Stimulus JS 吗？

如果您的下拉菜单连接到刺激控制器，这里有一些提示：

我发现我仍然必须分配window.easydropdown（上图）才能在我的控制器代码中调用 EDD。

似乎最直接的做法是调用easydropdown.select('#my-select')我的刺激控制器的initialize()方法，例如

export default class extends Controller {
  static targets = [...]
  initialize() {
    easydropdown.select('#region-switcher`);
    ...
  }
  ...