当我的JSON数据作为数据属性从erb传递给Javascript时，为什么会丢失？

Question

我尝试将Rails应用程序的Ruby部分中的一些内容（其中包括一个JSON对象）传递给Javascript文件，并尝试使用HTML数据属性来实现。

在.html.erb文件中：

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

在.js文件中：

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

Data-unit-id确实正确显示在控制台日志中。 但是，作为JSON对象的数据点仅在控制台日志中显示为：

{

当我从html.erb端登录<%=raw @points.to_json%> points.to_json <%=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}'