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

Question

我有一些在 Hamlet 中使用的 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 并失败。

如何告诉 Hamlet 包含文字字符串？

我尝试了以下各种组合：

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 示例不起作用，因为哈姆雷特似乎认为我正在尝试按照 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">