erbからJavascriptにデータ属性として渡されたときにJSONデータが失われるのはなぜですか？

Question

私のRailsアプリケーションのRuby部分からJavascriptファイルにいくつかのもの（JSONオブジェクトを含む）を渡そうとし、HTMLデータ属性を使用してそれを試みます。 .html.erbファイルで

：.jsファイルで

<div id='myDiv' data-points="<%=raw @points.to_json%>" data-unit-id="<%=@unit_id%>" > 
</div> 

：

var myDiv = document.getElementById("myDiv"); 
console.log(map_canvas.getAttribute("data-unit-id")); 
console.log(map_canvas.getAttribute("data-points")); 

データ・ユニット-idは、コンソール・ログに正しく表示されません。しかし、JSONオブジェクトであるデータ・ポイントは、コンソール・ログにのみ、このように現れる：私はhtml.erb側から<%=raw @points.to_json%>にログインすると

{ 

、それは同様に細かい現れ - そうピースルビコードの仕事はうまくいっています。データ属性として渡されていくうちにどこかで失われてしまいます（そしてdata-unit-idはありません！）。

誰かが私が間違っていることを知っていますか？

Answer 1

引用。生成されたマークアップは構文的に無効なHTMLです。属性値が早すぎると、data-points="{"foo": 1}"が終了します。見る？あなたはそれがfooというキーのオープニングクーポンだと思っていますが、は実際にはです。それはdata-pointsの値です。

data-points="{\"foo\": 1}" 

または値に

data-points='{"foo": 1}' 

を囲む引用符の別のタイプを使用します。いずれか、これを避ける値の二重引用符をエスケープする