web-dev-qa-db-ja.com

Moustacheテンプレートの二重中括弧{{...}}をエスケープします。 （NodeJSでテンプレートをテンプレート化）

以下のようなテンプレートをテンプレート化しようとしています：

{{{
{
  "name" : "{{name}}",
  "description" : "{{description}}"
}
}}}

{{{debug this}}}

<h1>{{name}}</h1>

トリプルブラケットを残したいが、渡されたJSONでダブルブラケットを置き換える場合シナリオのタイプ？

javascriptnode.jstemplate-enginemustache
28
Nick Jonas

区切り記号は、erbスタイルのタグなど、トリプルヒゲと競合しないものに切り替えることができます。

{{=<% %>=}}
{{{
{
  "name": "<% name %>",
  "description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>

これは、テンプレート全体で何度でも実行できます。衝突する何かに遭遇したときはいつでも、新しい区切り文字のセットを選択してください:)

43
bobthecow

この質問 で説明されているように、ハンドルバーは区切り文字の変更をサポートしていません。しかし、あなたはcanこのようなバックスラッシュで二重括弧をエスケープすることができます：

HTML：

... \{{ myHandlbarsVar }} ...
68
tmuecksch

テンプレートをコンパイルする前にMustache.tags = ["[[", "]]"];を割り当てることもできます。

http://jsfiddle.net/fhwe4o8k/1/

例えば.

    $(function () {
        Mustache.tags = ["[[", "]]"];
        var template = $('#test').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, {test: "Chris"});
        $('#content-placeholder').html(rendered);
    });
13
Christopher Marshall

別のオプションは、中括弧を出力するためのヘルパーを作成することです。

Handlebars.registerHelper('curly', function(object, open) {
    return open ? '{' : '}';
});

そして、次のようにテンプレートで使用します：

<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>

次に出力します：

{Stack Over Flow Rocks}
6
Austin Haws

ちょっと違うアプローチが欲しかった。私は他のいくつかの方法を試しましたが、ここで私が気に入らなかったことがいくつかあります：

  1. Angular default {{obj.property}}他の何かを括弧で囲むことは悪い考えです。主に、非標準のangular構成を認識していないサードパーティのコンポーネントを使用し始めるとすぐに、これらのサードパーティのコンポーネントのバインディングは機能しなくなります。AngularJSチームは複数のバインディング表記を許可するルートに行きたいようです、 この問題 をチェックしてください
  2. 私はMustacheテンプレートがとても好きで、この小さな問題のためにプロジェクト全体を他のものに切り替えたくありません。
  3. クライアント側とサーバー側のレンダリングを混在させないことを推奨する人はかなりいます。私は完全に同意しません、もしあなたがangularとその他の静的なもの（私たちや利用規約のページのようなもの）のあるページをほとんど持たないマルチページのウェブサイトを構築しているならサーバー側のテンプレートを使用してこれらのページのメンテナンスを簡単にすることはまったく問題ありません。ただし、Angularの部分では、サーバー側のレンダリングを混在させないでください。

いいえ、私の答え：NodeJSとExpressを使用している場合は、次のことを行う必要があります。

バインディングを置換{{}} angularのようなもので{[{}]}（または完全にユニークなもの）

今、あなたのルートでコールバックをrenderメソッドに追加します：

app.get('/', function(req, res){
  res.render('home', {
    title: 'Awesome Website',
    description: 'Uber Awesome Website'
  }, function(err, html){
    var htmlWithReplacedLeftBracket = html.replace(/{\[{/g, '{{');
    var finalHtml = htmlWithReplacedLeftBracket.replace(/}\]}/g, '}}');
    res.send(finalHtml);
  });
});

これにより、MustacheをAngularJSと一緒に使用できるようになります。改善できる方法の1つは、そのメソッドを別のモジュールに抽出して、すべてのルートで再利用することです。

0
Vitalij