Bagaimana untuk Menjadikan `$(document).ready()` jQuery berfungsi dengan Pautan Turbo Rails 4?

Rails 4: Menggunakan '$(document).ready()' jQuery dengan Integrasi Pautan Turbo

Semasa bekerja pada Rails 4 aplikasi, pembangun sering menghadapi keperluan untuk menyusun fail JavaScript mereka dengan berkesan. Secara tradisinya, kod JavaScript tersebar di pelbagai paparan. Walau bagaimanapun, pendekatan yang lebih teratur melibatkan penyusunannya ke dalam fail berasingan dan menggunakan saluran paip aset.

Walau bagaimanapun, apabila Pautan Turbo didayakan, acara "sedia" jQuery menghadapi had. Semasa klik berikutnya, peristiwa "sedia" berhenti menyala, menjejaskan pelaksanaan kod dalam skopnya. Isu ini timbul kerana halaman tidak dimuatkan semula dengan Turbo-Links didayakan.

Untuk menyelesaikan masalah ini, adalah penting untuk memastikan acara jQuery berfungsi dengan sempurna manakala Turbo-Links kekal aktif. Dua pendekatan boleh dipertimbangkan:

Pendekatan 1: Pembalut Acara dengan Pendengar Khusus Rails

Kaedah ini melibatkan pembalut skrip JavaScript dalam pendengar khusus Rails, dengan berkesan memastikan mereka pelaksanaan apabila halaman dimuatkan.

Pendekatan 2: Menggunakan Acara Turbo-Links

Turbo-Links menyediakan acara khusus, "page:load," yang boleh digunakan untuk mencetuskan kod JavaScript yang diperlukan. Dengan memanfaatkan acara ini, pembangun boleh memintas isu yang disebabkan oleh klik berikutnya.

Untuk pengguna CoffeeScript, coretan kod berikut menawarkan penyelesaian:

ready = ->

  ...your coffeescript goes here...

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

Barisan terakhir coretan ini mendengar acara "page:load", yang dicetuskan oleh Turbo-Links.

Untuk pengguna JavaScript, perkara berikut kod setara boleh digunakan:

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Dalam Rails 5, dengan Turbolinks 5 yang dikemas kini, peristiwa "page:load" telah digantikan dengan "turbolinks:load," yang dicetuskan walaupun pada pemuatan halaman awal . Ini memudahkan kod kepada perkara berikut:

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

  ...your javascript goes here...

});

Dengan melaksanakan penyelesaian ini, pembangun boleh memastikan acara jQuery terus berfungsi dengan betul walaupun terdapat Pautan Turbo.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan `$(document).ready()` jQuery berfungsi dengan Pautan Turbo Rails 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!