Rails 5: Cách sử dụng $ (document) .ready () với turbo-links

Turbolinks ngăn $(document).ready()các sự kiện bình thường kích hoạt trên tất cả các lượt truy cập trang ngoài tải ban đầu, như đã thảo luận ở đây và ở đây . Tuy nhiên, không có giải pháp nào trong các câu trả lời được liên kết hoạt động với Rails 5. Làm cách nào để tôi có thể chạy mã trên mỗi lần truy cập trang như trong các phiên bản trước?

Thay vì lắng nghe readysự kiện, bạn cần tham gia vào sự kiện do Turbolinks kích hoạt cho mỗi lần truy cập trang.

Thật không may, Turbolinks 5 (là phiên bản xuất hiện trong Rails 5) đã được viết lại và không sử dụng các tên sự kiện giống như trong các phiên bản trước của Turbolinks, khiến các câu trả lời được đề cập không thành công. Những gì hoạt động bây giờ là lắng nghe turbolinks: tải sự kiện như vậy:

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

JS gốc:

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});

Trong rails 5, giải pháp đơn giản nhất là sử dụng:

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

Thay vì $(document).ready. Hoạt động như một sự quyến rũ.

Đây là giải pháp của tôi, ghi đè jQuery.fn.ready, sau đó $(document).readyhoạt động mà không có bất kỳ thay đổi nào:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

(Đối với coffeescript)

Tôi sử dụng: $(document).on 'turbolinks:load', ->

Thay vì: $(document).on('turbolinks:load', function() {...})

Đây là giải pháp phù hợp với tôi, từ đây :

1. Tải về gem 'jquery-turbolinks'

2. thêm tệp .coffee này vào ứng dụng của bạn: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. đặt tên cho nó là turbolinks-compatibility.coffee

4. tại application.js

   //= require jquery
   //= require jquery_ujs
   //= require jquery.turbolinks
   //= require turbolinks
   //= require turbolinks-compatibility
   

Trong khi chúng tôi chờ đợi bản sửa lỗi cho viên ngọc thực sự thú vị này, tôi đã có thể tiếp tục bằng cách sửa đổi phần sau;

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

đến:

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

Tôi chưa biết điều này không giải quyết được điều gì, nhưng nó có vẻ hoạt động tốt khi kiểm tra ban đầu.

Sử dụng đá quý jquery-turbolinks trọng lượng nhẹ .

Nó làm $(document).ready()việc với Turbolinks mà không cần thay đổi mã hiện có.

Ngoài ra, bạn có thể thay đổi $(document).ready()thành một trong số:

$(document).on('page:fetch', function() { /* your code here */ });

$(document).on('page:change', function() { /* your code here */ });

tùy thuộc vào cái nào thích hợp hơn trong hoàn cảnh của bạn.