クライアント側の動的資産のURL

Question

TL; DR

私はクライアント側で、動的にHTML5のデータ要素を使用して、資産URLを生成しようとしています。つまり、ブラウザでランタイムまでアセット名を使用できないため、ERBがサーバー上で前処理されません。

このような状況を処理するための回避策またはベストプラクティスはありますか？

背景

私はチャートを生成するために、様々なSWFファイルを使用してRailsアプリケーションにFusion Chartsチャート作成プラグインを使用しています。私はアプリケーションを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プラグインを持っていますフュージョンチャートへ：

// ... 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 

作業策

最も簡単な回避策（私は現在使用している1）が、単純に/public/fusion_chartsに戻すSWFファイルを移動し、パイプラインの資産フィンガープリントの複雑さを心配しないことです。それは、私はパイプラインに新しいので、おそらく私は何かが明らかに欠けていると言いました。

このようなクライアントサイドのアセット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、すべてのPOのリストを構築するためにERBを使用資産コンパイル時に必要となる可能性のあるパスを指定して、実行時にクライアントで検索します。 （もちろん、あなたは上記のスクリプトをコーヒーにする必要があります - 私はコーヒーの人ではなく、私はラテの方が好きです:-)