Question

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

卖方提交上市表格。咖啡脚本不开火。我点击按钮并再次提交表格。 coffeescript fires。

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

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文件如下。我暂时删除了所有其他j来测试它。

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

对可能发生的事情的任何想法？

Answer 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)

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

1 个答案: