我的 Rails 应用程序中的 Coffeescript 组织：一些 js 没有触发答案

【问题标题】：Coffeescript organization in my rails app: some js are not firing我的 Rails 应用程序中的 Coffeescript 组织：一些 js 没有触发
【发布时间】：2018-12-31 15:29:58
【问题描述】：

我正在尝试在我的 rails 应用程序中组织 js。我创建了一个 admin.js，我在其中加载了所有 js 文件

// load all images

import '../admin/images/init.js.erb';

// init global javascript
import '../admin/global/init';
import '../admin/global/app.menu';
import '../admin/global/app.input';

// init page specific javascript
import '../admin/page_specific/admin_home_index';
import '../admin/page_specific/admin_users_index';
import '../admin/page_specific/init';

// import vendor js
import 'datatables.net/js/jquery.dataTables.js'
import 'datatables.net-responsive/js/dataTables.responsive.js'
import 'datatables.net-select'
import 'datatables-bulma/js/dataTables.bulma';

我保持分离的全局 js，在每个页面上执行，页面特定的 js 和供应商 js。

在我的全局 js 中，我进行了初始化

window.App ||= {}

App.init = ->

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

其中一个全局脚本是

App.Menu =
  update: ->
    $(".navbar-burger").toggleClass("is-active");
    $(".navbar-menu").toggleClass("is-active");

$(document).on "click", "[data-behavior~=open-hamburger-menu]", =>
  App.Menu.update()

在我的页面特定 js 中，我有 init

class Init
 constructor: ->
   page = "#{$('body').data('page')}"
   @execute_page_js(page)
 execute_page_js: (page) ->
   if 'function' is typeof window.App[page]
     klass = window.App[page]
     new klass()

$(document).on 'turbolinks:load', ->
 new Init()

然后我有一些课

class App.adminHomeIndex
  constructor: ->
    console.log 'test'

我不明白为什么这个全局脚本不触发... 这是我的 global/app.input 文件，它不起作用

App.Input =
  updateName: ->
    console.log 'cio'
    # $('.file-name').html(input.files[0].name) if input.files.length > 0

$('.file .file-input').on "change", ->
  console.log 'ciao'
  App.Input.updateName()

为什么会有这种行为？有什么问题吗？

【问题讨论】：

您是否尝试过将您的 jQuery 代码包装在 $(document).ready(function(){}) 或 CoffeeScript $(document).ready -> 中，我猜？要尝试的另一件事是将console.log('hello world') 语句放在您的CoffeeScript 文件中App.init 之后。如果 'hello world' 没有打印到控制台，您的文件没有正确加载。如果它打印出来，你有一个 jQuery 问题。

标签： javascript ruby-on-rails coffeescript webpacker

【解决方案1】：

这是一个老问题，但我猜这不起作用，因为您使用的是 turbolinks，并且$('.file .file-input') 只会在页面上有任何与该选择器匹配的内容时激活，当运行 js 时（依此类推第一次加载）。

改为如下编写代码：

$(document).on "change", ".file .file-input", ->

这将捕获文档级别的任何change 并检查选择器是否适用。因此，这意味着回调将始终按预期工作，无论页面上的内容如何，稍后可能/将动态添加。

【讨论】：