在Rails中的.js.erb中使用ruby编码时,资产管道无法返回@variables

Question

我正在关注https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails#jquery-file-upload-callbacks教程,以便在本地开发环境中使用s3_direct_upload.有一些javascripts为每个文件字段设置fileupload函数.如果我只是简单地在表单下面包含代码,这一切都很有效,但是如果我将代码放在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.当我在文件中包含所有javascript时,它被正确打印.如果我跟踪中的第14行s3_direct_upload.js.erb,则为以下url行:

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

看起来由于某种原因,文件assets夹下的javascript文件(在资产管道中)是单独编译的,所以@s3_direct_post在Controller此处未设置.

当然,我总是把它放在<script>查看器文件中,但它不是很优雅.有没有办法分离页面特定的js编码和解决上面的问题？

Answer 1

/ assets/javascript中的所有JS文件都是资产管道的一部分.在生产中,在部署Rails应用程序时预先编译资产管道(例如,不在每个请求上).这就是为什么@s3_direct_post.url是零.

我同意在视图中注入整个JS代码并不理想,也不是很优雅.在过去,我提出了从Google Analytics等JS框架中获取灵感的方法,其中只有2-3行JS放在HTML中:

/* /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:

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

但是如果你真的决定不在视图中有任何JS.您可以通过动态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

然后你可以通过ajax请求加载所有配置/js_configs.json.但是,由于Ajax的异步特性,这种方法需要更加小心.例如,在Ajax请求完成检索之前,您必须小心不要调用依赖于配置的JS函数.