Подтвердить что ты не робот

Использует ли handlebars.js символы новой строки с помощью?

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

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

4b9b3361

Ответ 1

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

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>

Ответ 2

Вставляя три фигурные скобки вместо обычных двух, вы можете указать рулям остановить свои обычные методы ускорения 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 &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>

Ответ 3

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

  • Используйте 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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Для таких, как я, которые следовали коду "Начало работы" и не знали, почему не показывался HTML.

в документации по выражениям рулей говорится

Handlebars HTML-экранирует значения, возвращаемые {{expression}}. Если вы не хотите, чтобы Handlebars экранировали значение, используйте "тройной stash", {{{