javascript - रेल 3.1 का उपयोग करना, आप अपना "पृष्ठ विशिष्ट" जावास्क्रिप्ट कोड कहां डालते हैं?




ruby-on-rails ruby-on-rails-3.1 asset-pipeline sprockets (24)

फिलिप का जवाब काफी अच्छा है। इसे काम करने के लिए कोड यहां दिया गया है:

Application.html.erb में:

<body class="<%=params[:controller].parameterize%>">

मान लें कि आपके नियंत्रक को प्रोजेक्ट कहा जाता है, जो उत्पन्न होगा:

<body class="projects">

फिर परियोजनाओं में। Js.coffee:

jQuery ->
  if $('body.projects').length > 0  
     $('h1').click ->
       alert 'you clicked on an h1 in Projects'

मेरी समझ के लिए, आपकी सभी जावास्क्रिप्ट 1 फ़ाइल में विलय हो जाती है। जब यह //= require_tree . जोड़ता है तो रेल डिफ़ॉल्ट रूप से ऐसा करता है //= require_tree . आपके application.js मेनिफेस्ट फ़ाइल के नीचे।

यह वास्तविक जीवन बचतकर्ता की तरह लगता है, लेकिन मैं पेज-विशिष्ट जावास्क्रिप्ट कोड के बारे में थोड़ा चिंतित हूं। क्या यह कोड हर पृष्ठ पर निष्पादित हो जाता है? आखिरी चीज जो मैं चाहता हूं वह मेरी सभी ऑब्जेक्ट्स के लिए हर पृष्ठ के लिए तत्काल होनी चाहिए जब उन्हें केवल 1 पृष्ठ पर ही आवश्यकता हो।

साथ ही, कोड के लिए भी संभावित नहीं है जो भी संघर्ष करता है?

या आप पृष्ठ के निचले हिस्से में एक छोटा script टैग डालते हैं जो केवल उस विधि में कॉल करता है जो पृष्ठ के लिए जावास्क्रिप्ट कोड निष्पादित करता है?

क्या अब आपको आवश्यकता नहीं है। जेएस?

धन्यवाद

संपादित करें : मैं सभी उत्तरों की सराहना करता हूं ... और मुझे नहीं लगता कि वे वास्तव में समस्या पर हैं। उनमें से कुछ स्टाइल के बारे में हैं और संबंधित नहीं लग रहे हैं ... और दूसरों ने सिर्फ javascript_include_tag जिक्र किया है ... जो मुझे पता है (स्पष्ट रूप से ...) लेकिन ऐसा लगता है कि रेल 3.1 रास्ता आगे बढ़ना है सभी को लपेटना प्रत्येक पृष्ठ के नीचे व्यक्तिगत जावास्क्रिप्ट लोड करने की बजाय 1 जावास्क्रिप्ट में अपनी जावास्क्रिप्ट का।

सबसे अच्छा समाधान मैं साथ आ सकता हूं, id टैग्स या class एस के साथ div टैग में कुछ विशेषताओं को लपेटना है। जावास्क्रिप्ट कोड में, आप बस जांचें कि id या class पृष्ठ पर है या नहीं, और यदि ऐसा है, तो आप इसके साथ जुड़े जावास्क्रिप्ट कोड को चलाते हैं। इस तरह यदि गतिशील तत्व पृष्ठ पर नहीं है, तो जावास्क्रिप्ट कोड नहीं चलता है - भले ही इसे स्पॉकेट द्वारा पैक की गई विशाल application.js फ़ाइल में शामिल किया गया हो।

मेरे उपर्युक्त समाधान का लाभ यह है कि अगर 100 पृष्ठों में से 8 पर एक खोज बॉक्स शामिल किया गया है, तो यह केवल उन 8 पृष्ठों पर चलेगा। आपको साइट पर 8 पृष्ठों पर एक ही कोड शामिल करने की आवश्यकता नहीं होगी। वास्तव में, आपको कभी भी कहीं भी अपनी साइट पर मैन्युअल स्क्रिप्ट टैग शामिल नहीं करना होगा।

मुझे लगता है कि यह मेरे प्रश्न का वास्तविक जवाब है।


एक और विकल्प: पृष्ठ- या मॉडल-विशिष्ट फ़ाइलों को बनाने के लिए, आप अपनी assets/javascripts/ फ़ोल्डर के अंदर निर्देशिका बना सकते हैं।

assets/javascripts/global/
assets/javascripts/cupcakes
assets/javascripts/something_else_specific

आपकी मुख्य application.js मेनिफेस्ट फ़ाइल को global/ से अपनी फ़ाइलों को लोड करने के लिए कॉन्फ़िगर किया जा सकता है। विशिष्ट पृष्ठों या पृष्ठों के समूह में अपने स्वयं के प्रकट हो सकते हैं जो फ़ाइलों को अपनी विशिष्ट निर्देशिका से लोड करते हैं। Sprockets स्वचालित रूप से application.js द्वारा लोड की गई फ़ाइलों को आपके पृष्ठ-विशिष्ट फ़ाइलों के साथ जोड़ देगा, जो इस समाधान को काम करने की अनुमति देता है।

इस तकनीक का उपयोग style_sheets/ लिए भी किया जा सकता है।


आप इस लाइन को अपनी लेआउट फ़ाइल (जैसे application.html.erb) में स्वचालित रूप से नियंत्रक विशिष्ट जावास्क्रिप्ट फ़ाइल लोड करने के लिए जोड़ सकते हैं (वह जिसे बनाया गया था जब आप नियंत्रक उत्पन्न करते थे):

<%= javascript_include_tag params[:controller] %>

प्रति-क्रिया के आधार पर आप स्क्रिप्ट फ़ाइल स्वचालित रूप से लोड करने के लिए एक पंक्ति भी जोड़ सकते हैं।

<%= javascript_include_tag params[:controller] + "/" + params[:action] %>

बस अपने पृष्ठ स्क्रिप्ट को नियंत्रक नाम के नाम पर एक उपनिर्देशिका में डाल दें। इन फ़ाइलों में आप = आवश्यकतानुसार अन्य स्क्रिप्ट शामिल कर सकते हैं। ब्राउजर में 404 असफल होने से बचने के लिए फ़ाइल को केवल तभी शामिल करने के लिए एक सहायक बनाने के लिए अच्छा होगा।


Following the lead from Ryan, here's what I have done-

application.js.coffee

$ ->
    view_method_name = $("body").data("view") + "_onload"
    eval("#{view_method_name}()") if eval("typeof #{view_method_name} == 'function'")
    view_action_method_name = $("body").data("view") + "_"+$("body").data("action")+"_onload"
    eval("#{view_action_method_name}()") if eval("typeof #{view_action_method_name} == 'function'")

users.js.coffee (controller specific coffeescript,eg controller:users, action:dashboard)

window.users_dashboard_onload = () ->
    alert("controller action called")
window.users_onload = () ->
    alert("controller called")

application.html.haml

%body{:data=>{:view=>controller.controller_name, :action=>controller.action_name}}

मैं सभी उत्तरों की सराहना करता हूं ... और मुझे नहीं लगता कि वे वास्तव में समस्या पर हैं। उनमें से कुछ स्टाइल के बारे में हैं और संबंधित नहीं लग रहे हैं ... और दूसरों ने सिर्फ javascript_include_tag जिक्र किया है ... जो मुझे पता है (स्पष्ट रूप से ...) लेकिन ऐसा लगता है कि रेल 3.1 रास्ता आगे बढ़ना है सभी को लपेटना प्रत्येक पृष्ठ के नीचे व्यक्तिगत जावास्क्रिप्ट लोड करने की बजाय 1 जावा में अपनी जावास्क्रिप्ट का।

सबसे अच्छा समाधान मैं साथ आ सकता हूं, id टैग्स या class एस के साथ div टैग में कुछ विशेषताओं को लपेटना है। जावास्क्रिप्ट कोड में। फिर आप जांचें कि id या class पृष्ठ पर है या नहीं, और यदि ऐसा है, तो आप इसके साथ जुड़े जावास्क्रिप्ट कोड को चलाते हैं। इस तरह यदि गतिशील तत्व पृष्ठ पर नहीं है, तो जावास्क्रिप्ट कोड नहीं चलता है - भले ही इसे स्पॉकेट द्वारा पैक की गई विशाल application.js फ़ाइल में शामिल किया गया हो।

मेरे उपर्युक्त समाधान का लाभ यह है कि अगर 100 पृष्ठों में से 8 पर एक खोज बॉक्स शामिल किया गया है, तो यह केवल उन 8 पृष्ठों पर चलेगा। आपको साइट पर 8 पृष्ठों पर एक ही कोड शामिल करने की आवश्यकता नहीं होगी। असल में, आपको कभी भी अपनी साइट पर मैन्युअल स्क्रिप्ट टैग को कभी भी शामिल नहीं करना होगा - शायद प्रीलोड डेटा को छोड़कर।

मुझे लगता है कि यह मेरे प्रश्न का वास्तविक जवाब है।


मुझे एहसास है कि मैं इस पार्टी में थोड़ा देर से आ रहा हूं, लेकिन मैं एक समाधान में फेंकना चाहता था जिसे मैं हाल ही में उपयोग कर रहा हूं। हालांकि, मुझे पहले उल्लेख करने दो ...

रेल 3.1 / 3.2 वे (नहीं, महोदय, मुझे यह पसंद नहीं है।)

देखें: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

मैं इस उत्तर में पूर्णता के लिए निम्न शामिल हूं, और क्योंकि यह एक अचूक समाधान नहीं है ... हालांकि मुझे इसके लिए बहुत परवाह नहीं है।

अनुरोधित प्रश्न के मूल लेखक के रूप में देखने-उन्मुख होने के बजाय "रेल्स वे" एक नियंत्रक उन्मुख समाधान है। उनके संबंधित नियंत्रकों के नाम पर नियंत्रक-विशिष्ट जेएस फ़ाइलें हैं। इन सभी फ़ाइलों को एक फ़ोल्डर पेड़ में रखा गया है जो कि किसी भी application.js में डिफ़ॉल्ट रूप से शामिल नहीं है निर्देशों की आवश्यकता है।

नियंत्रक-विशिष्ट कोड को शामिल करने के लिए, निम्नलिखित दृश्य में जोड़ा गया है।

<%= javascript_include_tag params[:controller] %>

मैं इस समाधान से नफरत करता हूं, लेकिन यह वहां है और यह तेज़ है। संभवतः, आप इन फ़ाइलों को "people-index.js" और "people-show.js" जैसे कुछ कह सकते हैं और फिर दृश्य-उन्मुख समाधान प्राप्त करने के लिए "#{params[:controller]}-index" जैसे कुछ का उपयोग कर सकते हैं। दोबारा, जल्दी ठीक करें, लेकिन यह मेरे साथ अच्छी तरह से नहीं बैठता है।

मेरा डेटा विशेषता तरीका

मुझे पागल कहो, लेकिन मैं चाहता हूं कि मेरे सभी जेएस संकलित हों और जब मैं तैनात करता हूं application.js में छोटा हो। मैं जगह पर इन छोटी straggler फ़ाइलों को शामिल करना याद रखना नहीं चाहता।

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

मेरे जेएस को विशिष्ट तत्व आईडी में लॉक करने या मार्कर कक्षाओं के साथ अपने एचटीएमएल को कूड़े करने की बजाय, मैं data-jstags नामक कस्टम डेटा एट्रिब्यूट का उपयोग करता data-jstags

<input name="search" data-jstag="auto-suggest hint" />

प्रत्येक पृष्ठ पर, मैं उपयोग करता हूं - डीओएम लोडिंग समाप्त होने पर कोड चलाने के लिए यहां पसंदीदा जेएस लाइब्रेरी विधि डालें । यह बूटस्ट्रैपिंग कोड निम्न क्रियाएं करता है:

  1. data-jstag के साथ चिह्नित डीओएम में सभी तत्वों पर data-jstag
  2. प्रत्येक तत्व के लिए, स्पेस पर विशेषता मान विभाजित करें, टैग स्ट्रिंग्स की सरणी बनाएं।
  3. प्रत्येक टैग स्ट्रिंग के लिए, उस टैग के लिए हैश में एक लुकअप करें।
  4. यदि कोई मिलान कुंजी मिलती है, तो उस पैरामीटर के रूप में तत्व को पास करने के साथ जुड़े फ़ंक्शन को चलाएं।

