Попытка использовать handlebars.js для шаблонов, но библиотека, похоже, игнорирует символы новой строки.
Каков правильный способ работы с новыми символами? Должны ли они быть заменены вручную после действия шаблонов?
Попытка использовать handlebars.js для шаблонов, но библиотека, похоже, игнорирует символы новой строки.
Каков правильный способ работы с новыми символами? Должны ли они быть заменены вручную после действия шаблонов?
Это происходит не автоматически, но с помощью функции помощников это может быть достигнуто:
JS:
Handlebars.registerHelper('breaklines', function(text) {
text = Handlebars.Utils.escapeExpression(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new Handlebars.SafeString(text);
});
HTML-шаблон:
<div>
{{breaklines description}}
</div>
Вставляя три фигурные скобки вместо обычных двух, вы можете указать рулям остановить свои обычные методы ускорения html-выражений, таких как <br>
и <p>
;
Например, с сайта руля:
"Handlebars HTML-escapes значения, возвращаемые {{expression}}
. Если вы не хотите, чтобы Handlebars избегали значения, используйте" triple-stash ", {{{
."
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{{body}}}
</div>
</div>
с этим контекстом:
{
title: "All about <p> Tags",
body: "<p>This is a post about <p> tags</p>"
}
приводит к:
<div class="entry">
<h1>All About <p> Tags</h1>
<div class="body">
<p>This is a post about <p> tags</p>
</div>
</div>
Вот два подхода, которые я предпочитаю по сравнению с принятым в настоящее время ответом:
white-space: pre-wrap;
или white-space: pre;
в элементе, где вы хотите сохранить разрывы строк (разрешая или подавляя естественную линию, соответственно). Если вы хотите, чтобы последовательности пробелов были свернуты, как обычно отображается текст в HTML, используйте white-space: pre-line;
, но обратите внимание, что IE8 и ниже этого не поддерживают. https://developer.mozilla.org/en-US/docs/Web/CSS/white-spaceИли здесь версия помощника шаблона, которая не требует копирования и вставки внешнего кода:
Template.registerHelper('breaklines', function (text) {
text = Blaze._escape(text);
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new Spacebars.SafeString(text);
});
См. https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js для Blaze._escape
Я использовал код, отправленный @Uri, и это было очень полезно.
Но я понял, что когда я регистрирую помощника, параметр функции, который он получает, не является текстом, а функцией, которая вызывается внутри шаблона Handlebars. Поэтому сначала мне пришлось вызвать его, чтобы получить текст.
Чтобы уточнить, я должен был сделать:
Handlebars.registerHelper('breaklines', function(descriptionFunction) {
text = descriptionFunction();
text = Handlebars.Utils.escapeExpression(text);
text = text.toString();
text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
return new Handlebars.SafeString(text);
});
Это единственный способ заставить работу работать.
Любое решение, использующее тройные стачки, откроет ваше приложение для атак XSS, если вы не внедряете что-то для дезинфекции HTML.
Я бы предложил использовать тег <pre>
вместо создания пользовательского помощника.
Для таких, как я, которые следовали коду "Начало работы" и не знали, почему не показывался HTML.
в документации по выражениям рулей говорится
Handlebars HTML-экранирует значения, возвращаемые {{expression}}. Если вы не хотите, чтобы Handlebars экранировали значение, используйте "тройной stash", {{{