Ruby on Rails
Turbolinks

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
खोज…


परिचय

टर्बोलिंक्स एक जावास्क्रिप्ट लाइब्रेरी है जो आपके वेब एप्लिकेशन को तेजी से नेविगेट करती है। जब आप एक लिंक का पालन करते हैं, तो टर्बोलिंक्स स्वचालित रूप से पृष्ठ को प्राप्त करता है, अपने <body> में स्वैप करता है, और अपने <head> को मर्ज करता है, सभी एक पूर्ण पृष्ठ भार की लागत के बिना।

टिप्पणियों

एक रेल डेवलपर के रूप में, आप अपने विकास के दौरान टर्बोलिंक्स के साथ न्यूनतम बातचीत करेंगे। हालाँकि, यह एक महत्वपूर्ण पुस्तकालय है जिससे परिचित होना चाहिए क्योंकि यह कुछ कठिन-से-ज्ञात बगों का कारण हो सकता है।

चाबी छीन लेना:

  • turbolinks:load से turbolinks:load document.ready बजाए turbolinks:load इवेंट। पहले से ही ईवेंट
  • प्रति-लिंक आधार पर टर्बोलिंक कार्यक्षमता को अक्षम करने के लिए data-turbolinks-false विशेषता का उपयोग करें।
  • पृष्ठ-लोड पर तत्वों को data-turbolinks-permanent और कैश-संबंधित बग से बचने के लिए data-turbolinks-permanent विशेषता का उपयोग करें।

टर्बोलिंक्स के अधिक गहन उपचार के लिए, आधिकारिक गितुब भंडार पर जाएँ ।

इस प्रलेखन के लिए श्रेय उन लोगों को जाता है जिन्होंने गितुब भंडार पर टर्बोलिंक प्रलेखन का मसौदा तैयार किया था।

टर्बोलिंक की एक पृष्ठ लोड की अवधारणा से बांधना

टर्बोलिंक के साथ, पारंपरिक दृष्टिकोण का उपयोग करने के लिए: 

$(document).ready(function() {
  // awesome code
});

काम नहीं करेगा। टर्बोलिंक्स का उपयोग करते समय, $(document).ready() घटना केवल एक बार आग लग जाएगी: प्रारंभिक पृष्ठ लोड पर। उस बिंदु से, जब भी कोई उपयोगकर्ता आपकी वेबसाइट पर एक लिंक पर क्लिक करता है, टर्बोलिंक्स लिंक क्लिक घटना को रोक देगा और <body> टैग को बदलने और <head> टैग को मर्ज करने के लिए एक अजाक्स अनुरोध करेगा। पूरी प्रक्रिया टर्बोलिंक भूमि में एक "यात्रा" की धारणा को ट्रिगर करती है। इसलिए, ऊपर दिए गए पारंपरिक document.ready() का उपयोग करने के बजाय। 

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code
});

// jQuery
$(document).on('turbolinks:load', function() {
  // your code
});

विशिष्ट लिंक पर टर्बोलिंक्स को अक्षम करें

विशिष्ट लिंक पर टर्बोलिंक्स को अक्षम करना बहुत आसान है। आधिकारिक टर्बोलिंक प्रलेखन के अनुसार:

टर्बोलिंक को डाटा-टर्बोलिंक्स = "गलत" के साथ लिंक या इसके किसी पूर्वज की व्याख्या करके प्रति-लिंक के आधार पर अक्षम किया जा सकता है।

उदाहरण: 

// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>

// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/">I'm also disabled</a>
</div>

// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>

आवेदन का दौरा समझना

एप्लिकेशन विज़िट को Turbolinks- सक्षम लिंक पर क्लिक करके या प्रोग्राम करके कॉल करके शुरू किया जाता है 

Turbolinks.visit(location)

डिफ़ॉल्ट रूप से, विज़िट फ़ंक्शन 'अग्रिम' कार्रवाई का उपयोग करता है। अधिक स्पष्ट रूप से, "फ़ंक्शन" पैरामीटर द्वारा इंगित पृष्ठ पर जाने के लिए विज़िट फ़ंक्शन के लिए डिफ़ॉल्ट व्यवहार है। जब भी कोई पृष्ठ को देखे जाने, turbolinks का उपयोग कर ब्राउज़र के इतिहास पर एक नई प्रविष्टि धक्का history.pushState । इतिहास महत्वपूर्ण है क्योंकि टर्बोलिंक्स जब भी संभव हो कैश से पृष्ठों को लोड करने के लिए इतिहास का उपयोग करने की कोशिश करेगा। यह अक्सर देखे गए पृष्ठों के लिए अत्यंत तेज़ पृष्ठ रेंडरिंग की अनुमति देता है।

