Masalahnya adalah persis apa judul mengatakan. JavaScript adalah aset pipa aku.e aset/javascripts/myfile.js.kopi Di application.js saya punya:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= requier twitter/bootstrap
//= require jasny-bootstrap
//= require_tree .
Ini adalah coffeescript
$(document).ready ->
$("#close").click ->
$(this).parent().parent().slideUp("slow")
$( "#datepicker" ).datepicker
dateFormat : "yy-mm-dd"
player_count = $("#player option").length
$('#btn-add').click ->
$('#users option:selected').each ->
if player_count >= 8
$('#select-reserve').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
else
$('#player').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
player_count++
$('#btn-remove').click ->
$('#player option:selected').each ->
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
player_count--
$('#btn-remove-reserve').click ->
$('#select-reserve option:selected').each ->
$('#users').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>")
$(this).remove()
$("#submit").click ->
$("select option").prop("selected", "selected")
Aku bisa melihat dalam kode sumber pada browser bahwa kode javaScript yang telah dimuat, tetapi hanya bekerja setelah saya reload halaman.
Untuk turbolinks 5.0 anda harus menggunakan turbolinks:beban acara, yang disebut pertama kali pada beban halaman dan setiap waktu pada turbolink kunjungi. Info lebih lanjut: https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads
CoffeeScript kode:
$(document).on 'turbolinks:load', ->
my_func()
Kode JavaScript:
document.addEventListener("turbolinks:load", function() {
my_func();
})
Ini adalah turbolinks masalah. Terima kasih untuk @zwippie untuk memimpin saya dalam arah yang benar! Solusinya adalah untuk membungkus saya coffeescript ini:
ready = ->
// functions
$(document).ready(ready)
$(document).on('page:load', ready)
Saya kira ini adalah turbolinks masalah.
Anda dapat menghapus turbolinks dari proyek anda atau memodifikasi naskah anda untuk sesuatu seperti:
$(function() {
initPage();
});
$(window).bind('page:change', function() {
initPage();
});
function initPage() {
// Page ready code...
}
Seperti yang disebutkan di sini.
Anda dapat menginstal jquery.turbolinks permata untuk memecahkan masalah tanpa mengubah Javascript anda.
Anda dapat memiliki anda jquery.turbolink tempat pada posisi yang tepat seperti ini
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
Dan pada Gemfile anda dapat menginstal jquery-turbolinks permata
gem 'jquery-turbolinks'
Jika anda bekerja dengan plugin JQuery seperti Jam Waktu Picker, pertama menggunakan jQuery dokumen siap
fungsi, yang menyebabkan naskah anda untuk menunggu sampai seluruh halaman di-load sebelum mencoba untuk menjalankan, dan kemudian anda dapat menggunakan turbolinks:beban
acara.
JQuery(function($) {
$(document).on('turbolinks:load', function() {
$('.time').clockTimePicker();
});
});
Itu baik untuk berada di app/assets/javascript/ js...
file
I'm mencoba Rel 5.2 dan menemukan bahwa 'turbolinks:beban'
itu't mendapatkan dimuat pertama kali beban halaman. Ini adalah apa yang perlu saya lakukan saya CoffeeScript file.
document.addEventListener('turbolinks:load', ->
# ... CoffeeScript code here
)
if !Turbolinks?
location.reload
Turbolinks.dispatch("turbolinks:load")