1

我想使用一种全局数组来定义应该在页面末尾加载哪些 javascript。这样，我可以动态添加 javascript 文件。

问题是首先呈现基本模板。想象一下这个基本的html：

{% set javascriptList = [ 'js/vendor/jquery-1.10.1.min.js', 'js/vendor/bootstrap.min.js', 'js/main.js' ] %}
<!DOCTYPE html>
<head>
    <title>my project</title>
</head>
<body>

{% block container %}
content goes here
{% endblock %}

{% block javascripts %}
    {% for js in javascriptList %}
        <script src="{{ asset(js) }}"></script>
    {% endfor %}
{% endblock %}

</body>
</html>

然后我会有一个页面，如下所示：

{% extends base.html.twig %}

{% block container %}
<h1>Demo</h1>

Bla bla

Code I want to reuse:

{% include 'code-with-js.html.twig' %}
{% endblock %}

然后我的 code-with-js.html.twig 将是：

<div id="DemoContent">
Some content, with a <a href="#" rel="tooltip">tooltip</a> thingy maybe.
</div>

{% set javascriptList = javascriptList|merge(['js/tooltip.js']) %}

因此，使用此设置，我可以确保在包含 html 片段时添加了正确的 javascript。

但是，这当然行不通。首先渲染基本 html，因此元素将在渲染后添加到 javascriptList 数组中。我的方法一定是错误的。

在我的项目中，这个可重用的代码实际上是一个带有一些额外按钮的表单，这些按钮可以将内容插入到 textarea 中（所以是一个 tinyMCE，但要简单得多）。我想在几个页面上重用这段代码（创建、更新）。

欢迎任何想法！

4

1 回答 1

1

首先我建议你在你的添加一个 javascript 块base.html.twig：

您可以在base.html.twig脚本加载后添加一个块：

{% block javascripts %}
    {% for js in javascriptList %}
        <script src="{{ asset(js) }}"></script>
    {% endfor %}
{% endblock %}

<script type="text/javascript">
{% block afterJavascriptLoad %}

{% endblock %}
</script>

通过继承，您将能够在嵌套模板中的所有脚本加载后执行 javascript：

{% extends base.html.twig %}

{% block afterJavascriptLoad %}
    //Your code to be executed after base.html script load
{% endblock %}

拥有 html 代码和 javascript 代码并不是一个很好的做法。例如，如果您的页面中有 3 个 tinyMCE 编辑器，您将加载 3 次 tinyMCE。

对我来说，最好的方法是让你的模板像这样：

base.html.twig：

{% block container %}
content goes here
{% endblock %}

{% block javascripts %}
    {% for js in javascriptList %}
        <script src="{{ asset(js) }}"></script>
    {% endfor %}
{% endblock %}

{% block afterJavascriptLoad %}
    //Your code to be executed after base.html script load
{% endblock %}

pageWithTinyMCE.html.twig：

{% extends base.html.twig %}

{% block container %}
    <h1>Demo</h1>

    Bla bla

    Code I want to reuse:

    {% include 'code-without-js.html.twig' %}
    {% set javascriptList = javascriptList|merge(['js/tooltip.js']) %}
{% endblock %}

{% block afterJavascriptLoad %}
     //Custom javascript for the page
{% endblock %}
于 2013-07-02T15:53:18.030 回答