为什么所有的咖啡脚本文件总是同时执行 Rails答案

【问题标题】：Why all coffeescript files always executed all at once Rails为什么所有的咖啡脚本文件总是同时执行 Rails
【发布时间】：2018-02-05 22:46:20
【问题描述】：

我在资产文件夹中，每个模型都有不同的咖啡脚本文件。但是每次我访问一个页面时它们都会执行，即使它来自不同的控制器。如果我继续 /insertion/new 我希望只执行 insert.coffee，而不是我的所有 .coffee 开始。如何一次启动一个？

这是我的inserts.coffee

$(document).on "turbolinks:load", ->
  if ($('#insertion_book_search'))
    console.log("found")
  console.log($('#insertion_book_search').length)
  console.log($('#insertion_book_title').length)
  $('#insertion_books_subject').parent().hide()

那是我的 static_pages.coffee

$(document).on "turbolinks:load", ->
  console.log("Mie cose")
  $('.last_img').on 'load', ->
    natHeight = $(this).get(0).naturalHeight
    natWidth = $(this).get(0).naturalWidth
    if (natWidth > natHeight)
      $(this).css( 'width','100%')
    else
      $(this).css( 'height','100%')

我想要实现的是，当我使用插入控制器时，它只加载 insert.coffee，而当我使用静态页面控制器时，它只加载 static_pages.coffee。据我了解，当我将// require_tree . 行添加到/app/assets/javascript/application.js 时，我所有的咖啡都加载到了我的所有视图中。

如果我删除了 require 树并尝试使用添加它们，我需要一个 .js 文件而不是咖啡。可以加载咖啡文件吗？

【问题讨论】：

发布两个单独的咖啡脚本资产示例。我敢打赌你把他们绑在同一个赛事上，这就是他们都跑的原因。请记住，您可以将 coffeescript/js 放在不同的文件中，但它们都被编译成一个单独的文件。不同的文件名是为了帮助您组织脚本——它们不是命名空间。

标签： javascript ruby-on-rails ruby coffeescript

【解决方案1】：

您应该阅读有关 Rails 的更多信息asset pipeline。您的所有脚本都将被执行，因为您的 application.js 清单文件中很可能有 //= require_tree . directive。

如果你想手动指定动作的JS文件，你应该重新组织你的清单（至少从中删除//= require_tree .），然后你可以使用javascript_include_tag手动包含JS。更多信息here.

注意：如果您手动包含文件，而不在清单中提及它们，您还应该将Rails.application.config.assets.precompile += %w( path/to/file ) 添加到您的config/initializers/assets.rb 以使其预编译。否则你会得到一个异常告诉你去做。更多 here.

如果我删除了 require 树并尝试使用添加它们，我需要一个 .js 文件而不是咖啡。可以加载咖啡文件吗？

无论如何，您的咖啡脚本文件正在被预编译为 JS。您只需指定不带扩展名的文件名。

【讨论】：

【解决方案2】：

您可以使用coffeescript OOP方法进行选择，下面是您需要的详细信息和一些代码

我建议你用coffee with class方法，然后用事件turbolinks:load检查每个页面
您可以查看哪个页面的名称为控制器和方法例如 $(".purchase_requests.new")[0] 表示控制器是 purchase_requests 和方法新
另外，我建议您阅读 Brandon hilkert 博客以获取以下额外参考：the link

带有检查每个页面加载的示例咖啡脚本

class App.PurchaseRequest

  renderYourJavascript: ->
    console.log "purchase request js"

$(document).on "turbolinks:load", ->
  if $(".purchase_requests.new")[0] || $(".purchase_requests.edit")[0]  
    purchase_request = new App.PurchaseRequest
    purchase_request.renderYourJavascript()

从我上面的代码中可以看出，您可以通过检查 $(".controllers.action")[0] 进行拆分

【讨论】：

【解决方案3】：

您可以将 Coffeescript 逻辑封装在类中，然后在您实际需要调用该逻辑的视图中初始化该类。

所以你的咖啡文件看起来像这样：

class YourClass

   constructor: () ->
     # Anything here will be called when this object is instantiated
     @firstMethod()
     @secondMethod()

  firstMethod: () ->
    $('#some-element').click () ->
      alert('hello world')

  secondMethod: () ->
    console.log('second method triggered!')


window.YourClass = YourClass

然后，当您在特定视图中需要此逻辑时，您实际上只需初始化此对象：

<script>
  var yourClass = new YourClass();
</script>

您甚至可以调用特定的方法，将它们移出构造方法并在视图中显式调用它们：

<script>
  var yourClass = new YourClass();
  yourClass.methodNotInConstructor();
</script>

【讨论】：