Yesod Hamlet ломает HTML, заменяя одинарные кавычки двойными кавычками

У меня есть HTML-код, который я использую в Hamlet:

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

Обратите внимание, что одинарные кавычки для data-options позволяют использовать двойные кавычки внутри строки.

Проблема в том, что когда Гамлет рендерит страницу, Гамлет помещает " вокруг ', и поэтому HTML не работает:

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

Запускается некоторый внешний код подключаемого модуля библиотеки JS, он пытается проанализировать JSON внутри data-options и терпит неудачу.

Как я могу указать Гамлету включить литеральную строку?

Я пробовал различные комбинации:

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

И в файле hamlet:

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

Но все попытки приводят к недопустимому HTML или недопустимому JSON внутри строки.

Как я могу указать Гамлету просто включить литеральную строку в выходной HTML-код?

Обновлять:

Пробовал больше вещей, никакого результата.

Пример string2 не работает, потому что Гамлет, кажется, думает, что я пытаюсь установить id="{" согласно https://www.yesodweb.com/book/shakespearean-templates#shakespearean-templates_attributes


yesod hamlet
person bg2000 Reinstate Monica    schedule 12.10.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Почему бы не визуализировать экранированный JSON (" стать &quot;) и «обработать» кавычки позже при синтаксическом анализе?

Интерполировать в Гамлете:

<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, вы также можете интерполировать атрибуты в Hamlet, используя кортеж или список кортежей и символ звезды:

let dataOptions = ("data-options", "{\"valueNames\": [\"name\"]}") :: (Text, Text)
...
<div #the-modal .modal-card .card *{dataOptions} data-toggle="lists">
person Alexandre Lucchesi    schedule 29.10.2019
comment
Я попробую эти Alexandre! Спасибо за ваш ответ. - person bg2000 Reinstate Monica; 16.11.2019
comment
Метод *{dataOptions} сработал! Спасибо!! כֹּל הַכָּבוֹד - person bg2000 Reinstate Monica; 20.12.2019