无法使用 Rails 供应商文件夹中 Ruby 中的 jQuery 插件

Question

我正在尝试使用 jQuery 库 Knob 为交互式优化系统创建一个正常运行的 dial/meter 系统。我已将该库添加到我的供应商文件夹中，并将供应商 javascripts 文件夹包含在我的 application.js.

中

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.

在我看来，我已经添加了一些测试代码以确保 jQuery 正常工作（我知道，我知道，关注点分离——我会将 JS 移至资产文件夹，一旦我完成测试）。

app/views/static_pages/simutronx.html.erb

<% provide(:title, "The SimutronX") %>
  <h1>The SimutronX</h1>
  <p>Some test text</p>
  <input type="text" class="dial" data-min="-50" data-max="50">
  <%= javascript_tag do %>
    $(document).ready(function(){
      $("p").hide();  
      $(".dial").knob();
    });
  <% end %>

从 documentation 看来，库似乎应该将 .dial class 样式设置为表盘，但事实并非如此。相反，输入字段保留为标准输入字段。此外，大约 50% 的时间测试文本无法在页面加载时隐藏。

可能出了什么问题？

更新

我已经检查过，似乎 jQuery 和插件至少有时是通过资产管道加载的。

然而，不仅插件 JavaScript 无法工作（我本可以将其视为可能是库的问题——尽管考虑到该库的流行程度不太可能），但有一半的时间 jQuery 仍然无法正常工作，即使它似乎加载正确，并且代码具有文档就绪功能，这可能是我对问题原因的第一个想法...

我现在还添加了这些 jQuery 和 jQuery 旋钮插件到 assets.rb.

Rails.application.config.assets.precompile += %w( jquery-3.2.0.min.js )
Rails.application.config.assets.precompile += %w( jquery.knob.min.js )

我在布局视图中添加了 jQuery 包含标签。

<%= javascript_include_tag "jquery-3.2.0.min", "application" %>

我已经在视图中添加了 jQuery Knob 插件，simuntronx.html.erb.

<%= javascript_include_tag "jquery.knob.min" %>

我已经在 simuntronx 中测试了内联 JavaScript。html.erb 视图。

<p onclick="this.style.backgroundColor='#990000'">Some more test text</p>

内联 JavaScript 似乎每次都有效。

Answer 1

我解决了一个类似的问题，我无法使用 jquery-ui 的效果。我通过创建具有特定布局的测试控制器找到了解决方案。

阅读更多内容以创建特定布局

在此布局中，我将使用 jquery 和 jquery-ui 的 cdn 版本，因为它适用于 CDN，而不适用于 jquery-ui gem，我了解到第一个问题是 gem。

正在下载 jquery-ui（其中还包括 jquery 文件）并在我的 vendor/assets/javascripts 样式表解决了问题

其他 javascript 文件不会导致任何其他问题，但使用此测试控制器也测试样式表，我发现特定的自定义 css 样式表破坏了 jquery-ui效果。

我可以通过删除样式表来解决这个问题，但是其中包含很多不错的效果（因为我正在使用布局）。

在这一点上，我刚开始使用 chrome 开发人员工具取消注释 link 具有的所有 css 属性，因此我通过测试 css 的效果发现属性正在制造问题

例如，确实造成冲突的 css 属性与 a tag

a {
    color: #28c3ab;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

Answer 2

我找到了问题的根源，这是 knob.js 和 kontrol.js 库本身的问题。由于当前分发文件中的错误，这些库无法解析，这反过来导致 jQuery 无法间歇性地工作，因为浏览器试图包含插件并且失败似乎干扰了解释jQuery 代码本身。一旦我删除了这些，jQuery 工作正常。

我现在添加了一个可以正常工作的不同的 js 库。

无法使用 Rails 供应商文件夹中 Ruby 中的 jQuery 插件

Unable to use jQuery plugin placed in the Ruby on Rails vendor folder

javascript

jquery

ruby-on-rails

vendor

jquery-knob