तो कहें कि मेरे पास मेरे application.js में कहीं परिभाषित किया गया है:

function my_autosuggest_init(element) {
  /* Add events to watch input and make suggestions... */
}

function my_hint_init(element) {
  /* Add events to show a hint on change/blur when blank... */
  /* Yes, I know HTML 5 can do this natively with attributes. */
}

var JSTags = {
  'auto-suggest': my_autosuggest_init,
  'hint': my_hint_init
};

बूटस्ट्रैपिंग ईवेंट खोज इनपुट के खिलाफ my_autosuggest_init और my_hint_init फ़ंक्शंस को लागू करने जा रहा है, इसे उस इनपुट में बदल रहा है जो उपयोगकर्ता के प्रकार के दौरान सुझावों की एक सूची प्रदर्शित करता है, साथ ही साथ इनपुट को छोड़ दिया जाता है जब इनपुट खाली रहता है और फोकस किया जाता है ।

जब तक कुछ तत्व data-jstag="auto-suggest" साथ टैग नहीं किया जाता है, तो ऑटो-सुझाव कोड कभी भी आग नहीं लगाता है। हालांकि, यह हमेशा वहां होता है, मेरे अनुप्रयोग.जेएस में मिनीफाइड और अंततः कैश किया जाता है, जिसके लिए मुझे किसी पृष्ठ पर इसकी आवश्यकता होती है।

यदि आपको अपने टैग किए गए जेएस फ़ंक्शंस में अतिरिक्त पैरामीटर पास करने की आवश्यकता है, तो आपको कुछ रचनात्मकता लागू करनी होगी। या तो डेटा-पैरामीटर विशेषताओं को जोड़ें, किसी प्रकार के पैरामीटर सिंटैक्स के साथ आएं, या यहां तक ​​कि एक संकर दृष्टिकोण का उपयोग करें।

यहां तक ​​कि यदि मेरे पास कुछ जटिल वर्कफ़्लो है जो नियंत्रक-विशिष्ट प्रतीत होता है, तो मैं इसके लिए अपने lib फ़ोल्डर में इसके लिए एक फ़ाइल बनाउंगा, इसे application.js में पैक करूँगा, और इसे 'new-thing-wizard' जैसे कुछ टैग कर दूंगा। जब मेरा बूटस्ट्रैप उस टैग को हिट करता है, तो मेरा अच्छा, फैंसी विज़ार्ड तत्काल और चलाया जाएगा। यह आवश्यक होने पर उस नियंत्रक के दृश्यों के लिए चलता है, लेकिन यह अन्यथा नियंत्रक के साथ नहीं है। असल में, अगर मैं अपने विज़ार्ड को सही तरीके से कोड करता हूं, तो मैं विचारों में सभी कॉन्फ़िगरेशन डेटा प्रदान करने में सक्षम हो सकता हूं और इसलिए किसी अन्य नियंत्रक के लिए बाद में अपने विज़ार्ड का पुन: उपयोग करने में सक्षम हूं।

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


I haven't tried this out, but it looks like the following is true:

  • if you have a content_for that is javascript (eg with real javascript within it), sprockets would not know about it and thus this would work the same way as it does now.

  • if you want to exclude a file from the big bundle of javascript, you would go into config/sprockets.yml file and modify the source_files accordingly. Then, you would just include any of the files that you excluded where needed.


मुझे ऐसा कोई जवाब नहीं दिख रहा है जो वास्तव में इसे सभी को एक साथ रखता है और इसे आपके लिए बाहर रखता है। इस प्रकार, मैं रयान के जवाब का पहला भाग, और यहां तक ​​कि गैल के बैकबोन.जेएस के बारे में बोल्ड स्टेटमेंट भी शामिल करने की कोशिश करूंगा ... सभी एक साथ इस तरह से छोटे और स्पष्ट हैं। और, कौन जानता है, मैं मार्नन लाइबो-कोसर की आवश्यकताओं को भी पूरा कर सकता हूं।

उदाहरण संपादन

संपत्ति / जावास्क्रिप्ट / application.js

//= require jquery
//= require jquery_ujs
//= require lodash.underscore.min
...


विचार / लेआउट / application.html.erb

  ...
  </footer>

  <!-- Javascripts ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <%= javascript_include_tag "application" %>
  <%= yield :javascript %>

</body>
</html>


विचार / foo / index.html.erb

...
<% content_for :javascript do %>
  <%= javascript_include_tag params[:controller] %>
<% end %>


संपत्ति / जावास्क्रिप्ट / foo.js

//= require moment
//= require_tree ./foostuff


संपत्ति / जावास्क्रिप्ट / foostuff / foothis.js.coffee

alert "Hello world!"


संक्षिप्त विवरण

  • //= require_tree . निकालें //= require_tree . application.js से और केवल जेएस सूचीबद्ध करें जो प्रत्येक पृष्ठ साझा करता है।

  • Application.html.erb में ऊपर दिखाए गए दो पंक्तियां उस पृष्ठ को बताएं जहां application.js और आपके पृष्ठ-विशिष्ट JS शामिल हैं।

  • Index.html.erb में ऊपर दिखाए गए तीन पंक्तियां आपके पृष्ठ को कुछ पेज-विशिष्ट जेएस देखने के लिए बताती हैं और इसे "जावास्क्रिप्ट" नामक नामित उपज क्षेत्र में शामिल करती हैं (या जो भी आप इसे नाम देना चाहते हैं)। इस उदाहरण में, नियंत्रक "foo" है, इसलिए रेल अनुप्रयोगों में "foo.js" को शामिल करने का प्रयास करेंगे: जावास्क्रिप्ट उपज क्षेत्र अनुप्रयोग लेआउट में।

  • Foo.js में अपने पृष्ठ-विशिष्ट जेएस को सूचीबद्ध करें (या नियंत्रक का नाम जो भी हो)। सामान्य पुस्तकालयों, एक पेड़, निर्देशिका, जो कुछ भी सूचीबद्ध करें।

  • अपने कस्टम पेज-विशिष्ट जेएस को कहीं भी रखें जहां आप इसे अपने अन्य कस्टम जेएस के अलावा आसानी से संदर्भित कर सकते हैं। इस उदाहरण में, foo.js को foostuff पेड़ की आवश्यकता होती है, इसलिए foothis.js.coffee जैसे अपने कस्टम जेएस को रखें

  • यहां कोई कठोर नियम नहीं हैं। चीजों को चारों ओर स्थानांतरित करने के लिए स्वतंत्र महसूस करें और यदि आवश्यक हो तो विभिन्न लेआउट में विभिन्न नामों के कई उपज क्षेत्रों को भी बनाएं। यह सिर्फ एक संभव पहला कदम आगे दिखाता है। (मैं इसे बैकबोन.जेएस के उपयोग के समान बिल्कुल नहीं करता हूं। मैं foo.js को foostuff के बजाय foo नामक फ़ोल्डर में छोड़ना भी चुन सकता हूं लेकिन अभी तक इसका फैसला नहीं किया है।)

टिप्पणियाँ

You can do similar things with CSS and <%= stylesheet_link_tag params[:controller] %> but this is beyond scope of the question.

If I missed a glaring best practice here, send me a note and I'll conisder adapting. Rails is fairly new to me and, honestly, I'm not terribly impressed so far with the chaos it brings by default to enterprise development and all the traffic the average Rails program generates.


शायद आप उपयुक्त समाधान के रूप में pluggable_js मणि मिल जाएगा।


पेज-विशिष्ट जेएस के लिए आप गरबर-आयरिश समाधान का उपयोग कर सकते हैं

तो आपके रेल जावास्क्रिप्ट फ़ोल्डर दो नियंत्रकों के लिए ऐसा दिख सकता है - कारें और उपयोगकर्ता:

javascripts/
├── application.js
├── init.js
├── markup_based_js_execution
├── cars
│   ├── init .js
│   ├── index.js
│   └── ...
└── users
    └── ...

और जावास्क्रिप्ट इस तरह दिखेगा:

// application.js

//= 
//= require init.js
//= require_tree cars
//= require_tree users
// init.js

SITENAME = new Object();
SITENAME.cars = new Object;
SITENAME.users = new Object;

SITENAME.common.init = function (){
  // Your js code for all pages here
}
// cars/init.js

SITENAME.cars.init = function (){
  // Your js code for the cars controller here
}
// cars/index.js

SITENAME.cars.index = function (){
  // Your js code for the index method of the cars controller
}

और markup_based_js_execution में यूटीआईएल ऑब्जेक्ट के लिए कोड और डीओएम-तैयार UTIL.init निष्पादन पर कोड होगा।

और इसे अपनी लेआउट फ़ाइल में रखना न भूलें:

<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">

मुझे यह भी लगता है कि बेहतर पेज-विशिष्ट सीएसएस के लिए data-* विशेषताओं के बजाय कक्षाओं का उपयोग करना बेहतर है। जैसा कि जेसन गैबर ने उल्लेख किया है: पेज-विशिष्ट सीएसएस चयनकर्ता वास्तव में अजीब हो सकते हैं (जब आप data-* विशेषताओं का उपयोग करते हैं)

उम्मीद है इससे आपको मदद मिलेगी।


Move all your commom JS files to a sub-folder like 'app/assets/javascript/global' then in the application.js, modify the //= require_tree . line to //= require_tree ./global .

Now you are free to put your controller-specific JS on the 'app/assets/javascript/' root and they will not be included in compiled JS, being used just when you call them via = javascript_include_tag on your controller/view.


Paloma project offers interesting approach to manage page specific javascript code.

Usage example from their docs:

var UsersController = Paloma.controller('Users');

// Executes when Rails User#new is executed.
UsersController.prototype.new = function(){
   alert('Hello Sexy User!' );
};

Though you have several answers here, I think your edit is probably the best bet. A design pattern that we use in our team that we got from Gitlab is the Dispatcher pattern. It does something similar to what you're talking about, however the page name is set in the body tag by rails. For example, in your layout file, just include something like (in HAML):

%body{'data-page' => "#{controller}:#{action}" }

Then only have one closure and a switch statement in your dispatcher.js.coffee file in your javascripts folder like so:

$ ->
  new Dispatcher()

class Dispatcher
  constructor: ->
    page = $('body').attr('data-page')
    switch page
      when 'products:index'
        new Products() 
      when 'users:login'
        new Login()

All you need to do in the individual files (say products.js.coffee or login.js.coffee for example) is enclose them in a class and then globalize that class symbol so you can access it in the dispatcher:

class Products
  constructor: ->
    #do stuff
@Products = Products

Gitlab has several examples of this that you might want to poke around with in case you're curious :)


Here's how to do it especially if you don't have to execute tons of libraries for your specific page, but only to run a few hundreds lines of JS more or less.

Since it's perfectly fine to embed Javascript code into HTML, just create under app/views shared.js directory and place there your page/pages specific code inside my_cool_partial.html.erb

<script type="text/javascript"> 
<!--
  var your_code_goes_here = 0;
  function etc() {
     ...
  }
-->
</script>

So now from wherever you want you simply do:

  = render :partial => 'shared.js/my_cool_partial'

And that's it, k?


चरण 1। remove require_tree . in your application.js and application.css.

चरण 2। Edit your application.html.erb(by rails default) in layout folder. Add "params[:controller]" in the following tags.

<%= stylesheet_link_tag    'application', params[:controller], media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track' => true %>

चरण 3। Add a file in config/initializers/assets.rb

%w( controller_one controller_two controller_three ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.js.coffee", "#{controller}.css", "#{controller}.scss"]
end

references: http://theflyingdeveloper.com/controller-specific-assets-with-rails-4/


आप जेएस को फ़ोल्डरों में भी समूहित कर सकते हैं और पेज के आधार पर अपने जावास्क्रिप्ट को चुनिंदा लोड करने के लिए एसेट पाइपलाइन का उपयोग करना जारी रख सकते हैं।


मैं आपके उत्तर से सहमत हूं, यह जांचने के लिए कि क्या चयनकर्ता वहां है, इसका उपयोग करें:

if ($(selector).length) {
    // Put the function that does not need to be executed every page
}

(किसी को भी वास्तविक समाधान जोड़ने नहीं देखा)


संपत्ति पाइपलाइन दस्तावेज़ों का सुझाव है कि नियंत्रक-विशिष्ट जेएस कैसे करें:

उदाहरण के लिए, यदि कोई ProjectsController जेनरेट किया गया है, तो app/assets/javascripts/projects.js.coffee और app/assets/stylesheets/projects.css.scss . app/assets/stylesheets/projects.css.scss पर एक नई फाइल होगी। आपको किसी भी जावास्क्रिप्ट या सीएसएस को अपनी संबंधित परिसंपत्ति फ़ाइलों के अंदर एक नियंत्रक के लिए अद्वितीय रखना चाहिए, क्योंकि इन फ़ाइलों को केवल इन नियंत्रकों के लिए <%= javascript_include_tag params[:controller] %> या <%= stylesheet_link_tag params[:controller] %> जैसे लाइनों के साथ लोड किया जा सकता है <%= stylesheet_link_tag params[:controller] %>

लिंक: property_pipeline



I have another solution, which although primitive works fine for me and doesn't need any fancy selective loading strategies. Put in your nornal document ready function, but then test the current windows location to see if it is the page your javascript is intended for:

$(document).ready(function() {
   if(window.location.pathname.indexOf('/yourpage') != -1) {
          // the javascript you want to execute
   }
}

This still allows all the js to be loaded by rails 3.x in one small package, but does not generate much overhead or any conflicts with pages for which the js isn't intended.


ryguy's answer is a good answer, even though its been downvoted into negative points land.

Especially if you're using something like Backbone JS - each page has its own Backbone view. Then the erb file just has a single line of inline javascript that fires up the right backbone view class. I consider it a single line of 'glue code' and therefore the fact that its inline is OK. The advantage is that you can keep your "require_tree" which lets the browser cache all the javascript.

in show.html.erb, you'll have something like:

<% provide :javascript do %>
  <%= javascript_include_tag do %>
    (new app.views.ProjectsView({el: 'body'})).render();
  <% end %>
<% end do %>

and in your layout file, you'll need:

<%= yield :javascript %>

LoadJS मणि एक और विकल्प है:

लोडजेएस स्प्राकेट्स द्वारा प्रदान किए गए जादू को खोए बिना रेल ऐप में पेज-विशिष्ट जावास्क्रिप्ट कोड लोड करने का एक तरीका प्रदान करता है। आपका सभी जावास्क्रिप्ट कोड एक जावास्क्रिप्ट फ़ाइल में छोटा करके जारी रहेगा लेकिन इसके कुछ हिस्सों को केवल कुछ पृष्ठों के लिए निष्पादित किया जाएगा।

LoadJS


इस तरह मैंने स्टाइल मुद्दे को हल किया: (हैमल से बहाना)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

इस तरह से मैं सभी पेज विशिष्ट .css.sass फ़ाइलों को शुरू करता हूं :

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

इस तरह आप आसानी से किसी भी संघर्ष से बच सकते हैं। जब .js.coffee फ़ाइलों की बात आती है तो आप केवल तत्वों को प्रारंभ कर सकते हैं;

$('#post > #edit') ->
  $('form > h1').css('float', 'right')

उम्मीद है कि इससे कुछ मदद मिली।


दुर्भाग्य से नहीं।

querySelector XML नेमस्पेस को संभाल नहीं करता है, इसलिए इस तरह से ऐसा करने का कोई आसान तरीका नहीं है। हालांकि आप XPath क्वेरी का उपयोग कर सकते हैं।

var result = document.evaluate(
    // Search for all nodes with an href attribute in the xlink namespace.
    '//*[@xlink:href="url"]',
    document,
    function(prefix){
        return {
            xlink: "http://www.w3.org/1999/xlink"
        }[prefix] || null;
    },
    XPathResult.ORDERED_NODE_ITERATOR_TYPE
);

var element = result.iterateNext();

यदि आपको पूर्ण क्रॉस-ब्राउज़र समर्थन की आवश्यकता है, जैसे आईई के लिए, जिसमें कोई document.evaluate नहीं है। मूल्यांकन करें, आप इसे खराब wicked-good-xpath साथ पॉलीफिल कर सकते हैं।

बेशक, आपके उपयोग के आधार पर, ऐसा करना आसान हो सकता है (जो मुझे लगता है कि आईई पर काम करेगा):

var element = Array.prototype.filter.call(document.querySelectorAll('a'),
    function(el){
    return el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') === 'url';
})[0] || null;




javascript ruby-on-rails ruby-on-rails-3.1 asset-pipeline sprockets