44

テンプレートに handlebars.js を使用しようとしていますが、ライブラリは改行を無視しているようです。

改行を処理する正しい方法は何ですか? テンプレート操作後に手動で置き換える必要がありますか?

4

6 に答える 6

96

これは自動的には行われませんが、ヘルパー機能を使用するとこれを実現できます。

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>
于 2012-09-12T23:51:23.423 に答える
29

<br>従来の 2 つの中括弧の代わりに 3 つの中括弧を挿入することにより、ハンドルバーに、やなどの html 式をエスケープする通常の手法を停止するように指示できます<p>。

たとえば、ハンドルバーの Web サイトから:

「ハンドルバーは、によって返される値を HTML エスケープします{{expression}}。ハンドルバーに値をエスケープさせたくない場合は、「トリプルスタッシュ」を使用して{{{ください。」

    <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>
于 2013-08-02T21:10:40.183 に答える
12

現在受け入れられている回答よりも私が好む2つのアプローチを次に示します。

  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

于 2015-11-08T13:46:08.647 に答える
2

トリプルスタッシュを使用するソリューションは、HTML をサニタイズする何かを実装しない限り、アプリケーションを XSS 攻撃にさらすことになります。

<pre>カスタム ヘルパーを作成するのではなく、タグを使用することをお勧めします。

于 2015-07-26T14:05:48.827 に答える
1

@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);
});

これが私がそれを機能させる唯一の方法です。

于 2012-11-02T14:56:21.403 に答える
0

私のように、Getting start コードに従っていて、なぜ HTML が表示されないのかわからなかった人のために。

ハンドルバー式のドキュメントでは、 それは述べています

{{expression}} によって返されるハンドルバーの HTML エスケープ値。ハンドルバーに値をエスケープさせたくない場合は、「トリプルスタッシュ」{{{

于 2019-08-20T11:34:16.037 に答える