Question

我正在关注https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails#jquery-file-upload-callbacks教程，以便在本地开发环境中使用s3_direct_upload。有一些javascripts为每个文件字段设置fileupload函数。如果我只是简单地在表单下面包含代码，那么这一切都很有用，但如果我将代码放在app/assets/javascripts/下的js.erb文件中，它就行不通。错误是：

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时，它被正确打印。如果我跟踪s3_direct_upload.js.erb中的第14行，则为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

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

Answer 2

最后我通过使用另一个与s3相关的gem s3_file_field解决了这个问题，即使没有大量调整也能正常工作。遗憾的是，通过我的研究解决这个问题，我无法找到所有相关信息。

我希望这有帮助！

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

2 个答案: