Question

我的application.html.erb文件中包含以下javascript include标记：

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

这会将以下内容输出到浏览器：

<link data-turbolinks-track="true" href="/assets/chosen.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/colorbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/conversations.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/footer.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/freelancer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/header.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jobs.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.c2selectbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.jscrollpane.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/popup.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/relationships.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/schedules.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/conversations.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/dynamic_forms.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/employer_profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jobs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/relationships.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/schedules.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/abstract-chosen.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/select-parser.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen.jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen-jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cocoon.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

出于某种原因，浏览器中的某些javascript（例如，下拉菜单）将无法工作，除非我还单独包含原始javascript_include_tag已输出的javascript文件。例如，除了原始的javascript_include_tag之外，javascript将无法工作，我还提出：

<%= javascript_include_tag "jquery-1.8.3.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.checkbox.radio.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.mousewheel.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.jscrollpane.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.carouFredSel-6.2.0-packed.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.c2selectbox.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "modernizr.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.colorbox-min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "functions.js", "data-turbolinks-track" => true %>

输出：

<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>

所以我不明白为什么javascript文件需要包含两次。我几乎可以肯定这是不正确的，它们应该只被包含一次，但我不能让js工作。我该如何解决？

注意 - 有很多javascript，所以我不确切知道在哪里，例如，下拉位置，但我知道javascript本身的工作原理。我几乎可以肯定这个问题与如何调用js文件有关。

Answer 1

在第一个包含你之前，你不包括jQuery，直到你包含jQuery UI，这可能有助于渲染菜单。再次加载文件后，依赖项就可用了......

尝试按照需要的顺序包含JavaScript，jQuery没有依赖关系，而jQuery UI依赖于jQuery，因此请确保在jQuery UI之前包含jQuery，并对具有依赖关系的任何其他JavaScript文件执行相同操作，确保在他们依赖的文件之后包含它们。

或者你可能每次都包含2个不同版本的jQuery：我在每个列表中看到jquery.js和jquery-1.8.3.min.js。 jquery-1.8.3.min.js出现在jQuery UI之后，这对我来说很糟糕。

Answer 2

包括 gem'turbolinks'
然后将 application.js 更改为

// =需要jquery
// =需要jquery_ujs
// =需要turbolinks
// =需要jquery-1.8.3.min
// = require_tree。

并且在布局中包含此＆lt;％= javascript_include_tag“应用程序”％＆gt;

你必须尝试这些步骤，不需要在布局中调用javascript文件，然后再使用application.js

rails 4 - javascript文件需要调用两次才能工作

2 个答案: