javascript - 在 Rails 中的 .js.erb 中使用 ruby​​ 编码时， Assets 管道无法返回 @variables

Question

我正在关注 https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails#jquery-file-upload-callbacks在本地开发环境中使用 s3_direct_upload 的教程。有一些 javascripts 为每个文件字段设置文件上传功能。如果我简单地在表单下方包含代码，一切都很好，但如果我将代码放在 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 文件文件夹(在 Assets 管道中)是单独编译的，因此 @s3_direct_post , 这是在 Controller 中设置的这里没有设置。

当然我总是可以把它们放在 <script> 里在查看器文件中，但它不是很优雅。有什么办法可以分离出页面特有的js编码，解决上面的问题吗？

Answer 1

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

我同意在 View 中注入(inject)整个 JS 代码并不理想，也不是很优雅。在过去，我想出了一些从 JS 框架(如 Google Analytics)中获得灵感的方法，其中只有 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
  })
});

然后 View 只需要引用您创建的 Config API:

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

但是，如果您真的决定不在 View 中包含任何 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 函数。