Yesod Hamlet 通过用双引号替换单引号来打破 HTML

Question

我有一些 HTML 在哈姆雷特中使用的代码：

 <div .modal-card .card data-options='{"valueNames": ["name"]}' data-toggle="lists">

请注意 data-options 的单引号允许在字符串中使用双引号。

问题是，当 Hamlet 呈现页面时，Hamlet 将 " 放在 ' 周围，因此 HTML 被破坏了：

<div class="modal-card card" data-options="'{" valuenames":"="" ["name"]}'="" data-toggle="lists">

一些外部 JS 库插件代码运行，它试图解析 data-options 中的 JSON 但失败了。

如何告诉哈姆雷特包含文字字符串？

我试过各种组合：

let theString = "{\"valueNames\": [\"name\"]}"
let theString2 = "data-options='{\"valueNames\": [\"name\"]}'"
etc

在小村庄文件中：

 <div .modal-card .card data-options='#{ preEscapedText theString }' data-toggle="lists">
or
 <div .modal-card .card #{ preEscapedText theString2 } data-toggle="lists">

但所有尝试都会在字符串中产生无效 HTML 或无效 JSON。

如何指示 Hamlet 在输出中简单地包含一个文字字符串 HTML?

更新：

尝试了很多东西，没有结果。

string2 示例不起作用，因为 Hamlet 似乎认为我正在尝试根据 https://www.yesodweb.com/book/shakespearean-templates#shakespearean-templates_attributes

设置 id="{"

Answer 1

为什么不渲染 JSON 转义（" 变成 "）并稍后在解析时“处理”引号？

在哈姆雷特中插入：

<div #the-modal .modal-card .card data-options='#{theString}' data-toggle="lists">

将数据属性解析为JSON:

let json = document.getElementById("the-modal").getAttribute("data-options");
let opts = JSON.parse(json); // At least in Chrome, it works!

至于 theString2 替代方案，您还可以 interpolate attributes in Hamlet 使用元组或元组列表和星号：

let dataOptions = ("data-options", "{\"valueNames\": [\"name\"]}") :: (Text, Text)
...
<div #the-modal .modal-card .card *{dataOptions} data-toggle="lists">

Yesod Hamlet 通过用双引号替换单引号来打破 HTML

Yesod Hamlet breaks HTML by replacing single quotes with double quotes

yesod

hamlet