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

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

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，因此您可以使用 HTML 实体，例如用于大括号的 ASCII 代码 123 和 125：{{{myValue}}}

于 2021-11-08T16:21:57.060 回答
-1

我只是想要稍微不同的方法。我尝试了其他一些方法，这里有一些我不喜欢它们的地方：

  1. 将 Angular 默认{{obj.property}}括号更改为其他内容是个坏主意。主要是因为一旦您开始使用不知道您的非标准角度配置的第三方组件，这些第三方组件中的绑定将停止工作。还值得一提的是，AngularJS 团队似乎不想走允许多个绑定符号的路线，检查这个问题
  2. 我非常喜欢 Mustache 模板，并且不想因为这个小问题而将整个项目切换到其他东西。
  3. 相当多的人建议不要混合客户端和服务器端渲染。我不完全同意，我相信如果您正在构建一个多页网站，其中只有很少的有角度页面和其他一些静态页面（例如关于我们或条款和条件页面），使用服务器端模板制作是完全可以的更容易维护这些页面。但话虽如此，对于 Angular 的部分，您不应该混合服务器端渲染。

好的，不，我的回答：如果你使用的是 NodeJS 和 Express，你应该做到以下几点：

用类似（或完全独特{{}}的东西）替换角部分中的绑定{[{}]}

现在在你的路由中添加一个回调到你的渲染方法：

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 一起使用。您可以做的一项改进是将该方法提取到一个单独的模块中，以便在所有路由中重用。

于 2015-05-17T10:17:40.533 回答
-6

这是我为此类问题找到的一个很好的解决方案，您可以在运行时轻松切换模板设置中的分隔符：

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

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

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 回答