हालांकि, यदि आप स्टैक पर किसी भी इतिहास को धकेलने के बिना किसी स्थान पर जाना चाहते हैं, तो आप यात्रा फ़ंक्शन पर 'बदलें' कार्रवाई का उपयोग कर सकते हैं जैसे: 

// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>

// programatically
Turbolinks.visit("/edit", { action: "replace" })

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

वहाँ भी एक "बहाल" कार्रवाई है कि में एड्स बहाली vists , दौरा है कि उपयोगकर्ता आगे बटन या उनके ब्राउज़र पर वापस बटन पर क्लिक करने का एक परिणाम के रूप में हो। टर्बोलिंक्स इस प्रकार की घटनाओं को आंतरिक रूप से संभालता है और अनुशंसा करता है कि उपयोगकर्ता डिफ़ॉल्ट व्यवहार के साथ मैन्युअल रूप से छेड़छाड़ नहीं करते हैं।

यात्रा शुरू करने से पहले रद्द करना

टर्बोलिंक्स एक घटना श्रोता प्रदान करता है जिसका उपयोग यात्राओं को होने से रोकने के लिए किया जा सकता है। turbolinks:before-visit को सुनें turbolinks:before-visit जब कोई दौरा शुरू होने वाला हो, तो turbolinks:before-visit घटना को अधिसूचित किया जाए।

ईवेंट हैंडलर में, आप उपयोग कर सकते हैं: 

// pure javascript
event.data.url

या 

// jQuery
$event.originalEvent.data.url

यात्रा के स्थान को पुनः प्राप्त करने के लिए। तब कॉल करके यात्रा रद्द की जा सकती है: 

event.preventDefault()

ध्यान दें:

आधिकारिक टर्बोलिंक डॉक्स के अनुसार:

पुनर्स्थापना विज़िट रद्द नहीं की जा सकती हैं और टरबोलिंक्स को फायर नहीं करना चाहिए: पहले की यात्रा।

पृष्ठ लोड में मौजूद तत्व

निम्नलिखित स्थिति पर विचार करें: कल्पना करें कि आप एक सोशल मीडिया वेबसाइट के डेवलपर हैं जो उपयोगकर्ताओं को अन्य उपयोगकर्ताओं के साथ दोस्ती करने की अनुमति देता है और जो पेज लोडिंग को तेज़ बनाने के लिए टर्बोलिंक्स को नियोजित करता है। साइट पर प्रत्येक पृष्ठ के शीर्ष दाईं ओर, एक संख्या है जो मित्रों की कुल संख्या का संकेत देती है जो वर्तमान में एक उपयोगकर्ता है। कल्पना कीजिए कि आप अपनी साइट का उपयोग कर रहे हैं और आपके 3 मित्र हैं। जब भी कोई नया दोस्त जोड़ा जाता है, तो आपके पास कुछ जावास्क्रिप्ट होती है जो चलती है जो मित्र काउंटर को अपडेट करती है। कल्पना करें कि आपने अभी एक नया दोस्त जोड़ा है और आपकी जावास्क्रिप्ट ठीक से चल रही है और पेज के ऊपरी दाएँ भाग में मित्र गणना को अपडेट किया है अब 4. रेंडर करें, कल्पना करें कि आप ब्राउज़र के बैक बटन पर क्लिक करते हैं। जब पृष्ठ लोड होता है, तो आप ध्यान देते हैं कि मित्र काउंटर कहता है कि भले ही आपके चार दोस्त हैं।

यह एक अपेक्षाकृत आम समस्या है और टरबोलिंक्स ने इसके लिए एक समाधान प्रदान किया है। समस्या तब होती है क्योंकि टर्बोलिंक्स स्वचालित रूप से पृष्ठों को कैश से लोड करता है जब कोई उपयोगकर्ता बैक बटन क्लिक करता है। कैश्ड पृष्ठ हमेशा डेटाबेस के साथ अपडेट नहीं किया जाएगा।

इस समस्या को हल करने के लिए, कल्पना करें कि आप "div-count" की आईडी के साथ <div> टैग के अंदर मित्र गणना प्रस्तुत करते हैं: 

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

data-turbolinks-permanent विशेषता जोड़कर, आप टर्बोलिंक्स को पेज लोड के कुछ तत्वों को जारी रखने के लिए कह रहे हैं। आधिकारिक डॉक्स कहते हैं :

स्थायी तत्वों को HTML आईडी देकर और उन्हें डेटा-टर्बोलिंक्स-स्थायी के साथ एनोटेट करके नामित करें। प्रत्येक रेंडर से पहले, टर्बोलिंक्स आईडी द्वारा सभी स्थायी तत्वों से मेल खाता है और उन्हें मूल पृष्ठ से नए पृष्ठ पर स्थानांतरित करता है, उनके डेटा और इवेंट श्रोताओं को संरक्षित करता है।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow