रेल्स 5: टर्बो-लिंक्स के साथ $ (डॉक्यूमेंट) का उपयोग कैसे करें

Question

टर्बोलिंक सामान्य $(document).ready()घटनाओं को प्रारंभिक भार के अलावा सभी पृष्ठ यात्राओं पर गोलीबारी से रोकता है , जैसा कि यहां और यहां चर्चा की गई है । लिंक किए गए उत्तरों में से कोई भी समाधान रेल 5 के साथ काम नहीं करता है, हालांकि। मैं पूर्व संस्करणों की तरह प्रत्येक पृष्ठ विज़िट पर कोड कैसे चला सकता हूं?

Answer 1

readyघटना को सुनने के बजाय , आपको हर पृष्ठ पर आने के लिए टर्बोलिंक्स द्वारा निकाले गए कार्यक्रम में हुक करने की आवश्यकता है।

दुर्भाग्य से, टर्बोलिंक 5 (जो कि रेल्स 5 में दिखाई देने वाला संस्करण है) को फिर से लिखा गया है, और टर्बोलिंक्स के पिछले संस्करणों के समान घटना के नामों का उपयोग नहीं करता है, जिससे उत्तर विफल हो जाते हैं। टर्बोलिंक को सुनने के लिए अब क्या काम करता है : भार घटना जैसे:

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

Comments

हाँ। यहाँ भी समझाया। guide.rubyonrails.org/… । 5.2 पृष्ठ परिवर्तन घटनाओं की जाँच करें।

— इंडिका के

टर्बोलिंक: स्थानीय रूप से मेरे लिए लोड फायर करता है, लेकिन हरोकू पर नहीं। मुझे अपने संकलित js आस्तियों में अपना कस्टम जावास्क्रिप्ट कोड दिखाई देता है, लेकिन घटना फायरिंग नहीं है।

— १६

यह ठीक नहीं है। मेरे पास एक select2 है और जब पृष्ठ बदलते हैं और मेरे पास दो select2 (डुप्लिकेटेड) होते हैं

— inye

रेल डॉक के अनुसार, मैं उपयोग कर रहा हूं on('ready turbolinks:load')अन्यथा मुझे कुछ पृष्ठों पर कुछ समस्याएं हैं

— सिरिल डचोन-डोरिस

हाय सिरिल, मैं एक ही समस्या है, यानी प्रारंभिक पृष्ठ लोड के साथ ही टर्बोलिंक पर लोड करने की आवश्यकता है: लोड। मैंने SO, stackoverflow.com/questions/41421496/… पर इस बारे में एक प्रश्न पूछा है । क्या आपके पास कोई और जानकारी है कि ऐसा क्यों है? क्या आप jquery-turbolinks (I am) का उपयोग कर रहे हैं। केवल अच्छी बात यह है कि यह सुनिश्चित करता है कि आपका कोड आदर्श है।

— Obromios

Answer 2

मूल निवासी JS:

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

Answer 3

रेल में 5 सबसे आसान उपाय है:

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

के बजाय $(document).ready। एक जादू की तरह काम करता है।

Comments

readyसूची में न जोड़ें , अन्यथा फ़ंक्शन दो बार निष्पादित किया जाएगा। के रूप में github.com/turbolinks/turbolinks/#observing-navigation-events ने कहा, आप इसे इस प्रकार करना चाहिए: javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })

— Xiaohui झांग

@XiaohuiZhang क्या आपको यकीन है कि काम होने वाला है ???? क्योंकि अगर $(document).readyट्रिगर हो जाता है, तो कम से कम मेरे अपने परिदृश्यों में, मुझे ज़रूरत नहीं होगीturbolinks:load

— मिलाद.नोजारी

@XiaohuiZhang यदि आपकी स्क्रिप्ट को टर्बोलिंक्स के साथ एक पृष्ठ पर और बिना किसी पृष्ठ पर काम करना है, तो वह पृष्ठ पर बिना काम नहीं करेगा, क्योंकि उसे कोड निष्पादित करने के लिए टर्बोलिंक्स की आवश्यकता होगी

— escanxic

@escanxr यह दोनों काम करता है, आप इसे आज़मा सकते हैं। जब भी टर्बोलिंक्स पेज या नहीं, तो टर्बोलिंक हमेशा "टर्बोलिंक: लोड" घटना को ट्रिगर करते हैं।

