blocks|key|719082|text|您可以将分隔符切换为不会与三重八字胡冲突的分隔符，如erb样式的标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|719083|{{=<%25+%25>=}}
{{{
{
++"name":+"<%25+name+%25>",
++"description":+"<%25+description+%25>"
}
}}}
{{{debug+this}}}
<%25={{+}}=%25>|code-block|syntax|javascript|719084|请注意，您可以在整个模板中多次执行此操作。任何时候遇到冲突时，选择一组新的分隔符:)|719085|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can switch delimiters to something that won't conflict with the triple mustaches, like erb-style tags:

<pre><code>{{=&lt;% %&gt;=}}
{{{
{
 "name": "&lt;% name %&gt;",
 "description": "&lt;% description %&gt;"
}
}}}
{{{debug this}}}
&lt;%={{ }}=%&gt;
</code></pre>

Note that you can do this as many times as you like throughout your template. Any time you run into something that conflicts, pick a new set of delimiters :)

blocks|key|719159|text|如this+Question中所述，handlebars不支持更改分隔符。但是你可以像这样用反斜杠转义双花括号：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|719160|HTML：|719161|...+\{{+myHandlbarsVar+}}+...|code-block|syntax|javascript|719162|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/14324850/how-to-change-the-default-delimiter-of-handlebars-js^0|1|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

As described in <a href="https://stackoverflow.com/questions/14324850/how-to-change-the-default-delimiter-of-handlebars-js">this Question</a> handlebars doesn't support changing the delimiters. But you can escape the double braces with a backslash like this:

HTML:

<pre><code>... \{{ myHandlbarsVar }} ...
</code></pre>

blocks|key|4069238|text|您还可以在模板编译之前分配Mustache.tags+=+["[[",+"]]"];。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4069239|http://jsfiddle.net/fhwe4o8k/1/|4069240|例如：|4069241|++++$(function+()+{
++++++++Mustache.tags+=+["[[",+"]]"];
++++++++var+template+=+$('#test').html();
++++++++Mustache.parse(template);
++++++++var+rendered+=+Mustache.render(template,+{test:+"Chris"});
++++++++$('#content-placeholder').html(rendered);
++++});|code-block|syntax|javascript|4069242|entityMap|0|LINK|mutability|MUTABLE|url^0|D|T|0|0|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|G]]]]

You can also assign <code>Mustache.tags = ["[[", "]]"];</code> before your template compilation. 

<a href="http://jsfiddle.net/fhwe4o8k/1/">http://jsfiddle.net/fhwe4o8k/1/</a>

e.g.

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

blocks|key|719294|text|另一个选项是创建一个用于输出大括号的帮助器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|719295|Handlebars.registerHelper('curly',+function(object,+open)+{
++++return+open+?+'{'+:+'}';
});|code-block|syntax|javascript|719296|然后在模板中使用，如下所示：|719297|<script+id="template"+type="text/x-handlebars-template">
++++{{curly+true}}{{name}}{{curly}}
</script>|719298|然后输出：|719299|{Stack+Over+Flow+Rocks}|719300|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

another option is create a helper for outputing curly brackets.

<pre><code>Handlebars.registerHelper('curly', function(object, open) {
 return open ? '{' : '}';
});
</code></pre>

and then use it in the template like this:

<pre><code>&lt;script id="template" type="text/x-handlebars-template"&gt;
 {{curly true}}{{name}}{{curly}}
&lt;/script&gt;
</code></pre>

which then outputs:

<pre><code>{Stack Over Flow Rocks}
</code></pre>

blocks|key|4069417|text|该模板包含超文本标记语言，因此您可以使用超文本标记语言实体，例如用于大括号的ASCII码123和125：{{myValue}|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4069418|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The template contains HTML, so you could use HTML-Entities, for example the ASCII-codes 123 and 125 for braces:
&amp;#123;{{myValue}}&amp;#125;

blocks|key|4069345|text|我只是想要稍有不同的方法。我尝试过其他几种方法，下面是我不喜欢的几个方面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4069346|4069347|将Angular+default+{{obj.property}}括号改为其他值不是一个好主意。主要是因为一旦你开始使用不知道你的非标准角度配置的第三方组件，这些第三方组件中的绑定就会停止工作。还值得一提的是，AngularJS团队似乎不想走允许多个绑定符号的路线，检查this+issue|ordered-list-item|offset|length|style|CODE|4069348|I非常像Mustache模板，也不想因为这个小问题而将整个项目切换到其他地方。|4069349|相当多的人建议不要混合客户端和服务器端渲染。我不完全同意，我相信如果你正在构建一个多页面的网站，它有几个带有angular的页面和一些其他的静态页面(比如关于我们的页面或条款和条件页面)，使用服务器端模板来使维护这些页面变得更容易是非常好的。但也就是说，对于有角度的部件，您不应该混合服务器端渲染。|4069350|4069351|好吧，不，我的答案是:如果你使用NodeJS和Express，你应该做到以下几点：|4069352|将angular部分中的绑定{{}}替换为类似{[{}]}的内容(或完全独特的内容)|4069353|现在，在你的路径中，给你的render方法添加一个回调：|4069354|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);
++});
});|code-block|syntax|javascript|4069355|这应该允许您将Mustache与AngularJS一起使用。您可以做的一个改进是将该方法提取到一个单独的模块中，以便在所有路由上重用。|4069356|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular.js/pull/1256^0|0|0|H|G|3R|A|0|0|0|0|0|0|E|4|N|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1B|8|@$F|1C|G|1D|H|I]]|9|@$F|1E|G|1F|1|1G]]|A|$]]|$1|J|3|K|5|E|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|1I|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1L|8|@$F|1M|G|1N|H|I]|$F|1O|G|1P|H|I]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1R|8|@]|9|@]|A|$X|Y]]|$1|Z|3|10|5|6|7|1S|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]]]

