【问题标题】:Client-side dynamic asset URLs in the Rails 3.1 asset pipelineRails 3.1 资产管道中的客户端动态资产 URL
【发布时间】:2011-11-14 19:35:31
【问题描述】:

TL;DR

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

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

背景

我在 Rails 应用程序中使用Fusion Charts 图表插件,它使用各种 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 在运行时绑定在客户端上,并且不能预先在服务器端处理。

<# ... 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,而不必担心管道的资产指纹识别复杂性。也就是说,我是管道新手,所以也许我遗漏了一些明显的东西。

有没有更好的方法来处理这样的客户端资产 URL?

【问题讨论】:

    标签: ruby-on-rails ruby-on-rails-3.1 asset-pipeline


    【解决方案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 构建资产编译时所需的所有可能路径的列表,然后在运行时在客户端上进行查找。 (当然,您需要对上述内容进行咖啡脚本化 - 我不是咖啡爱好者,我更喜欢拿铁咖啡。:-)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-02-04
      • 1970-01-01
      • 1970-01-01
      • 2011-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多