如何在SLIM和Rails中将Ruby哈希转JSON嵌入DOM的data属性

你遇到的引号解析异常是因为JSON内部的双引号和HTML属性的边界引号冲突，SLIM的方括号属性语法对嵌套引号的处理存在限制，所以会出现属性被异常拆分的情况。

正确写法 #

你直接在属性名后用=关联Ruby表达式即可，SLIM会自动处理引号转义，无需手动处理：

#product-modal.modal.fade tabindex="-1" role="dialog" aria-label="myModalLabel" aria-hidden="true" data-product-info=product_data.to_json

实现说明 #

• 该写法生成的HTML会自动将JSON内部的双引号转义为"，浏览器会自动识别转义符，不会出现属性拆分问题
• jQuery的data()方法会自动解析转义后的JSON字符串为JS对象，你可以直接读取属性，无需额外调用JSON.parse()

静态JSON的写法 #

如果你需要直接写入静态JSON字符串，只需转义内部双引号即可：

#product-modal.modal.fade data-test='{\"a\": 10, \"b\": 20}'

注意事项 #

• 不推荐将包含嵌套引号的属性放到SLIM的方括号[]语法中，该语法对复杂属性值的解析兼容性较差
• 你提供的JS示例中存在笔误：cosole应为console，避免运行时报错

内容的提问来源于stack exchange，提问作者Ziyan Junaideen