Question

我正在尝试模板化模板，如下所示：

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

{{{debug this}}}

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

我希望三个括号留在哪里，但是用传入的JSON替换双括号。任何人都知道在不编写后处理JS代码的情况下执行此操作的最佳方法，如果没有，是否有一个好的nodeJS模板这种情况的引擎？

Answer 1

如this Question中所述，手柄不支持更改分隔符。但你可以用这样的反斜杠来逃避双括号：

HTML：

... \{{ myHandlbarsVar }} ...

Answer 2

您可以将分隔符切换为不会与三重胡须相冲突的内容，例如erb样式标记：

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

请注意，您可以在整个模板中多次执行此操作。任何时候遇到冲突的东西，选择一组新的分隔符：）

Answer 3

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

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

e.g。

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

Answer 4

另一个选项是创建一个帮助器来输出大括号。

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}

Answer 5

我只是想要稍微不同的方法。我尝试了其他几种方法，这里有一些我不喜欢的东西：

将Angular默认{{obj.property}}括号更改为其他内容是一个坏主意。主要是因为一旦你开始使用不了解非标准角度配置的第三方组件，那些第三方组件中的绑定将停止工作。另外值得一提的是，AngularJS团队似乎不想采用允许多种绑定表示法的路线，请查看this issue
我非常喜欢Mustache模板，并且由于这个小问题，我不想将整个项目转换为其他模板。
相当多的人建议不要混合使用客户端和服务器端渲染。我不完全同意，我相信如果你正在构建一个多页网站，其中有几个页面有角度和其他一些是静态的（类似于我们或条款和条件页面），使用服务器端模板是完全正常的使这些页面更容易维护。但是，对于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一起使用。您可以做的一项改进是将该方法提取到一个单独的模块中，以便在所有路径中重用。

Answer 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
};

在Mustache模板中转义双括号{{...}}。（在NodeJS中模板化模板）

6 个答案:

在Mustache模板中转义双括号{{...}}。 （在NodeJS中模板化模板）

6 个答案:

在Mustache模板中转义双括号{{...}}。（在NodeJS中模板化模板）