2012-09-28 11 views
16

मुझे अपने जेएस तत्व (एचटीएमएल 5 बॉयलरप्लेट के अनुसार) के नीचे मेरा जेएस चिपकाने के लिए उपयोग किया जाता है, लेकिन TurboLinks के बाद, जो रेल 4 में on by default होगा, हर अनुरोध पर शरीर (और शीर्षक) को फिर से लोड करता है, क्या यह समझ में आता है अब से मेरे जेएस को सिर में डालने के लिए? क्या इस पर कोई सभ्य गाइड या सर्वोत्तम प्रथाएं हैं?रेल 4 + टर्बोलिंक्स: सिर में जेएस या शरीर के नीचे?

उत्तर

8

इसके अलावा precompiled application.js (संपत्ति पाइपलाइन के अनुसार) डिफ़ॉल्ट रूप से चालू और सिर पर है। तर्क यह है कि भले ही जेएस को शेष पृष्ठ से पहले लोड किया गया हो, क्योंकि जेएस हमेशा समान होता है, इसे बाद में दूसरे अनुरोध से कैश से लोड किया जाएगा, इसलिए इसके नीचे सेवा करने का कोई वास्तविक कारण नहीं है शरीर अब और

+0

धन्यवाद का उपयोग करें, जो मेरे लिए काफी अच्छा है :) – stephenmurdoch

+0

यह फ़ाइल कैश, लेकिन यह अभी भी प्रतीक्षा करने की आवश्यकता जेएस लोड करने के लिए (यदि पूरा पृष्ठ लोड हो गया है), है ना? क्या 'async' विशेषता Turbolinks द्वारा पुनः लोड किए बिना नीचे जोड़ने का लाभ प्रदान नहीं करेगी? – michelpm

+0

सामान्य रेल स्पॉकेट-आधारित संपत्तियों के साथ, आपके पास एक संपीड़ित, छोटा जेएस होगा जो आमतौर पर ब्राउज़र के कैश में संग्रहीत होता है। लोड समय (जैसे "कोड लोड करें") वैसे भी कुल डाउनलोड का एक अंश है + प्रतीक्षा + जेएस के लिए लोड समय। किसी भी मामले में, टीएल बस पूरे पृष्ठ को पृष्ठभूमि में लोड करता है, फिर तत्वों (शीर्षक, शरीर आदि) लेता है और उन्हें वर्तमान पृष्ठ की बजाय अपने पृष्ठ में बदल देता है। यह एक साधारण व्यवहार है, जो अधिक गति में परिणाम हो सकता है या नहीं। असली दुनिया के उदाहरणों में, मैंने पाया कि स्पॉकेट्स पर्याप्त रूप से सिर में जावास्क्रिप्ट संकलित किए गए हैं। – rewritten

5

यदि आप टर्बोलिंक 5 का उपयोग कर रहे हैं, तो अब आप अपने शरीर के नीचे टर्बोलिंक डाल सकते हैं (और पृष्ठ को प्रस्तुत करने के लिए वेब देव सर्वोत्तम प्रथाओं का पालन करें)। यह एसईओ के साथ इतनी थोड़ी सी भी मदद करता है। बस अपने शरीर के निचले भाग पर अपनी स्क्रिप्ट जोड़ सकते हैं और अपने स्क्रिप्ट टैग को

data-turbolinks-eval="false"

जोड़ें। यह का मूल्यांकन प्रारंभिक पृष्ठ लोड के बाद टर्बोलिंक को रोकने से रोक देगा। यह इस प्रकार से javascript_include_tag साथ किया जाता है है:

<%= javascript_include_tag 'application', 'data-turbolinks-eval' => 'false'%>

तो बस

$(document).on('turbolinks:load', function() { // code to be executed when use changes pages });

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