마켓 플레이스 앱을 개발 중입니다. 판매자가 리스팅을 생성 할 때 지불 이체를 위해 은행 계좌 정보를 입력합니다. 판매자가 리스팅을 제출하면 coffeescript는 Stripe에서 토큰을받습니다. 앱의 첫 번째 버전을 개발할 때이 기능을 사용했습니다. 그런 다음 더 많은 기능을 추가했는데 어떤 이유로 이제 여기에 무슨 일이 발생하는지 ...
다음은 처음 제출하는 동안의 내 로그입니다. 마지막 행을 참조하십시오.
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
Turbolinks는 기본적으로 새 페이지 <body>태그를 로드 하고 <head>태그는 그대로 둡니다 . 이것의 문제는 <body>( DOM 이 새로 고쳐 졌기 때문에) Javascript가 새 요소에 바인딩 할 수 없다는 것입니다.
여기서 결론은 JS가 <body>Turbolinks에 의해로드 된 새로운 요소에 바인딩되지 않는 것처럼 들린다는 것 입니다. 이 문제를 해결하려면 jquery.turbolinksgem을 사용 하거나turbolinks event hooks
두 가지 모두 자세히 설명하겠습니다.
다음은 가장 간단한 해결 방법입니다.
#Gemfile
gem 'jquery-turbolinks', '~> 2.0.2'
이것은 Turbolinks page:load이벤트 콜백 내에서 JS 호출을 래핑하여 기본적으로 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)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다