handlebars.js是否用<br>替换换行符？

Question

试图使用handlebars.js进行模板化,但库似乎忽略了换行符.

处理换行符的正确方法是什么？是否应该在模板操作后手动更换？

Answer 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>

Answer 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>

Answer 3

以下是我比目前接受的答案更喜欢的两种方法:

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

Answer 4

只需使用CSS属性white-space并将值设置为pre-line

以标记文件中的示例为例：

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

然后您可以传递包含断行的文本，如下所示

{text: "First line

        Second line"
}

结果看起来像

First line

Second line