如何更改 Handlebars.js 的默认分隔符？答案

【问题标题】：How to change the default delimiter of Handlebars.js?如何更改 Handlebars.js 的默认分隔符？
【发布时间】：2013-01-14 19:04:04
【问题描述】：

我需要使用handlebars.js，我还使用来自Laravel（PHP 框架）的Blade 模板引擎。标签 {{}} 与完全相同的刀片占位符冲突。

如何将这些 {{var}} 更改为类似的内容？

【问题讨论】：

我做的解决方法是用 JS 正则表达式替换它们。我使用了这段代码-> var templatecontent = $("#template").html().replace(//, '}}'); var template = Handlebars.compile(templatecontent);
但它是一种解决方法，不确定在这里做是否正确。

标签： laravel handlebars.js

【解决方案1】：

我在 GitHub/npm 上创建了 handlebars-delimiters，以便轻松使用带有 Handlebars 的自定义 delim。

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'

compile函数的想法来自https://stackoverflow.com/a/19181804/1267639

欢迎提出改进建议或拉取请求！

【讨论】：

+1 制作真正的库，将它们放在 GitHub 上，我们可以在那里发送 PR 和文件问题，然后在 npm 上发布它们，而不是让人们从 StackOverflow 复制粘贴相同的解决方案。
有 3 个主要的潜在模板执行层 imo。在第一次执行时，基本上是在域/语言上，在服务器交付（旧的 CGI 时间）和客户端中。我分别使用 {% {@ 和 {{。我还使用 {"some text"} 作为 {%__ "some text"%} 的有效简写，这意味着在第一次 exec 时调用 __ 助手来翻译“some text”。所有这些都因此而变得容易。谢谢

【解决方案2】：

虽然您可能无法配置 Handlebars 的表达式分隔符，但这并不是解决 Handlebars 和 Blade 之间冲突的唯一方法。 Blade 提供的语法允许您通过指定应该传递给 Handlebars 的内容来避免冲突。（这是合适的，因为 Blade 一开始就产生了冲突，而且这是必要的，因为 Blade 在 Handlebars 看到它之前就处理了模板。）只需在您希望 Blade 忽略并传递 @ >原样到Handlebars。这是a much larger example的一个非常短的sn-p：

...
    <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}} 将传递给 Handlebars，但 {{ asset("css/bootstrap.theme.3.0.0.css") }} 将由 Blade 处理。

【讨论】：

你说的技巧是在 laravel 4.1 上？请告诉我版本。
漂亮！为我工作！非常感谢！
这应该是公认的答案，这不是一个技巧，而是一个正确的解决方案。
三重花括号呢？目前 Blade 模板不提供 @{{{var}}}
@Christian hmmm 你需要自己转义文本@{{ e($var) }}

【解决方案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+'{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('[',']');

【讨论】：

它似乎不适用于 Handlebars v3.0.3。我根据您的源代码创建了一个新答案，现在可以使用。谢谢！

【解决方案4】：

这对于“标准”车把是不可能的。 https://github.com/wycats/handlebars.js/issues/227

【讨论】：

嗯...好的。那怎么绕过呢？像我的评论一样？
当然，或者将模板完全存储在 HTML 之外，如 GH 建议的那样：github.com/wycats/handlebars.js/issues/227#issuecomment-9950931

【解决方案5】：

有一个选项可以告诉模板引擎不解析代码的某些部分并将其视为纯文本。

找到以下方法，希望对某人有所帮助。

在刀片模板引擎 (laravel) 中，您可以使用 @verbatim 指令。这样您就不必将@ 添加到每个变量。示例：

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim

对于 twig 模板引擎 (symfony) 类似，您可以使用阻止整个代码

{% verbatim %}
    <div>
        My name is {{name}}. I am a {{occupation}}.
    </div>
{% endverbatim %}

【讨论】：

【解决方案6】：

您可以在不使用.blade 扩展名的情况下使用车把模板创建文件，而不是更改分隔符。只需将这些文件包含在您的刀片模板中即可。例如

刀片模板文件 - template.blade.php

@extends('master.template')

@section('content')

    @include('handlebars-templates/some-template-name') 

@stop

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>

【讨论】：

这很好，但我经常想将 Blade 标签放在我的 Handlebars 模板中，但它并不方便。

【解决方案7】：

“如果你需要显示一个用大括号括起来的字符串，你可以通过在你的文本前加上 @ 符号来逃避 Blade 行为”

@{{varname}}

希望对你有帮助！

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
@AnderBiguri：这是一个链接吗？ ;-)
@Stefan 抱歉，审核时它会“自动写入”。关键是，这个答案没有解释。只是给出一个答案，但没有解释为什么或为什么不。
@AnderBiguri：同意。

【解决方案8】：

我使用并更新了 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('[',']');

【讨论】：