Saya mengalami masalah dalam aplikasi Rails 4 saya ketika mencoba mengatur file JS "the rails way". Mereka sebelumnya tersebar di berbagai pandangan. Saya mengorganisasikannya ke dalam file terpisah dan mengkompilasinya dengan pipa aset. Namun, saya baru tahu bahwa acara "siap" jQuery tidak memunculkan klik berikutnya saat penautan turbo dihidupkan. Pertama kali Anda memuat halaman itu berfungsi. Tetapi ketika Anda mengklik sebuah tautan, apa pun di dalamnya ready( function($) {
tidak akan dieksekusi (karena halaman tersebut tidak benar-benar dimuat lagi). Penjelasan yang bagus: di sini .
Jadi pertanyaan saya adalah: Apa cara yang tepat untuk memastikan bahwa acara jQuery bekerja dengan baik saat tautan turbo aktif? Apakah Anda membungkus skrip dalam pendengar khusus Rails? Atau mungkin rel memiliki sihir yang membuatnya tidak perlu? Dokumen agak kabur tentang bagaimana ini seharusnya bekerja, terutama berkenaan dengan memuat banyak file melalui manifes (s) seperti application.js.
sumber
var ready = function() { ... } $(document).ready(ready) $(document).on('page:load', ready)
Apakah ada kekhawatiran untuk keduanya.ready
dan'page:load'
dipicu?ready
acara dipecat. Jika beban turbolinks, hanya denganpage:load
acara dipecat. Tidak mungkin untuk keduanyaready
danpage:load
dipecat pada halaman yang sama.page:load
danready
dengan memasukkan string yang dipisahkan spasi untuk argumet pertama.$(document).on('page:load ready', ready);
Argumen kedua hanyalah sebuah fungsi, yang kebetulan diberi namaready
, mengikuti contoh jawaban ini.Saya baru tahu opsi lain untuk menyelesaikan masalah ini. Jika Anda memuat satu
jquery-turbolinks
permata itu akan mengikat peristiwa Rails Turbolinks kedocument.ready
acara sehingga Anda dapat menulis jQuery Anda dengan cara yang biasa. Anda cukup menambahkanjquery.turbolinks
tepat setelahjquery
dalam file mans js (secara default:)application.js
.sumber
//= require jquery.turbolinks
manifes (mis. Application.js).Baru-baru ini saya menemukan cara yang paling bersih dan mudah dipahami untuk menghadapinya:
ATAU
EDIT
Jika Anda telah mendelegasikan acara yang terikat pada
document
, pastikan Anda melampirkannya di luarready
fungsi, jika tidak mereka akan mendapatkan pantulan pada setiappage:load
acara (menyebabkan fungsi yang sama dijalankan beberapa kali). Misalnya, jika Anda memiliki panggilan seperti ini:Keluarkan mereka dari
ready
fungsi, seperti ini:Acara yang didelegasikan terikat dengan
document
tidak perlu terikat padaready
acara tersebut.sumber
ready()
fungsi terpisah . Bonus upvotes untuk penjelasan mengikat acara yang didelegasikan di luarready
fungsi.$(document).on( "ready", handler ), deprecated as of jQuery 1.8.
jquery / readyready
porsinya dibuat tidak valid dengan menggunakan permata?Menemukan ini di dokumentasi Rails 4 , mirip dengan solusi DemoZluk tetapi sedikit lebih pendek:
ATAU
Jika Anda memiliki skrip eksternal yang memanggil
$(document).ready()
atau jika Anda tidak dapat repot menulis ulang semua JavaScript yang ada, maka permata ini memungkinkan Anda untuk tetap menggunakan$(document).ready()
TurboLinks: https://github.com/kossnocorp/jquery.turbolinkssumber
Sesuai panduan rel baru , cara yang benar adalah dengan melakukan hal berikut:
atau, dalam naskah kopi:
Jangan dengarkan acara
$(document).ready
dan hanya satu acara yang akan dipecat. Tidak ada kejutan, tidak perlu menggunakan permata jquery.turbolinks .Ini bekerja dengan rel 4.2 dan di atas, tidak hanya rel 5.
sumber
"turbolinks:load"
acara bekerja di Rails 4.2? Theturbolinks:
Acara awalan diperkenalkan di New Turbolinks dan tidak digunakan dalam Rails 4.2 IIRC yang menggunakan Turbolinks Klasik . Pertimbangkan untuk mencoba"page:change"
jika"turbolinks:load"
tidak bekerja pada aplikasi pre-Rails 5 Anda. Lihat panduan.rubyonrails.org/v4.2.7/…page:change
atau perbarui turbolinks. Juga menemukan ini, mungkin relevan bagi sebagian orang, di mana turbolink menerjemahkan acara ke nama acara lama: github.com/turbolinks/turbolinks/blob/v5.0.0/src/turbolinks/…alert "page has loaded!"
kebutuhan untuk membuat indentasi benar-benar dijalankan oleh fungsi panggilan balik?CATATAN: Lihat jawaban @ SDP untuk solusi yang bersih dan terintegrasi
Saya memperbaikinya sebagai berikut:
pastikan Anda menyertakan application.js sebelum file js yang bergantung pada aplikasi lainnya disertakan dengan mengubah urutan sertakan sebagai berikut:
Tetapkan fungsi global yang menangani pengikatan
application.js
Sekarang Anda dapat mengikat hal-hal seperti:
sumber
ready
acara, berarti ini Anda dapat menggunakan "standar" cara menginisialisasi:$(document).ready(function() { /* do your init here */});
. Kode init Anda harus dipanggil ketika halaman lengkap dimuat (-> tanpa turbolinks) dan kode init Anda harus dieksekusi lagi ketika Anda memuat halaman melalui turbolinks. Jika Anda ingin menjalankan beberapa kode SAJA ketika turbolink telah digunakan:$(document).on('page:load', function() { /* init only for turbolinks */});
Tidak ada satu pun di atas yang berfungsi untuk saya, saya menyelesaikan ini dengan tidak menggunakan $ (dokumen) jQuery. Sudah, tetapi gunakan addEventListener sebagai gantinya.
sumber
sumber
turbolinks:load
pada halaman pertama dimuat, Safari tidak dan cara hacky untuk memperbaikinya (memicuturbolinks:load
aktifapplication.js
) jelas memecah Chrome (yang menyala dua kali dengan ini). Ini jawaban yang benar. Pasti pergi dengan 2 acaraready
danturbolinks:load
.Anda harus menggunakan:
dari turbolinks doc .
sumber
Baik gunakan
atau gunakan fungsi .on jQuery untuk mencapai efek yang sama
lihat di sini untuk perincian lebih lanjut: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html
sumber
Alih-alih menggunakan variabel untuk menyimpan fungsi "siap" dan mengikatnya ke acara, Anda mungkin ingin memicu
ready
acara setiap kalipage:load
memicu.sumber
Inilah yang telah saya lakukan untuk memastikan hal-hal tidak dieksekusi dua kali:
Saya menemukan menggunakan
jquery-turbolinks
permata atau menggabungkan$(document).ready
dan$(document).on("page:load")
atau menggunakan$(document).on("page:change")
dengan sendirinya berperilaku tak terduga - terutama jika Anda sedang dalam pengembangan.sumber
$(document).off
sedikit pun di "halaman: ubah" fungsi anonim di atas itu jelas akan mengingatkan ketika saya sampai ke halaman itu. Tetapi setidaknya dalam pengembangan menjalankan WEBrick, itu juga akan mengingatkan ketika saya mengklik tautan ke halaman lain. Kejadian yang lebih buruk, peringatan itu muncul dua kali ketika saya mengklik kembali tautan ke halaman asli.Saya menemukan artikel berikut yang bekerja sangat baik bagi saya dan merinci penggunaan berikut ini:
sumber
Saya pikir saya akan meninggalkan ini di sini untuk mereka yang memperbarui ke Turbolinks 5 : cara termudah untuk memperbaiki kode Anda adalah dengan mulai dari:
untuk:
Referensi: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346
sumber
sumber
turbolinks:load
peristiwa kebakaran untuk buka halaman awal serta setelah link berikut. Jika Anda melampirkan suatu acara keready
acara standar danturbolinks:load
acara tersebut, acara akan menyala dua kali saat Anda pertama kali mengunjungi halaman.ready
api dua kali pada halaman berikutnya. Silakan ubah atau hapus.Diuji begitu banyak solusi akhirnya sampai pada ini. Ini banyak kode Anda pasti tidak dipanggil dua kali.
sumber
Saya biasanya melakukan hal berikut untuk proyek rel 4:
Di
application.js
Kemudian di sisa file .js, alih-alih menggunakan
$(function (){})
I callonInit(function(){})
sumber
Pertama, instal
jquery-turbolinks
permata. Dan kemudian, jangan lupa untuk memindahkan file Javascript Anda yang disertakan dari ujung tubuh Andaapplication.html.erb
ke file Javascript -nya<head>
.Seperti yang dijelaskan di sini , jika Anda telah meletakkan tautan javascript aplikasi di footer untuk alasan optimasi kecepatan, Anda harus memindahkannya ke dalam tag sehingga dimuat sebelum konten di dalam tag. Solusi ini berhasil untuk saya.
sumber
Saya menemukan fungsi saya dua kali lipat ketika menggunakan fungsi untuk
ready
danturbolinks:load
jadi saya menggunakan,Dengan begitu fungsi Anda tidak berlipat ganda jika turbolinks didukung!
sumber