Warum gehen meine JSON-Daten verloren, wenn sie als Datenattribut von erb an Javascript übergeben werden?

Question

Ich versuche, einige Sachen (unter denen ein JSON-Objekt) aus dem Ruby-Teil meiner Rails-Anwendung in eine Javascript-Datei übergeben, und versuchen Sie dies mit den HTML-Daten-Attribute.

In der .html.erb Datei:

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

In der JS-Datei:

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

Daten-Einheit-ID korrekt in dem Konsolenprotokoll nicht angezeigt. Allerdings sind die Daten-Punkte, die ein JSON-Objekt ist, zeigt, wie es nur diese in der Konsolenprotokoll auf:

{ 

Wenn ich log <%=raw @points.to_json%> von der html.erb Seite, es zeigt sich fein als auch - so das Stück Ruby-Code macht seinen Job gut -, so irgendwo während als Datenattribut übergeben wird es verloren (und data-unit-id nicht!).

Hat jemand eine Ahnung, was ich falsch mache?

Answer 1

Zitate. Ihr generiertes Markup ist syntaktisch ungültiges HTML. Der Attributwert endet vorzeitig, data-points="{"foo": 1}". Sehen? Sie denken, es ist ein Eröffnungsangebot für Schlüssel foo, aber eigentlich es ist Schlusskurs für data-points Wert.

dies zu vermeiden, entweder doppelte Anführungszeichen im Wert entkommen:

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

oder eine andere Art von Anführungszeichen verwenden, um den Wert

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

zu umgeben