关于javascript：Mustache模板中的转义大括号{{…}}。 (在NodeJS中模版模板)


Escape double braces {{ … }} in Mustache template. (templating a template in NodeJS)

我正在尝试为模板创建模板，如下所示：

1
2
3
4
5
6
7
8
{{{
{
 "name" :"{{name}}",
 "description" :"{{description}}"
}
}}}

{{{debug this}}}

1
{{name}}

我想在其中保留三括号，但是要用传入的JSON替换双括号。任何人都知道无需编写后处理JS代码即可做到这一点的最佳方法，如果没有，那么是否有一个不错的nodeJS模板这种场景的引擎？

相关讨论

如本问题所述，把手不支持更改定界符。但是您可以使用反斜杠将双括号转义，如下所示：

HTML：

1
... \\{{ myHandlbarsVar }} ...
相关讨论

您可以将定界符切换为与三重胡须不冲突的字符，例如erb样式的标签：

1
2
3
4
5
6
7
8
9
{{=<% %>=}}
{{{
{
 "name":"<% name %>",
 "description":"<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>

请注意，您可以在整个模板中执行任意多次。任何时候遇到冲突时，请选择一组新的定界符：)

相关讨论

您还可以在模板编译之前分配Mustache.tags = ["[[","]]"];。

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

例如

1
2
3
4
5
6
7
    $(function () {
        Mustache.tags = ["[[","]]"];
        var template = $('#test').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, {test:"Chris"});
        $('#content-placeholder').html(rendered);
    });

另一个选项是创建一个用于输出大括号的助手。

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

，然后在模板中使用它，如下所示：

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

然后输出：

1
{Stack Over Flow Rocks}

我只是想要稍微不同的方法。我尝试了其他几种方法，以下是一些我不喜欢的方法：

  • 将Angular默认{{obj.property}}括号更改为其他内容不是一个好主意。主要是因为一旦您开始使用不了解您非标准angular配置的第三方组件，这些第三方组件中的绑定将停止工作。还值得一提的是，AngularJS团队似乎不想走允许多个绑定表示法的路线，请检查此问题
  • 我非常喜欢Mustache模板，并且由于这个小问题，不想将整个项目切换到其他项目。
  • 不少人建议不要混合客户端和服务器端渲染。我完全不同意，我相信如果您要建立一个多页面网站，该页面上只有很少的angular页面而其他页面是静态的(例如关于我们的页面或"条款和条件"页面)，则可以使用服务器端模板来制作使这些页面更容易维护。但这就是说，对于Angular的零件，您不应该混合使用服务器端渲染。

    • 好吧，我的答案是：
    如果使用的是NodeJS和Express，则应遵循以下条件：

    用类似{[{}]}的东西(或完全唯一的东西)替换angular部分中的绑定{{}}

    现在在路由中向您的渲染方法添加回调：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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);
      });
    });

    这应该允许您将髭与AngularJS一起使用。您可以做的一项改进是将该方法提取到一个单独的模块中，以在所有路由之间重用。

    这是我发现的一种很好的解决方案，您可以在运行时的模板设置中轻松切换定界符：

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

    您可以像这样进行RegEx设置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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
    };
    相关讨论