Rails javascript include不能正常工作

Question

我正在应用程序上安装新的引导管理主题。

如果我像这样在应用程序主体div的末尾包含我的javascript文件，则效果很好

<%= javascript_include_tag 'app.min.e05f769f' %>
<%= javascript_include_tag 'plugins-init' %>
<%= javascript_include_tag 'switchery-settings' %>

<%= javascript_include_tag 'js/jquery.dataTables.min' %>
<%= javascript_include_tag 'js/dataTables.bootstrap.min' %>

<%= content_for?(:extra_scripts) ? yield(:extra_scripts) : nil %>

但是，如果我像这样通过application.js包含它们，则会得到不同的结果。

<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
<%= content_for?(:extra_scripts) ? yield(:extra_scripts) : nil %>

的application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks

//= require bootstrap-sprockets

//= require js/lib.min

//= require app.min.e05f769f
//= require plugins-init
//= require switchery-settings

//= require js/jquery.dataTables.min
//= require js/dataTables.bootstrap.min

//= require_tree ./app

//= require cocoon

//= require_tree .
//= require_self

在这里，我的导航栏链接和所有与javascript相关的功能都被禁用，我在控制台中遇到了此类错误

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:33719
    at application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:33719
    at application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:33719
highcharts-settings-26359110f393fbb0aa6bc3ffc41875fe5db4fc6e893003c0d7288e770583925c.js:3 Uncaught ReferenceError: Dashboard is not defined
    at HTMLDocument.<anonymous> (highcharts-settings-26359110f393fbb0aa6bc3ffc41875fe5db4fc6e893003c0d7288e770583925c.js:3)
    at u (lib.min-500a1a89656394ee5528d8f981d621eff7f09d649a35d99223d0f6eb23e011f5.js:2)
    at Object.fireWith [as resolveWith] (lib.min-500a1a89656394ee5528d8f981d621eff7f09d649a35d99223d0f6eb23e011f5.js:2)
    at Function.ready (lib.min-500a1a89656394ee5528d8f981d621eff7f09d649a35d99223d0f6eb23e011f5.js:2)
    at HTMLDocument.s (lib.min-500a1a89656394ee5528d8f981d621eff7f09d649a35d99223d0f6eb23e011f5.js:1)
clients:3096 Uncaught TypeError: $(...).DataTable is not a function
    at clients:3096
    at HTMLDocument.<anonymous> (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:31315)
    at HTMLDocument.dispatch (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:5227)
    at HTMLDocument.elemData.handle (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:4879)
    at Object.trigger (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:5131)
    at HTMLDocument.<anonymous> (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:5861)
    at Function.each (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:371)
    at jQuery.fn.init.each (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:138)
    at jQuery.fn.init.trigger (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:5860)
    at HTMLDocument.onLoad (application-7bd22507ed6202d2c9cdc970588f95759f6c5c6eaa7703cae22cbf0a7af22c5a.js:31320)

这两种方法有什么区别，包括这些文件的正确方法是什么？

Answer 1

我的猜测是您不会在JS文件中捕获Turbolinks事件。 就像您需要为jQuery使用$(document).ready() ，所有JS代码仅应在turbolinks:load事件触发后执行。 例如：

$(document).on "turbolinks:load", ->
  MyApp.init()