laravel 如何更改 Handlebars.js 的默认分隔符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14324850/
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
How to change the default delimiter of Handlebars.js?
提问by George D.
I need to use handlebars.js and I also use Blade template engine from Laravel (PHP Framework). The tags {{}} conflict with blade's placeholders that are exactly the same.
我需要使用 handlebars.js 并且我还使用 Laravel（PHP 框架）的 Blade 模板引擎。标签 {{}} 与完全相同的刀片占位符冲突。
How can I change those {{var}} to something like <% var %> ?
如何将这些 {{var}} 更改为 <% var %> 之类的内容？
采纳答案by Matt Ball
This is not possible with "standard" Handlebars. https://github.com/wycats/handlebars.js/issues/227
这对于“标准”车把是不可能的。https://github.com/wycats/handlebars.js/issues/227
回答by iconoclast
Although it may be true that you can't configure Handlebars' expression delimiters, that's not the only way to resolve the conflict between Handlebars and Blade. Blade provides syntax that allows you to avoid the conflict by designating what should be passed on to Handlebars. (This is fitting, since Blade created the conflict to begin with, and it's necessary, since Blade is processing the template before Handlebars ever sees it.) Just prepend @before the curly braces that you want Blade to ignore and pass as-isto Handlebars. Here's a very short snippet of a much larger example:
虽然您可能无法配置 Handlebars 的表达式分隔符，但这并不是解决 Handlebars 和 Blade 之间冲突的唯一方法。Blade 提供的语法允许您通过指定应该传递给 Handlebars 的内容来避免冲突。（这是合适的，因为 Blade 一开始就创建了冲突，而且这是必要的，因为 Blade 在 Handlebars 看到它之前正在处理模板。）只需@在您希望 Blade 忽略的大括号之前加上并按原样传递给 Handlebars . 这是一个更大示例的非常简短的片段：
...
<link
rel="stylesheet"
type="text/css"
href="{{ asset("css/bootstrap.theme.3.0.0.css") }}"
/>
<title>Laravel 4 Chat</title>
</head>
<body>
<script type="text/x-handlebars">
@{{outlet}}
</script>
...
{{outlet}}will be passed to Handlebars, but {{ asset("css/bootstrap.theme.3.0.0.css") }}will be handled by Blade.
{{outlet}}将传递给 Handlebars，但{{ asset("css/bootstrap.theme.3.0.0.css") }}将由 Blade 处理。
回答by biondo
I've made this function. Hope it can be useful for someone..
我做了这个功能。希望它可以对某人有用..
/**
* change the delimiter tags of Handlebars
* @author Francesco Delacqua
* @param string start a single character for the starting delimiter tag
* @param string end a single character for the ending delimiter tag
*/
Handlebars.setDelimiter = function(start,end){
//save a reference to the original compile function
if(!Handlebars.original_compile) Handlebars.original_compile = Handlebars.compile;
Handlebars.compile = function(source){
var s = "\"+start,
e = "\"+end,
RE = new RegExp('('+s+'{2,3})(.*?)('+e+'{2,3})','ig');
replacedSource = source.replace(RE,function(match, startTags, text, endTags, offset, string){
var startRE = new RegExp(s,'ig'), endRE = new RegExp(e,'ig');
startTags = startTags.replace(startRE,'\{');
endTags = endTags.replace(endRE,'\}');
return startTags+text+endTags;
});
return Handlebars.original_compile(replacedSource);
};
};
//EXAMPLE to change the delimiters to [:
Handlebars.setDelimiter('[',']');
回答by ajtrichards
Instead of changing the delimiters you can create files with your handlebars templates in without the .bladeextension. Just include these files in your blade template. E.g
您可以使用不带.blade扩展名的车把模板创建文件，而不是更改分隔符。只需将这些文件包含在您的刀片模板中。例如
Blade Template File - template.blade.php
刀片模板文件 - template.blade.php
@extends('master.template')
@section('content')
@include('handlebars-templates/some-template-name')
@stop
some-template-name File - some-template-name.php
some-template-name 文件 - some-template-name.php
<script type="text/x-handlebars" data-template-name="content">
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</script>
回答by jonschlinkert
I created handlebars-delimiterson GitHub / npm to make it easy to use custom delims with Handlebars.
我在 GitHub / npm 上创建了handlebars-delimiters以方便使用带有 Handlebars 的自定义 delims。
var Handlebars = require('handlebars');
var useDelims = require('handlebars-delimiters');
var a = Handlebars.compile('{{ name }}<%= name %>')({name: 'Jon'});
console.log(a);
//=> 'Jon<%= name %>'
// Pass your instance of Handlebars and define custom delimiters
useDelims(Handlebars, ['<%=', '%>']);
var b = Handlebars.compile('{{ name }}<%= name %>')({name: 'Jon'});
console.log(b);
//=> '{{ name }}Jon'
The idea for the compile function came from https://stackoverflow.com/a/19181804/1267639
compile 函数的想法来自https://stackoverflow.com/a/19181804/1267639
Suggestions for improvement or pull requests are welcome!
欢迎提出改进建议或请求请求！
回答by Jonas
"If you need to display a string that is wrapped in curly braces, you may escape the Blade behavior by prefixing your text with an @ symbol"
“如果您需要显示用花括号括起来的字符串，您可以通过在文本前加上 @ 符号来逃避 Blade 行为”
@{{varname}}
Hope it helps!
希望能帮助到你！
回答by Kevin Campion
I used and updated the source code of user1875109 and now it works with Handlebars v3.0.3:
我使用并更新了 user1875109 的源代码，现在它可以与 Handlebars v3.0.3 一起使用：
/**
* change the delimiter tags of Handlebars
* @author Francesco Delacqua
* @param string start a single character for the starting delimiter tag
* @param string end a single character for the ending delimiter tag
*/
Handlebars.setDelimiter = function(start,end){
//save a reference to the original compile function
if(!Handlebars.original_compile) Handlebars.original_compile = Handlebars.compile;
Handlebars.compile = function(source){
var s = "\"+start,
e = "\"+end,
RE = new RegExp('('+s+')(.*?)('+e+')','ig');
replacedSource = source.replace(RE,function(match, startTags, text, endTags, offset, string){
var startRE = new RegExp(s,'ig'), endRE = new RegExp(e,'ig');
startTags = startTags.replace(startRE,'\{');
endTags = endTags.replace(endRE,'\}');
return startTags+text+endTags;
});
return Handlebars.original_compile(replacedSource);
};
};
//EXAMPLE to change the delimiters to [:
Handlebars.setDelimiter('[',']');
回答by maxwells
There is an option to tell template engine for not parsing certain part of code and treat it as plain text.
有一个选项可以告诉模板引擎不要解析代码的某些部分并将其视为纯文本。
Find the following ways to do it, hope it helps somebody.
找到以下方法来做到这一点，希望它对某人有所帮助。
In blade template engine (laravel) you can use @verbatim Directive. So that you dont have to add @ to every variable. Example :
在刀片模板引擎 (laravel) 中，您可以使用 @verbatim 指令。这样您就不必将@ 添加到每个变量中。例子 ：
@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim
Similarly for twig template engine (symfony) you can block the whole code by using
同样对于树枝模板引擎（symfony），您可以使用
{% verbatim %}
<div>
My name is {{name}}. I am a {{occupation}}.
</div>
{% endverbatim %}