I just wanted slightly different approach. I have tried few other other ways and here are few things which I didn't like about them:

<ol>
<li>Changing Angular default <code>{{obj.property}}</code> brackets to something else is a bad idea. Mainly beacause as soon as you start using third party components which are not aware of you non standard angular configuration, bindings in those third part components will stop working. Also worth mentioning that AngularJS team doesn't seem to want to go the route of allowing multiple binding notations, check <a href="https://github.com/angular/angular.js/pull/1256" rel="nofollow">this issue</a></li>
<li>I quite like Mustache templates and don't want to switch the whole project to something else because of this small issue.</li>
<li>Quite a few people recommend not to mix client and server side rendering. I don't fully agree, I believe if you are building a multipage website which has few pages with angular and some other which are static (something like about us or Terms and Conditions pages) it is perfectly fine to use server side templating to make maintaining those pages easier. But that said, for parts which are Angular you shouldn't mixing server side rendering.</li>
</ol>

Ok no my answer:
If you are using NodeJS and Express you should be to the following:

Replace bindings <code>{{}}</code> in your angular part with something like <code>{[{}]}</code> (or something completely unique)

Now in you route add a callback to you render method:

<pre><code>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);
 });
});
</code></pre>

This should allow you to use Mustache together with AngularJS. One improvement you could do is extract that method into a separate module to reuse across all routes.

blocks|key|4069184|text|这是我为这类问题找到的一个很好的解决方案，您可以在运行时轻松地在模板设置中切换分隔符：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4069185|http://olado.github.com/doT/|offset|length|4069186|您可以像这样进行RegEx设置：|4069187|doT.templateSettings+=+{
++evaluate:++++/\{\{([\s\S]%2B?)\}\}/g,
++interpolate:+/\{\{=([\s\S]%2B?)\}\}/g,
++encode:++++++/\{\{!([\s\S]%2B?)\}\}/g,
++use:+++++++++/\{\{#([\s\S]%2B?)\}\}/g,
++define:++++++/\{\{##\s*([\w\.$]%2B)\s*(\:%7C=)([\s\S]%2B?)#\}\}/g,
++conditional:+/\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
++iterate:+++++/\{\{~\s*(?:\}\}%7C([\s\S]%2B?)\s*\:\s*([\w$]%2B)\s*(?:\:\s*([\w$]%2B))?\s*\}\})/g,
++varname:+'it',
++strip:+true,
++append:+true,
++selfcontained:+false
};|code-block|syntax|javascript|4069188|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

This is a good solution I have found for this type of problem where you can easily switch delimiters in the template settings in runtime:

<a href="http://olado.github.com/doT/" rel="nofollow">http://olado.github.com/doT/</a>

You can do the RegEx settings like this:

<pre><code>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
};
</code></pre>

I'm trying to template a template, like below:

<pre><code>{{{
{
 "name" : "{{name}}",
 "description" : "{{description}}"
}
}}}

{{{debug this}}}
</code></pre>



<pre><code>&lt;h1&gt;{{name}}&lt;/h1&gt;
</code></pre>



Where I want to triple brackets to stay, but double brackets to be replaced with the JSON passed in. Anyone know the best way to do this without writing post-process JS code, and if not, is there a good nodeJS template engine for this type of scenario?

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试创建一个模板，如下所示：{{{{ "name" : "{{name}}", "description" : "{{description}}"}}}}{{{debug this}}}​<h1>{{name}}</h1>​我希望保留三个括号，但双括号要替换为传入的JSON。有人知道不用编写后处理JS代码就能做到这一点的最好方法吗?如果没有，有没有一个好的nodeJS模板引擎来处理这种类

问转义Mustache模板中的双花括号{{ ... }}。(在NodeJS中模板化模板)
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转义Mustache模板中的双花括号{{ ... }}。(在NodeJS中模板化模板)EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转义Mustache模板中的双花括号{{ ... }}。(在NodeJS中模板化模板)
EN