Rails 4: วิธีใช้ $ (เอกสาร) .ready () พร้อมลิงค์เทอร์โบ

ฉันพบปัญหาในแอป Rails 4 ของฉันในขณะที่พยายามจัดระเบียบไฟล์ JS "ทางรถไฟ" ก่อนหน้านี้พวกเขากระจัดกระจายในมุมมองที่แตกต่างกัน ฉันจัดระเบียบพวกเขาเป็นไฟล์แยกต่างหากและรวบรวมพวกเขาด้วยท่อสินทรัพย์ อย่างไรก็ตามฉันเพิ่งรู้ว่าเหตุการณ์ "พร้อม" ของ jQuery ไม่ได้เกิดจากการคลิกครั้งต่อไปเมื่อเปิดการเชื่อมโยงแบบเทอร์โบ ครั้งแรกที่คุณโหลดหน้าเว็บ แต่เมื่อคุณคลิกลิงก์สิ่งใดก็ตามที่อยู่ภายในready( function($) {จะไม่ถูกดำเนินการ (เนื่องจากหน้าเว็บไม่ได้โหลดอีกครั้ง) คำอธิบายที่ดี: ที่นี่

ดังนั้นคำถามของฉันคืออะไรวิธีที่เหมาะสมเพื่อให้แน่ใจว่าเหตุการณ์ jQuery ทำงานอย่างถูกต้องในขณะที่ลิงค์เทอร์โบเปิดอยู่ คุณใส่สคริปต์ในตัวฟังเฉพาะของ Rails หรือไม่? หรือราวอาจมีเวทมนตร์ที่ทำให้มันไม่จำเป็น? เอกสารนั้นค่อนข้างคลุมเครือเกี่ยวกับวิธีการใช้งานโดยเฉพาะอย่างยิ่งการโหลดไฟล์หลายไฟล์ผ่านไฟล์ Manifest เช่น application.js

นี่คือสิ่งที่ฉันทำ ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

บรรทัดสุดท้ายรับฟังการโหลดหน้าซึ่งเป็นสิ่งที่ลิงค์เทอร์โบจะทริกเกอร์

แก้ไข ... เพิ่มรุ่น Javascript (ต่อคำขอ):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

แก้ไข 2 ... สำหรับ Rails 5 (Turbolinks 5) page:loadกลายเป็นturbolinks:loadและจะถูกยิงแม้ในการโหลดครั้งแรก ดังนั้นเราสามารถทำสิ่งต่อไปนี้:

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

  ...your javascript goes here...

});

ฉันเพิ่งเรียนรู้วิธีการอื่นในการแก้ปัญหานี้ ถ้าคุณโหลดอัญมณีก็จะผูกเหตุการณ์ Rails Turbolinks กับเหตุการณ์ที่เกิดขึ้นเพื่อให้คุณสามารถเขียน jQuery ของคุณในทางปกติ คุณเพียงแค่เพิ่มทันทีหลังจากที่ใน js ไฟล์ Manifest (โดยค่าเริ่มต้น: )jquery-turbolinksdocument.readyjquery.turbolinksjqueryapplication.js

เมื่อเร็ว ๆ นี้ฉันพบวิธีจัดการกับวิธีที่สะอาดและเข้าใจง่ายที่สุด:

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

หรือ

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

แก้ไข
หากคุณได้มอบหมายกิจกรรมที่ถูกผูกไว้กับdocumentให้แน่ใจว่าคุณแนบไว้นอกreadyฟังก์ชั่นมิฉะนั้นพวกเขาจะได้รับการตอบสนองในทุกpage:loadเหตุการณ์ (ทำให้ฟังก์ชั่นเดียวกันทำงานหลายครั้ง) ตัวอย่างเช่นหากคุณมีสายเช่นนี้:

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

นำพวกเขาออกจากreadyฟังก์ชั่นเช่นนี้:

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

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

เหตุการณ์ที่ได้รับมอบหมายผูกพันกับ documentไม่จำเป็นต้องถูกผูกไว้กับreadyเหตุการณ์

พบสิ่งนี้ในเอกสารประกอบ Rails 4ซึ่งคล้ายกับโซลูชันของ DemoZluk แต่สั้นกว่าเล็กน้อย:

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

หรือ

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

หากคุณมีสคริปต์ภายนอกที่โทรออก$(document).ready()หรือไม่สามารถเขียนจาวาสคริปต์ที่มีอยู่ทั้งหมดของคุณใหม่ได้อัญมณีนี้จะช่วยให้คุณสามารถใช้งาน$(document).ready()กับ TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

