👩🏿‍🏫 🍷 ❗️ पटरियों 3.1 में जेएस एसेट्स की संरचना (स्टिलेक्स) 🥂 🤞🏻 👲🏻

3.1 में एसेट तंत्र ने बड़ी परियोजनाओं के जीवन को बहुत सरल कर दिया, लेकिन साथ ही छोटे लोगों के लिए थोड़ा जटिल। अंतर्निहित जनरेटर का उपयोग करते समय, प्रत्येक नियंत्रक के लिए एक अलग फ़ाइल बनाने से पहले रेल, केवल अब इन फ़ाइलों की सामग्री बिल्कुल सभी पृष्ठों पर डिफ़ॉल्ट रूप से दिखाई देती है। यदि SCSS के मामले में यह केवल सही संरचना को लागू करने में मदद करता है, तो JS के साथ क्या करना है?

यदि परियोजना बड़ी है और आप बड़े पैमाने पर जेएस के लिए बैकबोन जैसे किसी तरह के क्लाइंट फ्रेमवर्क का उपयोग करते हैं - महान! यह बेहतर लोड करेगा और तय करेगा कि कहां और कैसे काम करना है। लेकिन क्या होगा अगर आपको विशिष्ट पृष्ठों के लिए कोड की एक छोटी राशि कनेक्ट करने की आवश्यकता है? यानी कंट्रोलर भी नहीं, बल्कि एक्शन भी। और यह वांछनीय है कि जब ऐसे टुकड़े 5 से अधिक हो जाते हैं, तो कोड स्पेगेटी में नहीं बदल जाता है। थोड़ा स्टाइलएक्स मणि इसकी मदद कर सकता है।

स्टाइलेक्स न केवल एक विशिष्ट कार्रवाई के लिए विशिष्ट कोड को कॉल कर सकता है, बल्कि रूबी से डेटा भी स्थानांतरित कर सकता है। तैयारी:

# Gemfile gem 'styx' # app/controllers/application_controller.rb    controller class ApplicationController include Styx::Initializer end # app/views/application.html.erb <%= javascript_include_tag "application" %> <%= styx_initialize %> <%= csrf_meta_tags %>

यदि हमारे पास एक FoosController नियंत्रक है जिसे हमने `रेल जी फॉस 'का उपयोग करके बनाया है, तो हमारे प्रयासों के माध्यम से हमारे पास न केवल ऐप / नियंत्रक / foos_controller.rb है, बल्कि ऐप / संपत्ति / javascripts / foos.js.copy भी है। यहाँ बाद की तरह दिखना चाहिए:

 #        Styx.Initializers. @Styx.Initializers.Foos = initialize: -> console.log '        action  foos     <head>' index: (data) -> console.log '       /foos/     <head>' show: (data) -> $ -> console.log '    (  jQuery)       /foos/... (. jQuery.ready())'

ध्यान दें कि सभी विधियाँ (सामान्य आरंभ को छोड़कर) डेटा पैरामीटर को स्वीकार करती हैं। डिफ़ॉल्ट रूप से, यह एक खाली ऑब्जेक्ट {} है, लेकिन इसे आसानी से रूबी की तरफ से दोनों को सीधे नियंत्रक में बदला जा सकता है, देखें:

 # app/controllers/foos_controller.rb class ApplicationController def index styx_initialize_with :foo => 'bar', :and => {:habrahabr => 'rockz!'} end end

 # app/views/foos/index.html.erb <%- styx_initialize_with :something => 'very important' %>

अब हम डेटा में हैं:

 {"foo": "bar", "and": {"habrahabar": "rocks!"}, "something": "very important"}

यह सब हमारे कोड को कॉल करने के लिए लेता है। इस तथ्य के कारण कि जेएस को एक ही फाइल में इकट्ठा किया गया है और एक पूरे के रूप में जुड़ा हुआ है, आप आसानी से कक्षाओं में अपने दोहराया कोड (जैसे कि कक्षाएं, कॉफी के लिए धन्यवाद) का वर्णन कर सकते हैं और उन्हें शुरुआती पेजों पर कॉल कर सकते हैं। और एक अच्छे बोनस के रूप में - आपके विचारों में JS को डेटा स्थानांतरित करने के लिए ".to_json" का अधिक डंप नहीं :)।

पटरियों 3.1 में जेएस एसेट्स की संरचना (स्टिलेक्स)

More articles: