सभी संपत्ति_पैथ मानों का निर्माण करके * .js.erb फ़ाइलों से बचें

Question

इसलिए मैं ईआरबी के साथ जावास्क्रिप्ट फ़ाइलों को संसाधित करना चाहता हूं, इसलिए मैं एक छवि कहने के लिए उचित संपत्ति पथ प्राप्त कर सकता हूं।

वर्तमान में, इस लोकप्रिय दृष्टिकोण की तरह लगता है:

var myImage = "<%= asset_path('my_image') %>";

कौन सा, ज़ाहिर है, फ़ाइल नाम की आवश्यकता है ताकि यह संसाधित किया जाएगा "* .erb" के लिए बदला जा।

मैं अपनी परियोजना में एक बिंदु पर ईआरबी कुरूपता को अलग करता हूं, एक एकल मैनिफेस्ट फ़ाइल (कहता हूं, "assets.js.erb") जो मेरी जावास्क्रिप्ट की सभी संपत्ति पथों की गणना करता है और उपलब्ध कराता है।

मैं निश्चित रूप से यह यह निपटने द्वारा wetly कर सकते मामला-दर-मामला:

ASSETS = 
    "my_image": "<%= asset_path('my_image') %>" 

window.assetPath = (path) -> ASSETS[path] 

लेकिन, मैं वास्तव में नहीं बल्कि सिर्फ कुछ ERB मेरी asset_paths.asset_environment.paths सभी के माध्यम से recurse और एक बड़ा वस्तु शाब्दिक का निर्माण करने के बारे में था मेरे लिए प्रकट है, ताकि मेरा असली आवेदन जावास्क्रिप्ट आत्मविश्वास से कॉल कर सकते हैं:

var myImage = assetPath('my_image');

पर कोई भी विचार (1) अगर वहाँ यह करने के लिए एक आसान तरीका है कि मैं याद किया, या (2) मैं कैसे पूरा करेंगे सभी poten की एक खोज asset_path पर वैध मान्य तर्क?

Answer 1

एक आसान तरीका:

1. अपने .js.erb में संपत्ति उपसर्ग प्राप्त करें: <% = Rails.configuration.assets.prefix%>। यदि एक पूर्ण पथ की आवश्यकता है, तो आप एप्लिकेशन यूआरएल भी प्राप्त कर सकते हैं (इसे रेल से प्राप्त करने के लिए यह अधिक जटिल है, इसलिए आप इसे अपने .js.erb में हार्डकोड कर सकते हैं?)

2. यदि आप प्रीकंपील्ड संपत्तियों के साथ काम कर रहे हैं , manifest.yml (<% = Rails.configuration.assets.manifest%> पर) में संग्रहीत आपकी फ़ाइल का फिंगरप्रिंट प्राप्त करें। प्रकट अपने सभी परिसंपत्तियों और उनके संबंधित उंगलियों के निशान (documentation)

   साथ एक सूची है

3. मेक assetPath सिर्फ आवेदन URL + अपनी छवि का नाम या अंगुली की छाप के लिए उपसर्ग prepending

एक असुविधाजनक आप करना है पूर्ण छवि नाम निर्दिष्ट करें (एक्सटेंशन शामिल)।

Answer 2

यह इस छवि का उपयोग करने के संदर्भ में निर्भर करता है।

केस 1 का उपयोग करें: छवि सजावटी है और गतिशील रूप से स्वैप होने की आवश्यकता है। उदाहरण: स्पिनर, जबकि डेटा लोड हो रहा है। इस मामले में, मैं अपने सास और जावा स्क्रिप्ट में संदर्भित हूं।

.spinner 
    background-image: url(image_path("spinner.png")) 

तब मैं जावा स्क्रिप्ट में कक्षाओं के साथ काम करता हूं, न कि छवियों।

$.addClass('spinner') 

केस 2 का उपयोग करें: छवि किसी ऑब्जेक्ट का हिस्सा है।

कई स्थितियां हैं, जब कोई छवि वास्तव में किसी ऑब्जेक्ट से संबंधित होती है। इस मामले में, मैं एक जेएसएस फ़ाइल बनाता हूं, जो इस तरह के डेटा और छवि संदर्भ को संग्रहीत करता है। तब मैं ERB का उपयोग छवि संदर्भ खोलने में - my_object.json.erb:

{ 
    "icon" : "<%=image_path("icons/my_icon.png")%>", 
    "label":"My label", 
    "description":"My description" 
} 

मामले 2 उपयोग जावास्क्रिप्ट पक्ष json फ़ाइलों को लोड करने के बारे में अधिक काम की आवश्यकता है, लेकिन यह बहुत शक्तिशाली तानाना विकल्प खुल जाता है।

संपत्ति पाइपलाइन दोनों मामलों को प्रसिद्ध रूप से संभालती है।

Answer 3

पुराना सवाल है, लेकिन इसे पूरा करने का एक अच्छा तरीका है। बस मेरे समाधान के संदर्भ की व्याख्या करने के लिए: मुझे मानचित्र में मार्कर प्रदर्शित करने की आवश्यकता है, जिसमें जेएस गतिशील चर के आधार पर अलग-अलग संभावित आइकन हैं। आश्चर्यजनक रूप से, <% = asset_path ('"+ somefunction (raw_value) +"') का उपयोग करके%> काम नहीं कर रहा था। फिर, मैंने हल समाधान की तलाश की है।

कंक्रीटली, मैं जिस समाधान का उपयोग कर रहा हूं वह केवल एक js.erb फ़ाइल है जो छवियों के मूल्यों को संग्रहित करता है, और उनके फिंगरप्रिंट किए गए नाम, जिन्हें एक फ़ंक्शन, image_path द्वारा प्राप्त किया जा सकता है। उसके बाद, मेरे सारे अन्य जे एस फ़ाइलें asset_path से मुक्त हो सकते हैं, परिणामस्वरूप, .erb

के निम्नलिखित सामग्री के साथ your_application/app/assets/javascripts में एक फ़ाइल images.js.erb बनाएँ:

<% 
    imgs = {} 
    Dir.chdir("#{Rails.root}/app/assets/images/") do 
     imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)} 
    end 
%> 

window.image_path = function(name) { 
    return <%= imgs.to_json %>[name]; 
}; 

अपने application.js में इस फ़ाइल की आवश्यकता होती है, जो ऊपर की तरह उसी निर्देशिका में सामान्य रूप से है:

//= require ... 
//= require ... 
//= require images 
//= require_tree . 

फिर, जे एस कि आप <%= asset_path('image.png') %> का उपयोग कर के अंदर, आप के बजायका उपयोग करेगा

क्रेडिट्स स्क्रिप्ट संस्करण पोस्ट करने के लिए this ब्लॉग पोस्ट को क्रेडिट पोस्ट, जिसमें से मैंने मेरा आधार बनाया है।