Symfony 使用数组变量在页面底部加载Java脚本_Symfony_Twig

Symfony 使用数组变量在页面底部加载Java脚本

symfony twig

Symfony 使用数组变量在页面底部加载Java脚本,symfony,twig,Symfony,Twig,我想使用一种全局数组来定义应该在页面末尾加载哪些Java脚本。这样，我可以动态添加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 proje

我想使用一种全局数组来定义应该在页面末尾加载哪些Java脚本。这样，我可以动态添加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>

{%set javascriptList=['js/vendor/jquery-1.10.1.min.js'，'js/vendor/bootstrap.min.js'，'js/main.js']%}
我的项目
{%block container%}
内容在这里
{%endblock%}
{%block javascripts%}
{javascriptList%中js的%s}
{%endfor%}
{%endblock%}

然后我会有一个页面，类似这样：

{% extends base.html.twig %}

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

Bla bla

Code I want to reuse:

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

{%extends base.html.twig%}
{%block container%}
演示
布拉布拉
我要重用的代码：
{%include'代码与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']) %}


一些内容，可能还有一些东西。
{%set javascriptList=javascriptList |合并（['js/tooltip.js']）%}

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

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

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

欢迎有任何想法

首先，我建议您在

base.html.twig

中添加一个javascript块：

加载脚本后，可以在

base.html.twig

中添加块：

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

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

{% endblock %}
</script>

拥有html代码和javascript代码不是一个很好的实践。例如，如果页面中有3个tinyMCE redactor，则将加载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 %}

{%block container%}
内容在这里
{%endblock%}
{%block javascripts%}
{javascriptList%中js的%s}
{%endfor%}
{%endblock%}
{%block afterJavascriptLoad%}
//加载base.html脚本后要执行的代码
{%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 %}

{%extends base.html.twig%}
{%block container%}
演示
布拉布拉
我要重用的代码：
{%include'没有js.html.twig“%”的代码
{%set javascriptList=javascriptList |合并（['js/tooltip.js']）%}
{%endblock%}
{%block afterJavascriptLoad%}
//页面的自定义javascript
{%endblock%}