— शियाओहुई झांग

@XiaohuiZhang मैंने Turbolinks 5 के साथ कोशिश की, यह काम नहीं किया। यदि टर्बोलिंक्स पृष्ठ पर अक्षम है, तो केवल readyईवेंट ट्रिगर होता है। अगर वहाँ टर्बोलिंक है, तो कोड को दो बार कहा जाता है

— escanxr

Answer 4

यह मेरा समाधान है, ओवरराइड jQuery.fn.ready, फिर $(document).readyबिना किसी बदलाव के काम करता है:

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

Comments

मुझे ठीक इसी की आवश्यकता थी। यह बाहरी पुस्तकालयों के लिए काम करता है जो documentकॉलबैक पर भी निर्भर करते हैं । क्यों होता है पतन? यह तब तक सुरक्षित होना चाहिए जब तक कि पूरे अनुप्रयोग में टर्बोलिंक्स का उपयोग नहीं किया जाता है, है ना?

— डायलन वैंडर बर्ग

Answer 5

(कॉफ़ीस्क्रिप्ट के लिए)

मैं उपयोग करता हूं: $(document).on 'turbolinks:load', ->

के बजाय: $(document).on('turbolinks:load', function() {...})

Comments

मैंने ऐसा किया है और मुझे अभी भी यह मुद्दा मिल रहा है क्योंकि @inye ने कहा: github.com/mkhairi/materialize-sass/issues/130 । जेएस या कॉफी का उपयोग करने से वास्तव में कोई फर्क नहीं पड़ता है, कम से कम मेरे लिए नहीं।

— अलेवेंटुराइयो

हाय दोस्तों, इस उत्तर में सामान्य रूप से क्या गलत है?

— atw

मेरा अनुमान है कि यह ताबूत है और देशी जावास्क्रिप्ट नहीं है? मैंने इसे एक +1 दिया क्योंकि यह ठीक वही है जो मैं कर रहा हूं और यह मेरे लिए (मेरी कॉफ़ीस्क्रिप्ट फ़ाइल में) काम करता है

— औरोना

हाँ!, यह कॉफ़ीस्क्रिप्ट के लिए है :)। मेरी गलती यह निर्दिष्ट करने के लिए नहीं थी

— fcabanasm

Answer 6

यहाँ समाधान है कि मेरे लिए काम करते हैं, से है यहाँ :

1. इंस्टॉल gem 'jquery-turbolinks'

2. अपने ऐप में इस .cfi फ़ाइल को जोड़ें: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.cfi

3. यह नाम है टर्बोलिंक्स- कॉम्पैटिबिलिटी.कॉफी

4. application.js पर

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

Comments

productionEnv में क्या है ? क्या आपने इसका परीक्षण किया है? कुछ लोग इसे सिर्फ developmentमोड में ठीक काम बता रहे हैं ।

— अलेवेंटुरायो

मणि अब मान्य नहीं है

— मौरो

Answer 7

जब हम इस वास्तव में शांत रत्न को ठीक करने का इंतजार करते हैं, तो मैं निम्नलिखित संशोधन करके आगे बढ़ने में सक्षम था;

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

सेवा:

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

मुझे अभी तक पता नहीं है कि यह क्या हल नहीं करता है, लेकिन यह प्रारंभिक निरीक्षण पर अच्छी तरह से काम करता था।

Answer 8

हल्के वजन के रत्न जेकरी-टर्बोलिंक्स का उपयोग करें ।

यह $(document).ready()मौजूदा कोड को बदले बिना टर्बोलिंक्स के साथ काम करता है ।

वैकल्पिक रूप से, आप $(document).ready()इनमें से एक को बदल सकते हैं :

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

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

इस पर निर्भर करता है कि आपकी स्थिति में कौन अधिक उपयुक्त है।

Comments

jquery-turbolinks अभी तक Turbolinks 5 github.com/kossnocorp/jquery.turbolinks/issues/56

— एंड्रयूएच

तुम सही हो, @AndrewH! उम्मीद है, समर्थन जल्द ही जोड़ दिया जाएगा।

— वादिम

जेकरी-टर्बोलिंक मणि को हटा दिया गया है।

— नाथन वी।