ruby-on-rails - Rails 3.1 Assets 管道中的客户端动态 Assets URL

Question

长话短说

我正在尝试在客户端使用 HTML5 数据元素动态生成 Assets URL。这意味着 Assets 名称直到浏览器运行时才可用，这会阻止 ERB 在服务器上进行预处理。

是否有处理这种情况的变通方法或最佳实践？

背景

我正在使用 Fusion Charts Rails 应用程序中的图表插件，它使用各种 SWF 文件生成图表。我正在将应用程序升级到 Rails 3.1，并将这些 SWF 文件放入 /vendor/assets/javascripts/fusion_charts。

在应用程序中，我使用 HTML5 数据属性动态指定要绘制的图表类型，如下所示:

<%# ... metric.html.erb ... %>
<div id='chart-container' class='fusion-chart'
  data-chart-type='MSLine'
  data-source-url="<%= @metric.data_url %>">

然后我有一个用 CoffeeScript 编写的简单 jQuery 插件，它可以提取这些数据属性并将其连接到 Fusion Charts:

// ... charting_plugin.js.coffee ...
chart = new FusionCharts
  swfUrl: "/assets/fusion_charts/#{data.chartType}.swf"
chart.setJSONUrl data.sourceUrl
chart.render containerId

我遇到的问题是 swfUrl 参数。遵循 RoR Asset Pipeline guide 中提供的指导，我应该在 ERB 中使用 asset_path 帮助程序，但这不起作用，因为 data.chartType 在运行时绑定(bind)在客户端上，并且不能预处理服务器端。

<# ... charting_plugin.js.coffee.erb: This won't work; data.chartType isn't defined ... %>
chart = new FusionCharts
  swfUrl: "<%= asset_path "fusion_charts/#{data.chartType}.swf" %>"
chart.setJSONUrl data.sourceUrl
chart.render containerId

解决方法

最简单的解决方法(我目前正在使用的方法)是简单地将 SWF 文件移回 /public/fusion_charts，而不用担心管道的 Assets 指纹识别复杂性。也就是说，我是管道的新手，所以我可能遗漏了一些明显的东西。

有没有更好的方法来处理这样的客户端 Assets URL？

Answer 1

一个解决方案是根据图表类型为 swf 文件创建一个查找表，例如:

var chartMap = {
<% 
chart_types.collect do |type|
  "#{type.to_json}: #{asset_path(type + '.swf')}"
end.join(",\n")
%>
};

然后添加一个函数来在运行时在客户端获取正确的路径，如下所示:

function chartPath(type) {
  return chartMap[type];
};

然后将您的设置调用更改为:

chart = new FusionCharts
  swfUrl: chartPath(data.chartType)

IE，使用 ERB 构建 Assets 编译时需要的所有可能路径的列表，然后在客户端运行时进行查找。 (当然，您需要将上述 CoffeeScript 化 - 我不是咖啡师，我更喜欢拿铁咖啡。:-)