Rails javascript包括无法正常工作

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 %>

应用程序.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()