Йесод Гамлет разбивает HTML, заменяя одинарные кавычки на двойные - PullRequest
Новая
       42

Йесод Гамлет разбивает HTML, заменяя одинарные кавычки на двойные

0 голосов
/ 12 октября 2019

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

 <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

И в файле Гамлета: 

 <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

1 Ответ

0 голосов
/ 29 октября 2019

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

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

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

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