すべてのasset_path値を構築することで* .js.erbファイルを避ける

Question

私は、ERBでJavaScriptファイルを処理しないようにしたいので、イメージなどの適切なアセットパスを取得できます。

は現在、これは一般的なアプローチのように思える：

var myImage = "<%= asset_path('my_image') %>";

どの、もちろん、それが処理されますように、ファイル名が「* .erb」に変更することが必要です。

JavaScriptで必要なすべてのアセットパスを計算して利用できるようにする、単一のマニフェストファイル（assets.js.erbなど）を作成するプロジェクトでERBの醜さを1つのポイントに分離するのがはるかに簡単です。

I確かにケース・バイ・ケース、それに取り組むことにより、濡れそれを行うことができます。

ASSETS = 
    "my_image": "<%= asset_path('my_image') %>" 

window.assetPath = (path) -> ASSETS[path] 

しかし、私は本当にむしろちょうど私asset_paths.asset_environment.pathsのすべてを再帰するためにいくつかのERBを書き、文字通り大きなオブジェクトを構築したいです私の実際のアプリケーションJavaScriptが自信を持って呼び出すことができるように、私のマニフェスト：上

var myImage = assetPath('my_image');

任意のアイデア（1）私は逃した、または（2）私はどのように達成したいこれを行うための簡単な方法があるかどうすべてのポテンシャルの検索有効な引数はasset_path？になります。

Answer 1

簡単な方法：

1. はあなたの.js.erbにおける資産の接頭辞を取得します：<% = Rails.configuration.assets.prefix％>。絶対パスが必要な場合は、アプリケーションURLを取得することもできます（レールから取得するのがより複雑なので、.js.erbでハードコードするだけです）

2. プリコンパイルされたアセットmanifest.yml（<％= Rails.configuration.assets.manifest％>）に保存されているファイルの指紋を取得します。マニフェスト assetPathは自分のイメージの名前や指紋にアプリケーションURL +接頭辞を付加してください

すべての資産とそれぞれの指紋を持つリスト（ documentation）

3. が含まれてい

は不便はあなたがする必要があるということです完全なイメージ名（拡張子を含む）を指定します。

Answer 2

これは、この画像がどこで使用されているかによって異なります。

使用例1：画像が装飾的で、動的に交換する必要があります。 例：スピナー、データの読み込み中。 このケースでは、私が参照しているのは、私のサスとJavaスクリプトです。

.spinner 
    background-image: url(image_path("spinner.png")) 

私はJavaスクリプトではなく画像でクラスを操作します。

$.addClass('spinner') 

使用例2：画像はオブジェクトの一部です。

画像が実際にオブジェクトに属する場合は、多くの状況があります。この場合、jsonファイルを作成します。このファイルには、データとこのようなイメージ参照が格納されています。それから私は、画像参照のラップを解除するためにERBを使用 - my_object.json.erb：

{ 
    "icon" : "<%=image_path("icons/my_icon.png")%>", 
    "label":"My label", 
    "description":"My description" 
} 

ユースケース2は、JSONファイルをロードするためにはJavaScript側でより多くの作業が必要ですが、それは非常に強力な拡張オプションを開きます。

資産パイプラインは、両方のケースを有名に扱います。

Answer 3

古い質問ですが、これを行うには良い方法があります。私のソリューションの文脈を説明するだけです：私はマップに、JSの動的変数に基づいて異なる可能性のあるアイコンを持つマーカーを表示する必要があります。不思議なことに、<％= asset_path（ '"+ somefunction（raw_value）+"'）％）を使用していませんでした。それから、私は解決策を探しました。

具体的には、私が使用している解決策は、画像の値を格納する1つのjs.erbファイルと、ファンクションで取得できる指紋の名前image_pathだけです。その後、すべての私の他のJSファイルはasset_pathの自由することができ、従って、.erb

の次の内容のyour_application/app/assets/javascriptsでファイルimages.js.erbを作成します。

<% 
    imgs = {} 
    Dir.chdir("#{Rails.root}/app/assets/images/") do 
     imgs = Dir["**"].inject({}) {|h,f| h.merge! f => image_path(f)} 
    end 
%> 

window.image_path = function(name) { 
    return <%= imgs.to_json %>[name]; 
}; 

はあなたのapplication.jsでこのファイルを必要とします、上記と同じディレクトリ内に通常ある：次に

//= require ... 
//= require ... 
//= require images 
//= require_tree . 

、あなたが<%= asset_path('image.png') %>を使用してきたJSの内側に、あなたの代わりにを使用します。

クレジットからthis私は私が基づいているコーヒースクリプトのバージョンを投稿するためのブログポスト。