如何使用 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 语句不是全局的，因此您需要在使用它的文件中需要库。

在应用程序中.js包文件添加以下内容：

import easydropdown from 'easydropdown';
document.addEventListener("turbolinks:load", () => {
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>标签(。

额外帮助：您是否正在使用刺激计划JS？

如果您的下拉列表连接到刺激控件，以下是一些提示：

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

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

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