railsで使うテンプレートエンジンをerbからslimに移行しようと色々試していてはまったので。
Rubyの配列をhtmlタグとして出力せず、Javascriptに変数として渡してフロントでページを組み立てたいときなど。
やりたいこと
この手のRuby配列を
hoge_controller.rb
@test = ["大谷", "吉川", "メンドーサ"]
javascriptでこうなるように出したい
front.html
var test = ["大谷", "吉川", "メンドーサ"];
失敗例1
まずは何も考えずにそのまま出してみる
front.html.slim
javascript:
var test = #{@test}
結果
result
var test = ["大谷", "吉川", "メンドーサ"];
クォートがあれされたままなので当然jsでエラーが出る
失敗例2
eachを使って頑張ってみる
slim.front.html.slim
javascript:
var test = #{@test.each do |t| "'" + t + "'" end }
結果
result
var test = ["大谷", "吉川", "メンドーサ"];
何も変わってない＼(^o^)／
成功例
結論から言うと、Ruby側で加工してから出してあげれば解決します。
hoge_controller.rb
@test = ["大谷", "吉川", "メンドーサ"]
@test_j = @test.to_json.html_safe
front.html.slim
javascript:
var test = #{@test_j};
結果
result
var test = ["大谷", "吉川", "メンドーサ"];
できた！！
そもそもJSを動的に生成するのってどうなのって話も出るかもしれませんが、
なんだかんだ結構やることがあるのでやり方が見つかってよかったです。
Railsは超初心者なんですが、Slimいいですねほんと。
追記
コメント欄でご指摘いただきました.
#{}を#{{}}にするとエスケープされなくなるそうです。
こちらの方がずっと良いですね。
javascript:
var test = #{{@test.to_json}};