36

以下のように、テンプレートをテンプレート化しようとしています。

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

{{{debug this}}}


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

トリプルブラケットを残したいが、ダブルブラケットを渡されたJSONに置き換える場合。後処理JSコードを記述せずにこれを行うための最良の方法は誰でも知っています。そうでない場合は、このための優れたnodeJSテンプレートエンジンがあります。シナリオの種類は？

4

7 に答える 7

75

この質問で説明されているように、ハンドルバーは区切り文字の変更をサポートしていません。ただし、次のように円記号を使用して二重中括弧をエスケープできます。

HTML：

... \{{ myHandlbarsVar }} ...
于 2013-12-13T16:01:30.170 に答える
52

区切り文字を、erbスタイルのタグのようにトリプルヒゲと競合しないものに切り替えることができます。

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

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

于 2012-12-19T08:33:53.567 に答える
14

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);
    });
于 2015-02-10T20:54:59.410 に答える
8

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

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}
于 2015-10-26T20:37:21.987 に答える
0

テンプレートにはHTMLが含まれているため、中かっこにはASCIIコード123および125などのHTMLエンティティを使用できます。＆＃123; {{myValue}}＆＃125;

于 2021-11-08T16:21:57.060 に答える
-1

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

  1. Angularのデフォルト{{obj.property}}のブラケットを別のものに変更することは悪い考えです。主に、非標準の角度構成を認識していないサードパーティコンポーネントの使用を開始するとすぐに、それらのサードパーティコンポーネントのバインディングが機能しなくなります。また、AngularJSチームは、複数のバインディング表記を許可するルートを望んでいないようです。この問題を確認してください。
  2. 私はMustacheテンプレートがとても好きで、この小さな問題のためにプロジェクト全体を別のものに切り替えたくありません。
  3. かなりの数の人が、クライアント側とサーバー側のレンダリングを混在させないことを推奨しています。私は完全には同意しません。角度のあるページがほとんどなく、静的なページ（私たちや利用規約のページなど）がいくつかある複数ページのWebサイトを構築している場合は、サーバー側のテンプレートを使用して作成するのはまったく問題ありません。それらのページをより簡単に維持します。ただし、Angularのパーツについては、サーバー側のレンダリングを混在させないでください。

私の答えはわかりません。NodeJSとExpressを使用している場合は、次のようにする必要があります。

{{}}角のある部分のバインディングを次のようなもの{[{}]}（または完全にユニークなもの）に置き換えます

次に、ルーティングで、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つは、そのメソッドを別のモジュールに抽出して、すべてのルートで再利用することです。

于 2015-05-17T10:17:40.533 に答える
-6

これは、実行時にテンプレート設定で区切り文字を簡単に切り替えることができるこのタイプの問題に対して私が見つけた良い解決策です。

http://olado.github.com/doT/

次のように正規表現設定を行うことができます。

doT.templateSettings = {
  evaluate:    /\{\{([\s\S]+?)\}\}/g,
  interpolate: /\{\{=([\s\S]+?)\}\}/g,
  encode:      /\{\{!([\s\S]+?)\}\}/g,
  use:         /\{\{#([\s\S]+?)\}\}/g,
  define:      /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  iterate:     /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  varname: 'it',
  strip: true,
  append: true,
  selfcontained: false
};
于 2012-12-24T20:33:21.770 に答える