Rails 4: cara menggunakan $ (dokumen) .ready () dengan turbo-links

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.

Inilah yang saya lakukan ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

baris terakhir mendengarkan pemuatan halaman yang akan memicu tautan turbo.

Edit ... menambahkan versi Javascript (per permintaan):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Sunting 2 ... Untuk Rails 5 (Turbolinks 5) page:loadmenjadi turbolinks:loaddan bahkan akan diaktifkan pada beban awal. Jadi kita bisa melakukan hal berikut:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Saya baru tahu opsi lain untuk menyelesaikan masalah ini. Jika Anda memuat satu jquery-turbolinkspermata itu akan mengikat peristiwa Rails Turbolinks ke document.readyacara sehingga Anda dapat menulis jQuery Anda dengan cara yang biasa. Anda cukup menambahkan jquery.turbolinkstepat setelah jquerydalam file mans js (secara default:) application.js.

Baru-baru ini saya menemukan cara yang paling bersih dan mudah dipahami untuk menghadapinya:

$(document).on 'ready page:load', ->
  # Actions to do

ATAU

$(document).on('ready page:load', function () {
  // Actions to do
});

EDIT
Jika Anda telah mendelegasikan acara yang terikat pada document, pastikan Anda melampirkannya di luar readyfungsi, jika tidak mereka akan mendapatkan pantulan pada setiap page:loadacara (menyebabkan fungsi yang sama dijalankan beberapa kali). Misalnya, jika Anda memiliki panggilan seperti ini:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Keluarkan mereka dari readyfungsi, seperti ini:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Acara yang didelegasikan terikat dengan documenttidak perlu terikat pada readyacara tersebut.

Menemukan ini di dokumentasi Rails 4 , mirip dengan solusi DemoZluk tetapi sedikit lebih pendek:

$(document).on 'page:change', ->
  # Actions to do

ATAU

$(document).on('page:change', function () {
  // Actions to do
});

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.turbolinks

Sesuai panduan rel baru , cara yang benar adalah dengan melakukan hal berikut:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

atau, dalam naskah kopi:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

Jangan dengarkan acara $(document).readydan 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.

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:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Tetapkan fungsi global yang menangani pengikatan application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Sekarang Anda dapat mengikat hal-hal seperti:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Tidak ada satu pun di atas yang berfungsi untuk saya, saya menyelesaikan ini dengan tidak menggunakan $ (dokumen) jQuery. Sudah, tetapi gunakan addEventListener sebagai gantinya.

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Anda harus menggunakan:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

dari turbolinks doc .

Baik gunakan

$(document).on "page:load", attachRatingHandler

atau gunakan fungsi .on jQuery untuk mencapai efek yang sama

$(document).on 'click', 'span.star', attachRatingHandler

lihat di sini untuk perincian lebih lanjut: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Alih-alih menggunakan variabel untuk menyimpan fungsi "siap" dan mengikatnya ke acara, Anda mungkin ingin memicu readyacara setiap kali page:loadmemicu.

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

Inilah yang telah saya lakukan untuk memastikan hal-hal tidak dieksekusi dua kali:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

Saya menemukan menggunakan jquery-turbolinkspermata atau menggabungkan $(document).readydan $(document).on("page:load")atau menggunakan $(document).on("page:change")dengan sendirinya berperilaku tak terduga - terutama jika Anda sedang dalam pengembangan.

Saya menemukan artikel berikut yang bekerja sangat baik bagi saya dan merinci penggunaan berikut ini:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

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:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

untuk:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Referensi: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Diuji begitu banyak solusi akhirnya sampai pada ini. Ini banyak kode Anda pasti tidak dipanggil dua kali.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Saya biasanya melakukan hal berikut untuk proyek rel 4:

Di application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

Kemudian di sisa file .js, alih-alih menggunakan $(function (){})I callonInit(function(){})

Pertama, instal jquery-turbolinkspermata. Dan kemudian, jangan lupa untuk memindahkan file Javascript Anda yang disertakan dari ujung tubuh Anda application.html.erbke 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.

Saya menemukan fungsi saya dua kali lipat ketika menggunakan fungsi untuk readydan turbolinks:loadjadi saya menggunakan,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

Dengan begitu fungsi Anda tidak berlipat ganda jika turbolinks didukung!