Javascript 在 Mustache 模板中转义双大括号 {{ ... }}。（在 NodeJS 中制作模板）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13944623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Escape double braces {{ ... }} in Mustache template. (templating a template in NodeJS)
提问by Nick Jonas
I'm trying to template a template, like below:
我正在尝试模板化模板，如下所示：
{{{
{
"name" : "{{name}}",
"description" : "{{description}}"
}
}}}
{{{debug this}}}
<h1>{{name}}</h1>
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?
我想保留三重括号，但用传入的 JSON 替换双括号。任何人都知道在不编写后处理 JS 代码的情况下执行此操作的最佳方法，如果没有，是否有一个很好的 nodeJS 模板引擎用于此场景类型？
回答by tmuecksch
As described in this Questionhandlebars doesn't support changing the delimiters. But you canescape the double braces with a backslash like this:
如本问题中所述，车把不支持更改分隔符。但是你可以用这样的反斜杠来逃避双大括号：
HTML:
HTML：
... \{{ myHandlbarsVar }} ...
回答by bobthecow
You can switch delimiters to something that won't conflict with the triple mustaches, like erb-style tags:
您可以将分隔符切换为不会与三重胡须冲突的内容，例如 erb 样式的标签：
{{=<% %>=}}
{{{
{
"name": "<% name %>",
"description": "<% description %>"
}
}}}
{{{debug this}}}
<%={{ }}=%>
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 :)
请注意，您可以在整个模板中多次执行此操作。任何时候遇到冲突时，请选择一组新的分隔符 :)
回答by Christopher Marshall
You can also assign Mustache.tags = ["[[", "]]"];before your template compilation.
您还可以Mustache.tags = ["[[", "]]"];在模板编译之前进行分配。
http://jsfiddle.net/fhwe4o8k/1/
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);
});
回答by Austin Haws
another option is create a helper for outputing curly brackets.
另一个选项是创建一个用于输出大括号的助手。
Handlebars.registerHelper('curly', function(object, open) {
return open ? '{' : '}';
});
and then use it in the template like this:
然后像这样在模板中使用它：
<script id="template" type="text/x-handlebars-template">
{{curly true}}{{name}}{{curly}}
</script>
which then outputs:
然后输出：
{Stack Over Flow Rocks}
回答by Vitalij
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:
我只是想要稍微不同的方法。我尝试了其他一些方法，这里有一些我不喜欢它们的地方：
- Changing Angular default
{{obj.property}}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 this issue - I quite like Mustache templates and don't want to switch the whole project to something else because of this small issue.
- 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.
- 将 Angular 默认
{{obj.property}}括号更改为其他东西是一个坏主意。主要是因为一旦您开始使用不知道您的非标准角度配置的第三方组件，这些第三方组件中的绑定将停止工作。还值得一提的是，AngularJS 团队似乎不想走允许多个绑定符号的路线，请检查此问题 - 我非常喜欢 Mustache 模板，并且不想因为这个小问题而将整个项目切换到其他东西。
- 不少人建议不要混合客户端和服务器端渲染。我不完全同意，我相信如果您正在构建一个多页网站，其中有几个页面带有角度，而其他一些页面是静态的（例如关于我们或条款和条件页面），那么使用服务器端模板制作是完全没问题的更容易维护这些页面。但这就是说，对于 Angular 的部分，您不应该混合服务器端渲染。
Ok no my answer: If you are using NodeJS and Express you should be to the following:
好吧，我的答案是：如果您使用 NodeJS 和 Express，您应该遵循以下原则：
Replace bindings {{}}in your angular part with something like {[{}]}(or something completely unique)
用{{}}类似{[{}]}（或完全独特的东西）替换角度部分中的绑定
Now in you route add a callback to you render method:
现在在你的路由中添加一个回调到你的渲染方法：
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);
});
});
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.
这应该允许您将 Mustache 与 AngularJS 一起使用。您可以做的一项改进是将该方法提取到一个单独的模块中，以便在所有路由中重复使用。
回答by Nick Jonas
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:
这是我为此类问题找到的一个很好的解决方案，您可以在运行时轻松切换模板设置中的分隔符：
You can do the RegEx settings like this:
您可以像这样进行 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
};
