17

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

如何将那些 {{var}} 更改为 <% var %> 之类的东西？

4

8 回答 8

29

尽管您可能无法配置 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}}将传递给 Handlebars，但{{ asset("css/bootstrap.theme.3.0.0.css") }}将由 Blade 处理。

于 2013-12-26T17:12:08.810 回答
8

I created handlebars-delimiters on GitHub / npm to make it easy to use custom delims with Handlebars. 

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

Suggestions for improvement or pull requests are welcome!

于 2014-09-14T13:41:13.553 回答
5

我做了这个功能。希望它对某人有用..

/**
* 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('[',']');
于 2013-10-04T12:58:33.963 回答
5

.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>
于 2013-10-31T12:26:24.990 回答
4

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

于 2013-01-14T19:06:45.150 回答
3

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

@{{varname}}

希望能帮助到你！

于 2014-10-07T11:24:39.910 回答
0

我使用并更新了 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('[',']');
于 2015-07-19T15:49:16.013 回答
-1

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

找到以下方法来做到这一点，希望它对某人有所帮助。

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

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

同样对于树枝模板引擎（symfony），您可以通过使用阻止整个代码

{% verbatim %}
    <div>
        My name is {{name}}. I am a {{occupation}}.
    </div>
{% endverbatim %}
于 2018-06-30T08:14:16.747 回答