ตามคู่มือรางใหม่วิธีที่ถูกต้องคือทำดังต่อไปนี้:

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

หรือในกาแฟ:

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

อย่าฟังเหตุการณ์$(document).readyและมีเหตุการณ์เดียวเท่านั้นที่จะถูกไล่ออก ไม่น่าประหลาดใจไม่จำเป็นต้องใช้อัญมณีjquery.turbolinks

ใช้งานได้กับราง 4.2 ขึ้นไปไม่เพียง แต่ราง 5

หมายเหตุ: ดูคำตอบของ @ SDP สำหรับโซลูชันที่สะอาดและมีอยู่ภายใน

ฉันแก้ไขมันดังนี้

ตรวจสอบให้แน่ใจว่าคุณได้รวม application.js ก่อนที่จะรวมไฟล์ js ที่ขึ้นกับแอพอื่นด้วยการเปลี่ยนลำดับการรวมดังนี้:

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

กำหนดฟังก์ชั่นระดับโลกที่จัดการผูกพัน application.js

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

ตอนนี้คุณสามารถผูกสิ่งต่าง ๆ เช่น:

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

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

ไม่มีข้อใดที่ได้ผลสำหรับฉันฉันแก้ไขสิ่งนี้โดยไม่ใช้ $ (เอกสาร) ของ jQuery แต่พร้อมใช้ addEventListener แทน

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

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

คุณต้องใช้:

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

จาก doc

ทั้งใช้

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

หรือใช้ฟังก์ชัน. on ของ jQuery เพื่อให้ได้ผลเช่นเดียวกัน

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

ดูที่นี่สำหรับรายละเอียดเพิ่มเติม: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

แทนที่จะใช้ตัวแปรเพื่อบันทึกฟังก์ชัน "พร้อม" และผูกไว้กับเหตุการณ์คุณอาจต้องการทริกเกอร์readyเหตุการณ์เมื่อใดก็ตามที่page:loadเรียก

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

นี่คือสิ่งที่ฉันได้ทำเพื่อให้แน่ใจว่าสิ่งต่าง ๆ จะไม่ถูกดำเนินการสองครั้ง:

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

ฉันพบว่าการใช้jquery-turbolinksอัญมณีหรือการรวม$(document).readyและ$(document).on("page:load")หรือใช้งาน$(document).on("page:change")ด้วยตัวเองทำงานโดยไม่คาดคิด - โดยเฉพาะถ้าคุณกำลังพัฒนา

ฉันพบบทความต่อไปนี้ซึ่งทำงานได้ดีสำหรับฉันและรายละเอียดการใช้งานต่อไปนี้:

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

ฉันคิดว่าฉันจะออกจากที่นี่เพื่ออัปเกรดเป็นTurbolinks 5 : วิธีที่ง่ายที่สุดในการแก้ไขรหัสของคุณคือการไปจาก:

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

ถึง:

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

การอ้างอิง: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

ทดสอบวิธีการแก้ปัญหามากมายจนในที่สุดก็มาถึงนี้ รหัสของคุณจำนวนมากนี้ไม่ได้ถูกเรียกสองครั้งอย่างแน่นอน

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

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

ฉันมักจะทำสิ่งต่อไปนี้สำหรับโครงการ 4 รางของฉัน:

ใน application.js

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

จากนั้นในไฟล์. js ที่เหลือแทนที่จะใช้$(function (){})ฉันโทรonInit(function(){})

ก่อนอื่นให้ติดตั้งjquery-turbolinksgem จากนั้นอย่าลืมย้ายไฟล์ Javascript ที่รวมอยู่ออกจากส่วนท้ายของเนื้อหาapplication.html.erbไปยัง<head>ไฟล์

ตามที่อธิบายไว้ที่นี่หากคุณใส่ลิงก์จาวาสคริปต์ลงในส่วนท้ายเพื่อเหตุผลในการเพิ่มประสิทธิภาพความเร็วคุณจะต้องย้ายไปไว้ที่แท็กเพื่อให้โหลดได้ก่อนเนื้อหาในแท็ก วิธีนี้ใช้ได้ผลสำหรับฉัน

ฉันพบว่าฟังก์ชั่นของฉันเพิ่มเป็นสองเท่าเมื่อใช้ฟังก์ชั่นสำหรับreadyและturbolinks:loadดังนั้นฉันจึงใช้

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

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

วิธีนี้จะทำให้ฟังก์ชั่นของคุณไม่เพิ่มเป็นสองเท่าหากรองรับ turbolinks