Javascript 在Mustache模板中转义双大括号{{…}。(在NodeJS中模板化模板)

Javascript 在Mustache模板中转义双大括号{{…}。(在NodeJS中模板化模板),javascript,node.js,template-engine,mustache,Javascript,Node.js,Template Engine,Mustache,我正在尝试创建一个模板,如下所示: {{{ { "name" : "{{name}}", "description" : "{{description}}" } }}} {{{debug this}}} {{name} 我想保留三个括号,但用传入的JSON替换两个括号。任何人都知道不编写后处理JS代码的最佳方法,如果不知道,是否有适合此类场景的好的nodeJS模板引擎?您可以将分隔符切换到不会与三重胡须冲突的内容,如erb样式的标记: {{=<% %>=}} {{{

我正在尝试创建一个模板,如下所示:

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

{{{debug this}}}

{{name}


我想保留三个括号,但用传入的JSON替换两个括号。任何人都知道不编写后处理JS代码的最佳方法,如果不知道,是否有适合此类场景的好的nodeJS模板引擎?

您可以将分隔符切换到不会与三重胡须冲突的内容,如erb样式的标记:

{{=<% %>=}}
{{{
{
  "name": "<% name %>",
  "description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>
{{=}
{{{
{
“名称”:“,
“说明”:”
}
}}}
{{{{调试此}}}

请注意,您可以在整个模板中任意多次执行此操作。每当遇到冲突时,请选择一组新的分隔符:)

我发现这是一个很好的解决方案,可以在运行时轻松切换模板设置中的分隔符:

您可以按如下方式进行正则表达式设置:

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
};
<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>
如Handlebar中所述,不支持更改分隔符。但是,您可以使用如下反斜杠来摆脱双大括号:

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
};
<script id="template" type="text/x-handlebars-template">
    {{curly true}}{{name}}{{curly}}
</script>
HTML:


您还可以分配
Mustache.tags=[“[”,“]]”

e、 g


我只是想要稍微不同的方法。我尝试过其他几种方法,以下是我不喜欢的几点:

  • 将角度默认值
    {{obj.property}}
    括号更改为其他括号是个坏主意。主要原因是,一旦您开始使用第三方组件,而您不知道非标准角度配置,这些第三方组件中的绑定将停止工作。同样值得一提的是,AngularJS团队似乎不想走允许多个绑定符号的路线,请检查
  • 我非常喜欢小胡子模板,不想因为这个小问题而把整个项目切换到其他项目
  • 很多人建议不要混合使用客户端和服务器端渲染。我不完全同意,我相信如果你正在建立一个多页面的网站,其中有几个页面是有角度的,还有一些是静态的(比如关于我们或条款和条件的页面),那么使用服务器端模板使维护这些页面变得更容易是非常好的。但也就是说,对于有角度的部分,不应该混合服务器端渲染
  • 好的,不,我的回答是: 如果您使用的是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);
      });
    });
    

    这应该允许您将胡子与AngularJS一起使用。您可以做的一个改进是将该方法提取到一个单独的模块中,以便跨所有路由重用。

    另一个选项是创建用于输出花括号的帮助器

    Handlebars.registerHelper('curly', function(object, open) {
        return open ? '{' : '}';
    });
    
    然后在模板中使用它,如下所示:

    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
    };
    
    <script id="template" type="text/x-handlebars-template">
        {{curly true}}{{name}}{{curly}}
    </script>
    

    你这么做有什么好的理由吗?看起来有点复杂!也许您可以通过其他方式实现它?我正在为javascript框架创建一个CLI构建/脚手架生成器,因此我希望模板成为其中的一部分…您是否看过有助于创建类似模板的模板系统。他也在做类似的事情。希望它能减轻建造这种发电机的痛苦。至于把手,看起来没有改变分隔符的方法,但是根据这个问题,内置了一个转义选项。许多其他系统(小胡子、下划线等)允许更改纤度。在车把中,你可以用反斜杠避开大括号。等等。你想知道车把的事?你把它标记为Mustache和Mustache.js,甚至没有提到车把:)你一定是在开玩笑。你接受了自己的答案,却没有回答@bobthecow完美解决的问题?这在小胡子中不起作用。这个问题是关于胡子的。显然,人们已经发现这个答案很有用,所以我没有投反对票,但想为任何发现这个答案并认为它可能解决他们所有问题的人发表评论。在车把公司为我工作过,我甚至可以做像
    \{{undereded{{data}}}}
    2021这样的事情,这个答案仍然在拯救人们(像我一样),非常感谢!车把文档链接: