Функция рендеринга Mustache.js, возвращающая пустую строку для страницы, отображаемой с помощью Chevron
У меня есть следующий код для отображения веб-страницы с использованием шаблонов усов (упрощено для ясности)
<!doctype html>
<html lang = "en" data-theme = "dark">
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"</script>
<link rel = "stylesheet" href = "/static/css/pico.min.css">
</head>
<body>
<main class = "container">
<button type = "submit"
id = "submitBtn"
onclick= "foo();">
Foo
</button>
<script>
function foo() {
var newHTML = Mustache.render("{{food}}", { food: "tacos" });
console.info("newHTML:", newHTML)
}
</script>
</main>
</body>
</html>
Я ожидаю, что значением newHTML будет «tacos», но вместо этого это пустая строка. Я подозреваю, что это как-то связано с тем, что сама страница изначально рендерится из Python с использованием Chevron (я не могу обойти это стороной, это часть большей кодовой базы). Я попытался создать ту же страницу в отдельном файле HTML, и значение newHTML действительно установлено на «tacos».
<!doctype html>
<html>
<head>
<title>Mustache Example</title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js"</script>
</head>
<body>
<h1 id = "heading">{{food}}</h1>
<script>
var newHTML = Mustache.render("{{food}}", { food: "tacos" });
console.info(newHTML)
document.querySelector('#heading').innerHTML = newHTML
</script>
</body>
</html>
Пожалуйста помоги! Только что полдня ходил по кругу с ChatGPT
Я пытался использовать разные версии Mustache.js, используя блок try/catch, упрощая свой код, записывая в консоль все переменные, и проблема все еще не устранена.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваше подозрение, скорее всего, верно: Chevron встречает {{food}} и заменяет его пустой строкой до того, как браузер и Mustache.js смогут это сделать.
Вы можете предотвратить это, временно изменив разделители тегов вокруг частей шаблона, которые должны отображаться на стороне клиента. Chevron больше не будет распознавать {{food}} как тег и не трогать его. Удобно, что он удалит теги-разделители изменений, поэтому клиент их не увидит.
Например, вы можете изменить строку с вашим шаблоном на стороне клиента на это:
var newHTML = Mustache.render("{{=[[ ]]=}}{{food}}[[ = {{ }}=]]", { food: "tacos" });
В этом примере я плотно поместил теги-разделители изменений вокруг {{food}}. Это не обязательно; для Chevron все выглядит как обычный текст, так что теги можно ставить куда угодно. Если есть часть страницы только с клиентскими шаблонами и без тегов, которые должны обрабатываться Chevron, вы можете обернуть весь раздел одной парой тегов-разделителей изменений. Например вот так:
{{=[[ ]]=}}
var newHTML = Mustache.render("{{food}}", { food: "tacos" });
[[ = {{ }}=]]
Опубликуйте минимально воспроизводимый пример с деталями отладки.