एसेट पाइपलाइन रेलवे

Question

में रूबी कोडिंग में रूबी कोडिंग का उपयोग करते समय @ variables वापस नहीं कर सकता है। मैं स्थानीय विकास वातावरण पर s3_direct_upload का उपयोग करने के लिए https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails#jquery-file-upload-callbacks ट्यूटोरियल का पालन कर रहा हूं। कुछ जावास्क्रिप्ट हैं जो प्रत्येक फ़ाइल फ़ील्ड के लिए फ़ाइलअपलोड फ़ंक्शन सेट करते हैं। अगर मैं बस फॉर्म के ठीक नीचे कोड शामिल करता हूं तो यह सब अच्छा काम करता है, लेकिन अगर मैं कोड को js.erb फ़ाइल में app/assets/javascripts/ के तहत डालता हूं तो यह काम नहीं करता है। त्रुटि है:

ActionView::Template::Error (undefined method `url' for nil:NilClass 
    (in /s3_direct_upload_gem_test/app/assets/javascripts/s3_direct_upload.js.erb)): 
    18: 
    19: <%= @s3_direct_post.url %> 
    20: 
    21: <%= javascript_include_tag :s3_direct_upload %> 
    app/assets/javascripts/s3_direct_upload.js.erb:14:in `block in singleton class' 

जैसा कि आप देख सकते हैं, line 19 ऊपर कोड से बाहर @ s3_direct_post.url मुद्रित करने के लिए प्रयोग किया जाता है। जब मैं फ़ाइल में सभी जावास्क्रिप्ट शामिल करता हूं तो यह सही ढंग से मुद्रित किया गया था।

fileInput.fileupload({ 
    fileInput:  fileInput, 
    url:    '<%= @s3_direct_post.url %>', 
    type:   'POST', 
    autoUpload:  true, 
    formData:   <%= @s3_direct_post.fields.to_json.html_safe %>, 

ऐसा नहीं है कि किसी कारण, assets फ़ोल्डर के अंतर्गत जावास्क्रिप्ट फ़ाइल (परिसंपत्ति पाइप लाइन में) के लिए की तरह लगता है अलग से और इतने संकलित किया गया है @s3_direct_post: यदि मैं s3_direct_upload.js.erb में लाइन 14 का पता लगाने के लिए, यह url रेखा है , जो Controller में सेट है, यहां सेट नहीं है।

बेशक मैं हमेशा उन्हें दर्शक फ़ाइल पर <script> में डाल सकता हूं लेकिन यह काफी सुरुचिपूर्ण नहीं है। पृष्ठ-विशिष्ट जेएस कोडिंग को अलग करने और ऊपर की समस्या को हल करने का कोई तरीका है?

Answer 1

सभी जेएस फाइल/संपत्ति/जावास्क्रिप्ट के भीतर संपत्ति पाइपलाइन का हिस्सा हैं। उत्पादन में जब आपकी रेल ऐप तैनात की जाती है तो संपत्ति पाइपलाइन पहले से संकलित की जाती है (उदाहरण के लिए प्रत्येक अनुरोध पर नहीं)। यही कारण है कि @s3_direct_post.url शून्य है।

मैं मानता हूं कि दृश्य में पूरे जेएस कोड इंजेक्शन करना आदर्श से कम है और बहुत ही सुरुचिपूर्ण नहीं है।

/* /assets/javascripts/s3_direct_upload.js */ 
window.MyApp = {}; 
window.MyApp.config = {}; 

window.MyApp.config.getS3Url = function() { 
    if(typeof(window.MyApp.config._s3Url) == ‘undefined’) { 
    throw “No S3 URL configured”; 
    } 
    return window.MyApp.config._s3Url; 
}; 

window.MyApp.config.setS3Url = function(url) { 
    window.MyApp.config._s3Url = url; 
} 

// ... 
$('#upload-button').on('click', function(){ 
    fileInput.fileupload({ 
    fileInput:  fileInput, 
    url:    window.MyApp.config.getS3Url(), 
    type:   'POST', 
    autoUpload:  true 
    }) 
}); 

तब दृश्य केवल संदर्भ के लिए Config API की जरूरत है: अतीत में मैं दृष्टिकोण है कि गूगल एनालिटिक्स, जहां जे एस के केवल 2-3 लाइनों एचटीएमएल में रखा जाता है जैसे जे एस चौखटे से प्रेरणा लेने के लिए साथ आए हैं आपने बनाया है:

<script type=“text/javascript”> 
    window.MyApp.config.setS3Url('<%= @s3_direct_post.url %>'); 
</script> 

हालांकि यदि आप वास्तव में दृढ़ संकल्पित हैं कि विचारों में कोई जेएस न हो। आप एक गतिशील JSON अनुरोध के माध्यम से कॉन्फ़िगरेशन लोड कर सकते हैं:

class JSConfigsController < ApplicationController 
    def index 
    configs = { 
     's3URl' => @s3_direct_post.url 
     # etc 
    } 

    respond_to do |f| 
     f.json do 
     render json: {config: configs} # => {"config": {"s3Url": "http://the_url"}} 
     end 
    end 
    end 
end 

तो फिर तुम /js_configs.json अनुरोध द्वारा ajax के माध्यम से सभी कॉन्फ़िगरेशन लोड कर सकते हैं। हालांकि इस दृष्टिकोण को अजाक्स की असीमित प्रकृति के कारण थोड़ी अधिक देखभाल की आवश्यकता है। उदा। आपको जेएस फ़ंक्शंस को कॉल करने के लिए सावधान रहना होगा जो कि एफ़ैक्स अनुरोध को पुनर्प्राप्त होने तक कॉन्फ़िगरेशन पर भरोसा करते हैं।

Answer 2

अंत में मैं एक और एस 3 संबंधित मणि का उपयोग कर इस समस्या के आसपास काम करता हूं: s3_file_field और यह भारी tweaking के बिना भी अच्छी तरह से काम करता है। दुर्भाग्य से मुझे इस समस्या को हल करने के लिए मेरे अध्ययन के माध्यम से सभी संबंधित जानकारी नहीं मिल रही है।

मुझे आशा है कि यह मदद होगी!