次の例のように、.coffee
ファイルでerbを使用したい
myLatlng: new google.maps.LatLng(<%[email protected] %>, <%[email protected] %>)
locations.js.coffee
の名前をlocations.erb.coffee
に変更しました
でも次のエラーが出ます
Error compiling asset application.js:
ExecJS::ProgramError: Error: Parse error on line 4: Unexpected 'COMPARE'
(in /Users/denisjacquemin/Documents/code/projects/geolog/app/assets/javascripts/locations.erb.coffee)
Served asset /application.js - 500 Internal Server Error
YOUR VIEWフォルダーの.coffee
ファイルにerbが必要な場合は、ファイル名をyourfilename.js.coffee
のままにしてください。Railsでも奇妙にERBを処理します。
Herokuで機能させるには、Gemfileのアセットグループからcoffee-Railsを移動します。
Erbがcoffeeの前に処理されるように、ファイルの名前をlocations.coffee.erbに変更する必要があるかもしれません:)
js.erb
ビューを使用する代わりに、可能な場合はRails 4でアセットパイプラインに固執します。
Ruby on Rails-JavaScript変数をコントローラーから外部JavaScriptアセットファイルに送信する で説明されているgonまたは他のいくつかの手法を使用して、変数をJに渡します。
gon
の場合:
app/views/layouts/application.html.erb:
<head>
<meta charset="utf-8"/>
<%= include_gon %>
app/controllers/application_controller.rb:
before_filter do
gon.latitude = 0.1
gon.longitude = 0.2
end
app/assets/javascripts/locations.js.coffee:
myLatlng: new google.maps.LatLng(gon.latitude, gon.longitude)
ファイルは起動時に一度だけプリコンパイルされ、Railsではなくサーバーによって提供され、残りのJと同じHTTPリクエストで処理されるため、この方法はより高速です。
Rails 3.2.8では、.coffeeファイルを/ app/viewsに移動する必要はありませんでした。ファイル名に.erbを追加し、/ app/assets/javascriptsに残しました。つまり、私は
/app/assets/javascripts/user_answers.coffee.js to
/app/assets/javascripts/user_answers.coffee.js.erb
そしてこれはうまくいきました:
# Note the level of indentation.
var x = 2;
<% Question.first(2).each do |eq| %>
alert('eq: ' + <%= eq.id %>)
<% end %>
(インデントレベルはRubyではなくCoffeeScriptで一致する必要があります。)ルビーに埋め込まれたコーヒーをお楽しみください。
特にHerokuを使用している場合は、Ciro Centelliがアセットパイプラインをそのままにすることに同意します。間違いなくgon
は多くの割り当てが必要な場合に便利ですが、gemがなくてもこれを行うことができます。あなたのhtmlに含める
<%= javascript_tag do %>
window.latitude = <%[email protected] %>
window.longitdue = <%= @location.longitude %>
<% end %>
そしてあなたのコーヒーファイルに
myLatlng: new google.maps.LatLng(window.latitude, window.longitude)
多くの場合、同様の方法で他のニーズに対処できます。たとえば、特定のIDを持つ要素でコーヒースクリプトをトリガーしたくない場合は、htmlでerbを使用して、トリガーしたいときにのみそのIDを追加します。