如何更改Handlebars.js的默认分隔符?

时间:2013-01-14 19:04:04

标签: laravel handlebars.js

我需要使用handlebars.js,我还使用Laravel的Blade模板引擎(PHP Framework)。标签{{}}与刀片的占位符完全相同。

如何将{{var}}更改为<%var%> ?

8 个答案:

答案 0 :(得分:28)

虽然您可能无法配置Handlebars的表达式分隔符,但这不是解决Handlebars和Blade之间冲突的唯一方法。 Blade提供的语法允许您通过指定应传递给Handlebars的内容来避免冲突。 (这很合适,因为Blade首先创建了冲突,而且这是必要的,因为Blade在Handlebars看到它之前正在处理模板。)只需在你希望Blade忽略并通过的花括号之前加@ as-is 到Handlebars。这是a much larger example的一个非常简短的片段:

...
    <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处理。

答案 1 :(得分:5)

您可以在没有.blade扩展名的情况下使用您的手柄模板创建文件,而不是更改分隔符。只需在刀片模板中包含这些文件即可。 E.g

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

@extends('master.template')

@section('content')

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

@stop

some-template-name File - 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>

答案 2 :(得分:4)

“标准”把手无法做到这一点。 https://github.com/wycats/handlebars.js/issues/227

答案 3 :(得分:4)

我已经完成了这个功能。 希望它对某人有用..

/**
* 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('[',']');

答案 4 :(得分:4)

我在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'

编译功能的想法来自https://stackoverflow.com/a/19181804/1267639

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

答案 5 :(得分:3)

&#34;如果你需要显示一个用花括号包裹的字符串,你可以通过在文本前加上一个@符号&#34;

来逃避Blade行为。
@{{varname}}

希望它有所帮助!

答案 6 :(得分: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('[',']');

答案 7 :(得分:-1)

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

找到以下实现方法,希望对您有所帮助。

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

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

类似于树枝模板引擎(symfony),您可以使用来阻止整个代码

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