Если не сложно, то хотелось бы разобрать на примерах, заранее благодарен. Jade использую c фреймворком Express на Node.JS.
1 ответ
Просто попробуйте:
my_var = 'test <a href="#">test</a>'
p #{my_var}
p !{my_var}
В первом случае Jade эскейпит html, во втором нет. Т.е. когда вы передаете в шаблон кусок html кода, разметки, то нужно пользоваться !{}, а если это текст, где вы хотите показать отобразить кусок кода (в комментарии кто-то запостил например), тогда #{} отэскейпит html, и на странице будет отображен текст html (в исходнике будут <
и >
).
let $ = q => document.querySelector(q);
$('#result').innerHTML = jade.compile($('#template').innerHTML)({my_var: 'test <a href="#">test</a>'});
<script src="//cdnjs.cloudflare.com/ajax/libs/jade/1.3.1/jade.min.js"></script>
<script type="text/template" id='template'>
p #{my_var}
p !{my_var}
</script>
<div id='result'></div>
UPD Playground
-
@Yura Ivanov, спасибо, за ответ, я уже вроде как понимаю. Служебные символы HTML экранируются спец. наборами символов. Но, чтобы полностью вникнуть, можете объяснить эту строчку кода? В рендер передается массив img_list, а javascript его обрабатывает, зачем в этом случае !{}? script var list = !{JSON.stringify(img_list)}; 5 июл 2013 в 20:04
-
как раз для того, чтоб ничего не менялось. JSON.stringify вам выдаст кучу двойных кавычек, которые jade для #{} бодро заменит на " и вместо var list = [{"src":"img.png"},{"src":"img2.png"}];// !{} получите var list = [{"src":"img.png"},{"src":"img2.png"}]; // #{} ЗЫ примерно тот же смысл имеет фильтр |raw для swig'а. 5 июл 2013 в 20:10
-
Хотя... возможно кавычки в данном случае могут и не экранироваться, однако это не отменяет факта экранирования других символов в самом img_list'е. В любом случае, если вам надо получить неизменной строку, стоит использовать !{}. Даже если ваш json будет содержать html entities, они уже будут экранированы, и дополнительно экранировать их не надо. Что касается #{} - это для пользовательских данных, типа: document.getElementById('user').innerHTML = #{user.name}; Вот тут user.name может содержать любые символы, и на разметку всей страницы они не повлияют. 5 июл 2013 в 21:00
-
А черт, как я сам не смог разобраться, это же так просто оказалось. Огромное Вам спасибо! Плюс ссылка с сервисом дала возможность поэкспериментировать) 5 июл 2013 в 22:54