Заменяет ли handlebars.js символы новой строки на <br>?

Попытка использовать handlebars.js для шаблонов, но библиотека, кажется, игнорирует переводы строки.

Как правильно обращаться с новыми строками? Должны ли они быть заменены вручную после действия шаблона?

Источник

7 ответов

Решение

Это не происходит автоматически, но с помощью функции помощников это может быть достигнуто:

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-экранирует значения, возвращаемые {{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 &lt;p&gt; tags</p>"
    }

результаты в:

    <div class="entry">
      <h1>All About &lt;p&gt; Tags</h1>
      <div class="body">
        <p>This is a post about &lt;p&gt; tags</p>
      </div>
    </div>
Источник

Вот два подхода, которые я предпочитаю перед принятым в настоящее время ответом:

  1. использование white-space: pre-wrap; или же white-space: pre; на элементе, в котором вы хотите сохранить разрывы строк (разрешив или подавив естественную перенос строки соответственно). Если вы хотите, чтобы последовательности пробелов были свернуты, как обычно представлен текст в HTML, используйте white-space: pre-line; но обратите внимание, что IE8 и ниже не поддерживают это. https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  2. Или вот версия помощника шаблона, которая не требует никакого копирования и вставки внешнего кода:

    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

Источник

Просто используйте свойство CSS white-space и установите значение как предварительное.

Например, в вашем файле разметки:

      <p style="white-space: pre-line">
  {{text}}
</p>

Затем вы можете передать текст, содержащий строки разрыва, как показано ниже.

      {text: "First line

        Second line"
}

Результат будет выглядеть

      First line

Second line
Источник

Любое решение, использующее тройные стэки, откроет ваше приложение для атак XSS, если вы не реализуете что-то для очистки HTML.

Я бы предложил использовать <pre> тег, а не создание собственного помощника.

Источник

Я использовал код, опубликованный @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);
});

Это единственный способ заставить это работать.

Источник

For others like me that were following the Getting start code and didn't know why there was no HTML showing up.

in handlebars expressions documentation it states

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{

Источник
Другие вопросы по тегам