いまWebのフロントエンド開発において、JSで一部のHTMLを動的に構築することが増えてきた。 JSでデータからHTMLを構築する場合、そのデータの部分はやっぱりjsonの方が扱いやすい。

自分はRailsのテンプレートエンジンにslimを使っているので、slimでJSの世界にjsonを渡す方法を考えたので書いておく。

htmlのdata-attributeにjsonを渡す

こんな感じ。

div.data-getter data-getter=@value.to_json

javascript:
  var value = JSON.parse($('.data-getter').attr('data-getter'));

jsにデータ受け取り用のglobal変数を作って、そこに渡す

こんな感じ。

javascript:
  DataGetter = {};
  DataGetter.value = #{raw @value.to_json}