Rails javascript不能正常工作

Question

我正在一个应用程序上安装一个新的bootstrap管理主题。

如果我在应用程序主体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()