2016-09-21 2 views
7

ब्राउज़र बैक बटन पर jquery प्लगइन्स को प्रारंभ करने के लिए एक बेहतर समाधान है जो केवल 5 में मास्टर्सलाइडर (फोटो गैलरी) या स्लिक (कैरोसेल) जैसे टर्बोलिंक का उपयोग करते समय तत्वों को परिवर्तित नहीं कर रहा है। जैसा कि मैंने नीचे किया है पृष्ठ को पुनः लोड करने से?टर्बोलिंक रेल के लिए ब्राउज़र बैक बटन पर JQuery प्लगइन प्रारंभिक 5

document.addEventListener 'turbolinks:load', -> 
    slickElementsPresent = $('.event-card').find('div.slick-slide')[0] 
    if slickElementsPresent? 
    window.location.reload(); 
    else 
    $('.event-card').each -> 
     $(@).not('.slick-initialized').slick { 
     infinite: false, 
     nextArrow: $(@).find('.event-more-details-button'), 
     prevArrow: $(@).find('.event-card-slide-back-button') 
     } 

स्पष्ट रूप से, मैं पर देखने के लिए जाँच: अगर कोई HTML तत्वों है कि केवल वर्तमान हो सकता है अगर प्लगइन प्रारंभ कर दिया गया था, यदि हां, तो क्योंकि भले ही पेज को ताज़ा कर रहे हैं 'turbolinks लोड' तत्व हैं, प्लगइन शुरू नहीं किया गया है। और फिर मैं उन सभी तत्वों पर प्लगइन शुरू करता हूं जिनके पास कक्षा है जिसे मैं चाहता हूं। जहां किसी

मैं सिर्फ उन होने इसी तरह के मुद्दों है कि एक प्रारंभ समारोह idempotent बनाने जरूरी कुछ परिस्थितियों में समाधान नहीं है के लिए जोड़ना चाहते हैं बताते हैं https://github.com/turbolinks/turbolinks/issues/106:

कुछ लोगों को इस समस्या का सामना करना पड़ा। डेटाटेबल्स के साथ ऐसा करने के बाद मैं डुप्लिकेट तत्वों से बचने में सक्षम हूं। हालांकि, प्लगइन से संबंधित पृष्ठ पर मौजूद तत्वों के कैश किए गए संस्करण ब्राउज़र पर वापस काम नहीं करते हैं, ऐसा लगता है कि प्लगइन को कैश किए गए पृष्ठ में प्रारंभ नहीं किया गया है।

पृष्ठ को पुनः लोड करता है, तो प्लगइन डोम क्योंकि यह कैश से लिया गया जा रहा है जब कोई प्रेस वापस बटन बस बहुत बुरा लगता है, लेकिन इसकी सबसे अच्छा मैं तो मैं बदल रहा हूँ ले कर आए हैं पहले से ही बदल गया है अधिक विचारों के लिए दुनिया के लिए!

अद्यतन:

तो कुछ jQuery प्लगइन्स महान है 'पूर्ववत करें'/'को नष्ट' तरीकों और यदि ऐसा है यह इतना तरह "turbolinks:before-cache" पर एक घटना श्रोता जोड़ने के लिए और फिर फोन है कि विधि बेहतर है:

document.addEventListener "turbolinks:before-cache", -> 
    $('.event-card').each -> 
    $(@).slick('unslick'); 

लेकिन कुछ jquery प्लगइन्स ने कार्यों को नष्ट नहीं किया है या इसे प्राप्त करने वाले कार्यों को नष्ट नहीं किया है। मास्टर्सलाइडर की तरह $('your-slider-element').masterslider('destroy') फ़ंक्शन है, लेकिन यह आपके एचटीएमएल पर जावास्क्रिप्ट जादू को 'पूर्ववत' नहीं करता है, जितना इसे पूरी तरह से छुटकारा पाता है, और इसलिए जब आप ब्राउजर बैक या फॉरवर्ड बटन से पेज पर वापस आते हैं, स्लाइडर बस अस्तित्व में नहीं है, क्योंकि जिस एचटीएमएल तत्व को ट्रिगर किया जाता है उसे नष्ट कर दिया गया है। इसका मतलब है कि कुछ प्लगइन्स के लिए, मेरे पास अभी भी सबसे अच्छा जवाब पृष्ठ को फिर से लोड करना है जब वे जिस पृष्ठ पर हैं, उन्हें ब्राउजर बैक और फॉरवर्ड बटन के माध्यम से नेविगेट किया जाता है।

उत्तर

14

तो सबसे अच्छा जवाब मैं 'बहाली' यात्राओं से निपटने के लिए आया हूं (जैसा कि मैंने ब्राउजर बैक और फॉरवर्ड बटन विज़िट्स को टर्बोलिंक की दुनिया में बुलाया है) जिसमें jquery plugins शामिल नहीं हैं एक 'पूर्ववत करें' विधि कैश-आईएनजी से पृष्ठ को चुनने के लिए है। मैं फेंक कर यह लागू किया:

<% if content_for?(:head) %> 
    <%= yield(:head) %> 
<% end %> 

मेरी application.html.erb फ़ाइल के <head> अनुभाग में और फिर पेज मैं turbolinks यह कैश है में शामिल करने के लिए नहीं करना चाहते हैं के शीर्ष पर, मैं डाल:

<% content_for :head do %> 
    <meta name="turbolinks-cache-control" content="no-cache"> 
<% end %> 

इस तरह टर्बोलिंक नेटवर्क से पृष्ठ लाता है और कैश नहीं, क्योंकि 'बहाली' यात्रा के लिए सामान्य व्यवहार होगा। बस दस्तावेज़ीकरण को बहुत सावधानीपूर्वक पढ़ना था और यह पता लगाना था कि रेलों में इसे कैसे कार्यान्वित करना है जो बहुत बुरा नहीं था।

+0

यह एक ठोस विकल्प है जिसे मैंने टर्बोलिंक कॉलबैक को जोड़ने/डेटाटेबल्स जैसी चीजों को फिर से भरने के बजाय नहीं सोचा था। धन्यवाद। – gregblass

संबंधित मुद्दे