Coffeescript 仅在页面重新加载时触发 - Rails 4答案

【问题标题】：Coffeescript firing only on page reloads - Rails 4Coffeescript 仅在页面重新加载时触发 - Rails 4
【发布时间】：2014-10-02 22:10:21
【问题描述】：

我正在开发一个市场应用程序。当卖家创建列表时，他们会输入他们的银行账户信息以进行付款转账。当卖家提交listing时，coffeescript会从Stripe获得一个token。当我开发应用程序的第一个版本时，我得到了这个工作。然后我添加了更多功能，现在由于某种原因，这就是发生的事情......

卖家提交列表表格。咖啡脚本不会触发。我点击返回按钮并再次提交表单。咖啡脚本着火了。

这是我第一次提交时的日志 - 见最后一行：

Parameters: {"utf8"=>"√", "authenticity_token"=>"S4hE7Ku7XsOII6cxTWa+Hoc7+O7bk
Whgk/zo3CODyBw=", "listing"=>{"name"=>"test johntemp", "description"=>"ssfdfsd",
"price"=>"22", "category"=>"Necklaces", "inventory"=>"3", "image"=>#<ActionDisp
atch::Http::UploadedFile:0x3fb15a0 @tempfile=#<Tempfile:C:/Users/amoosa/AppData/
Local/Temp/RackMultipart20140809-3840-4pno42>, @original_filename="gold-chain-br
acelet.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-dat
a; name=\"listing[image]\"; filename=\"gold-chain-bracelet.jpg\"\r\nContent-Type
: image/jpeg\r\n">}, "commit"=>"Create Listing"}

这是我在点击返回按钮再次点击提交后的日志。请注意在下方创建的银行令牌，但不在上方。在此处查看最后一行。

 Parameters: {"utf8"=>"√", "authenticity_token"=>"WI5hCZpxIvpZ+Jq3ifwU+vVYKNoUd
 0RRCWTrYKmMKAA=", "listing"=>{"name"=>"test lister item", "description"=>"sdsf",
 "price"=>"22", "category"=>"Necklaces", "inventory"=>"4", "image"=>#<ActionDisp
 atch::Http::UploadedFile:0x3fdc7b8 @tempfile=#<Tempfile:C:/Users/amoosa/AppData/
 Local/Temp/RackMultipart20140809-3840-qetwl0>, @original_filename="mosaic-enamel
 -bracelet.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-
 data; name=\"listing[image]\"; filename=\"mosaic-enamel-bracelet.jpg\"\r\nConten
 t-Type: image/jpeg\r\n">}, "stripeToken"=>"btok_4YcZ4SdyNHG0Y0"}

我的 application.js 文件如下。我暂时删除了所有其他 js 以进行测试。

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap

对可能发生的事情有什么想法吗？

【问题讨论】：

你在使用turbolinks吗？
是的，在上面的js里。

标签： javascript jquery ruby-on-rails forms coffeescript

【解决方案1】：

Turbolinks

听起来你对Turbolinks 有疑问

Turbolinks 本质上是加载新页面 <body> 标签，而 <head> 标签完好无损。这样做的问题是它会阻止您的 Javascript 能够绑定到您的 <body> 中的新元素（因为 DOM 已被刷新）

这里的底线是，在我看来，您的 JS 没有绑定到 Turbolinks 加载的新 <body> 元素。要解决此问题，您可以使用 jquery.turbolinks gem 或 turbolinks event hooks

我会为你详细说明：

jquery.turbolinks

这是最简单的解决方法：

#Gemfile
gem 'jquery-turbolinks', '~> 2.0.2'

这将您的 JS 调用包装在 Turbolinks page:load 事件回调中 - 实质上允许您的 JS 变得对 turbolinks 友好。这种宝石的美妙之处在于您无需做任何事情即可使其工作：

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require_tree .
//= require bootstrap
//= require turbolinks

事件挂钩

解决问题的正确方法是将您的事件绑定到Turbolinks 事件挂钩；让您的 JS 始终从页面上的元素正确委派：

#app/assets/javascripts/application.js.coffee
your_function = ->
  $(your).functionality(here)

$(document).on("page:load ready", your_function)

【讨论】：

Rich，我已经安装了 turbolinks gem。我之前有这个工作。看起来我一路上做了其他事情导致它停止射击。还有什么我可以检查的吗？
实际上，我在 gemfile 中有 gem turbolinks，在 application.js 中有 require turbolinks。与您推荐的jquery-turbolinks 相比有什么不同？