Symfony2 Assetic + Twig 模板 JavaScript 继承答案

【问题标题】：Symfony2 Assetic + Twig Template JavaScript InheritanceSymfony2 Assetic + Twig 模板 JavaScript 继承
【发布时间】：2012-02-04 20:34:40
【问题描述】：

我的问题：

我有 3 个模板：

main.html.twig（主布局文件）
layout.html.twig（特定于 bundle 的布局覆盖，其中包含一些特定于 bundle 的 JS 标签）
create.html.twig（页面特定的模板文件，其中还包含一些页面特定的 JS 标签）

我在我的基本布局（main.html.twig）中定义了一个名为“javascript”的块，然后覆盖它（但在layout.html.twig 中调用{{ parent() }}。这工作正常，主模板文件中的 JS 标记是仍然包含在layout.html.twig 模板中。

然后我在create.html.twig 文件中执行相同的操作，覆盖块如下：

{% block javascripts %}
    {{ parent() }}
    {% javascripts '@BundleName/Resources/public/js/application.album.uploader.js'
                   '@BundleName/Resources/public/js/jquery.uploadify.js'
                   '@BundleName/Resources/public/js/swfuploadify.js' filter='?yui_js' %}
         <script src='{{ asset_url }}' type='text/javascript'></script>
    {% endjavascripts %}
{% endblock %}

此时，它不只是覆盖父级 (layout.html.twig) 中的 javascript 块并包含所有在其上方模板中定义的脚本，而是执行以下操作：

在输出中间转储<script> 标记（这会导致错误，因为在我的main.html.twig 文件中，我只在HTML 标记末尾包含了jQuery 库
然后它还会将脚本与其他脚本一起转储（正如我所期望的那样）

我不确定是什么导致脚本被转储到 create.html.twig 模板的中间，而且我也很困惑为什么它们被转储到屏幕两次（一次在创建，然后在底部以及来自main.html.twig 和layout.html.twig 的所有其余脚本一起。

有人有什么想法吗？如果有任何不清楚的地方或者我是否可以提供更多信息，请告诉我。

编辑：

文件内容如下...

main.html.twig：https://gist.github.com/7f29353eaca0947528ce

layout.html.twig：https://gist.github.com/734947e9118b7765715e

create.html.twig：https://gist.github.com/c60c8d5c61e00ff86912

编辑 2：

今天早上我再次查看了这个问题，它看起来好像对样式表做同样的事情。我试图在我的layout.html.twig 中定义一个名为pagescripts 的新块，然后在我的create.html.twig 中使用该块，但这具有相同的结果，它似乎只是在我使用的任何地方转储脚本和样式表

{% block pagescripts %} 
   (scripts here) 
{% endblock}

【问题讨论】：

当脚本标签被转储到页面中间时，它是否也包含{{ parent() }} 输出？
不只是我的create.html.twig 文件中的三个脚本
@KrisWallsmith 有什么我可以尝试 Kris 的想法吗？如果需要，我可以发布有问题的文件内容的精简版本
请发布更多信息，我会调查一下。
@KrisWallsmith 很酷，我稍后会在 github 上发布要归咎于文件的要点

标签： symfony twig assetic

【解决方案1】：

这里是 main.html.twig 的一个例子：

<body>
    {% block stylesheets %}
    {% endblock %}

    {% block jsscript %}
    {% endblock %}

    {% block content %}
    {% endblock %}
</body>

进入你的 create.html.twig

{% extends '::base.html.twig' %}

{% block jsscript %}
    my javascript files...
{% endblock %}

{% block content %}
<h1>Create</h1>

<form action="{{ path('entity_create') }}" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form) }}
    <p>
        <button type="submit">Create</button>
    </p>
</form>

 {% endblock %}

如果还有问题，可以添加文档准备功能：

$(document).ready(function() {
   // put all your jQuery goodness in here.
 });

【讨论】：

不幸的是，jQuery 库确实会加载，但只是稍后才会加载，所以我不想加载库两次......如果我的脚本标签呈现在正确的位置，jquery 库将在任何加载之前加载使用它
jsscript == "javascriptscript"? :)

【解决方案2】：

我发现了问题。在create.html.twig 中，我在{% block content %} 内部定义了{% block javascripts %} 内容，所以我假设Twig 在content 块内部呈现javascripts 块的输出。

将{% block javascripts %} 内容移到{% block content %} 块之外解决了这个问题。

【讨论】：