Rails 4: cách sử dụng $ (tài liệu). Đã () với các liên kết turbo

Tôi gặp phải một vấn đề trong ứng dụng Rails 4 của mình trong khi cố gắng tổ chức các tệp JS "cách rails". Chúng trước đây nằm rải rác trên các quan điểm khác nhau. Tôi đã sắp xếp chúng thành các tệp riêng biệt và biên dịch chúng với đường dẫn tài sản. Tuy nhiên, tôi mới biết rằng sự kiện "sẵn sàng" của jQuery không kích hoạt các lần nhấp tiếp theo khi bật liên kết turbo. Lần đầu tiên bạn tải một trang nó hoạt động. Nhưng khi bạn nhấp vào một liên kết, mọi thứ bên trong ready( function($) {sẽ không được thực thi (vì trang không thực sự tải lại). Giải thích tốt: ở đây .

Vì vậy, câu hỏi của tôi là: cách đúng đắn để đảm bảo các sự kiện jQuery hoạt động chính xác trong khi các liên kết turbo được bật là gì? Bạn có bao bọc các tập lệnh trong một trình nghe dành riêng cho Rails không? Hoặc có thể đường ray có một số phép thuật làm cho nó không cần thiết? Các tài liệu hơi mơ hồ về cách thức hoạt động của tính năng này, đặc biệt là đối với việc tải nhiều tệp thông qua (các) tệp kê khai như application.js.

Đây là những gì tôi làm ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

dòng cuối cùng lắng nghe tải trang, đó là những gì liên kết turbo sẽ kích hoạt.

Chỉnh sửa ... thêm phiên bản Javascript (theo yêu cầu):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Chỉnh sửa 2 ... Đối với Rails 5 (Turbolinks 5) page:loadtrở thành turbolinks:loadvà thậm chí sẽ được bắn khi tải ban đầu. Vì vậy, chúng ta có thể làm như sau:

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

  ...your javascript goes here...

});

Tôi vừa học được một lựa chọn khác để giải quyết vấn đề này. Nếu bạn tải các jquery-turbolinksviên ngọc đó sẽ ràng buộc các sự kiện Rails Turbolinks đến document.readycác sự kiện, do đó bạn có thể viết jQuery của bạn theo cách thông thường. Bạn chỉ cần thêm jquery.turbolinksngay sau jquerytrong tệp kê khai js (theo mặc định application.js:).

Gần đây tôi thấy cách xử lý sạch sẽ và dễ hiểu nhất:

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

HOẶC LÀ

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

EDIT
Nếu bạn đã ủy thác các sự kiện được liên kết với document, hãy đảm bảo bạn đính kèm chúng bên ngoài readychức năng, nếu không chúng sẽ phục hồi trên mọi page:loadsự kiện (khiến các chức năng tương tự được chạy nhiều lần). Ví dụ: nếu bạn có bất kỳ cuộc gọi nào như thế này:

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

Đưa họ ra khỏi readychức năng, như thế này:

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

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

Các sự kiện được ủy quyền ràng buộc documentkhông cần phải bị ràng buộc vào readysự kiện.

Tìm thấy điều này trong tài liệu Rails 4 , tương tự như giải pháp của DemoZluk nhưng ngắn hơn một chút:

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

HOẶC LÀ

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

Nếu bạn có các tập lệnh bên ngoài gọi $(document).ready()hoặc nếu bạn không thể bận tâm viết lại tất cả JavaScript hiện có của mình, thì viên ngọc này cho phép bạn tiếp tục sử dụng $(document).ready()với TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Theo hướng dẫn đường ray mới , cách chính xác là làm như sau:

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

hoặc, trong cà phê:

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

Đừng nghe sự kiện $(document).readyvà chỉ có một sự kiện sẽ bị sa thải. Không có gì ngạc nhiên, không cần sử dụng đá quý jquery.turbolinks .

Điều này hoạt động với đường ray 4.2 trở lên, không chỉ đường ray 5.

LƯU Ý: Xem câu trả lời của @ SDP để biết giải pháp tích hợp sẵn

Tôi đã sửa nó như sau:

đảm bảo bạn bao gồm application.js trước khi các tệp js phụ thuộc ứng dụng khác được bao gồm bằng cách thay đổi thứ tự bao gồm như sau:

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

Xác định hàm toàn cục xử lý ràng buộc trong application.js

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

Bây giờ bạn có thể liên kết những thứ như:

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

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

Không có cách nào ở trên hoạt động với tôi, tôi đã giải quyết điều này bằng cách không sử dụng $ (tài liệu) của jQuery. Thay vào đó, nhưng sử dụng addEventListener.

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

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

Bạn phải sử dụng:

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

từ tài liệu turbolinks .

Hoặc là sử dụng

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

hoặc sử dụng hàm .on của jQuery để đạt được hiệu quả tương tự

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

xem tại đây để biết thêm chi tiết: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Thay vì sử dụng một biến để lưu chức năng "sẵn sàng" và liên kết nó với các sự kiện, bạn có thể muốn kích hoạt readysự kiện bất cứ khi nào page:loadkích hoạt.

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

Đây là những gì tôi đã làm để đảm bảo mọi thứ không được thực hiện hai lần:

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

Tôi thấy việc sử dụng jquery-turbolinksđá quý hoặc kết hợp $(document).readyvà $(document).on("page:load")hoặc sử dụng $(document).on("page:change")chính nó hoạt động bất ngờ - đặc biệt là nếu bạn đang trong quá trình phát triển.

Tôi tìm thấy bài viết sau đây rất hữu ích cho tôi và chi tiết việc sử dụng như sau:

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

Tôi hình dung tôi sẽ để cái này ở đây cho những người nâng cấp lên Turbolinks 5 : cách dễ nhất để sửa mã của bạn là đi từ:

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

đến:

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

Tham khảo: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

Đã thử nghiệm rất nhiều giải pháp cuối cùng đã đến. Điều này nhiều mã của bạn chắc chắn không được gọi hai lần.

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

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

Tôi thường làm như sau cho 4 dự án đường ray của tôi:

Trong application.js

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

Sau đó, trong phần còn lại của tệp .js, thay vì sử dụng $(function (){})tôi gọionInit(function(){})

Đầu tiên, cài đặt jquery-turbolinksđá quý. Và sau đó, đừng quên chuyển các tệp Javascript được bao gồm của bạn từ phần cuối của cơ thể application.html.erbsang tập tin của bạn <head>.

Như được mô tả ở đây , nếu bạn đã đặt liên kết javascript của ứng dụng vào chân trang vì lý do tối ưu hóa tốc độ, bạn sẽ cần chuyển nó vào thẻ để nó tải trước nội dung trong thẻ. Giải pháp này đã làm việc cho tôi.

Tôi thấy các chức năng của mình tăng gấp đôi khi sử dụng một chức năng readyvà turbolinks:loadvì vậy tôi đã sử dụng,

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

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

Bằng cách đó, chức năng của bạn sẽ không tăng gấp đôi nếu turbolinks được hỗ trợ!