如何在 Twig 模板中包含 Handlebars.js？

Question

我同时使用 Twig 和 Handlebars.js，并且遇到了冲突。我找到了两个解决方案。是否认为其中一种比另一种更合适，或者是否存在第三种更合适的解决方案？如果使用我的选项 1，是否有任何推荐的命名标准将车把模板与树枝模板相关联？

选项 1 使用 twig 源

my_twig_template1.html

{% block content %}
<h1>Hello</h1>
<p>{{ someTwigPhpVar }}</p>
{{ source('my_handlebars_template1.html') }}
{% endblock %}

my_handlebars_template1.html

<script id="my-handlebars-item-1" type="text/x-handlebars-template">
    {{someHandleBarVariable}}
</script>

<script id="my-handlebars-item-2" type="text/x-handlebars-template">
    {{someHandleBarVariable}}
</script>

选项 2 使用 twig 逐字记录

my_twig_template2.html

{% block content %}
<h1>Hello</h1>
<p>{{ someTwigPhpVar }}</p>

{% verbatim %}

<script id="my-handlebars-item-1" type="text/x-handlebars-template">
    {{someHandleBarVariable}}
</script>

<script id="my-handlebars-item-2" type="text/x-handlebars-template">
    {{someHandleBarVariable}}
</script>

{% endverbatim %}

{% endblock %}

Answer 1

我不知道是否有普遍的偏好，但对我来说两者看起来都不错。当只有几行 Handlebars 代码时我更喜欢选项 2，而在其他情况下（有大段 Handlebars 代码）我更喜欢选项 1。我会将 Handlebars 文件（选项 1）放入一个名为 的文件夹中handlebars/，这样您就拥有了handlebars/template1.html等。

另一种选择是使用变量表达式来输出变量分隔符（{{和，如有关转义的文档部分}}中所述）或整个 Handlebars 表达式：

{% block content %}
    <h1>Hello</h1>
    <p>{{ someTwigPhpVar }}</p>

    <script id="my-handlebars-item-1" type="text/x-handlebars-template">
        {{ '{{' }} someHandleBarVariable {{ '}}' }}
    </script>

    <script id="my-handlebars-item-2" type="text/x-handlebars-template">
        {{ '{{someHandleBarVariable}}' }}
    </script>
{% endblock %}

如果您只输出几个 Handlebars 变量，这会很方便，因此这比使用单独的文件或使用标签更简洁verbatim。