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

Question

我尝试从我的 Rails 应用程序的 Ruby 部分向 Javascript 文件传递一些东西（其中有一个 JSON 对象），并尝试使用 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%> 时，它也显示正常 - 所以 ruby 代码片段可以正常工作 - 所以在某处通过作为数据属性，它会丢失（data-unit-id 不会！）。

有人知道我做错了什么吗？

Answer 1

引用。您生成的标记在语法上无效 html。属性值提前结束，data-points="{"foo": 1}"。看？您认为这是键 foo 的开场报价，但 实际上 它是 data-points 值的收盘报价。

为避免这种情况，请在值中转义双引号：

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

或使用其他类型的引号将值括起来

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

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

Why does my JSON data get lost when passed as a data attribute from erb to Javascript?

javascript

json

ruby-on-rails

erb