Используйте переменную массива для загрузки javascripts внизу страницы

Я хотел бы использовать своего рода глобальный массив, чтобы определить, какие javascripts должны быть загружены в конце страницы. Таким образом, я могу динамически добавлять файлы 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 %}

Тогда мой код-с-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']) %}

Итак, используя эту настройку, я могу убедиться, что добавляется правильный javascript, когда включается фрагмент html.

Но, это не работает, конечно. Сначала отображается базовый HTML-код, поэтому элемент будет добавлен в массив javascriptList после его отображения. Мой подход должен быть неправильным.

В моем проекте этот многоразовый код на самом деле представляет собой форму с некоторыми дополнительными кнопками, которые вставляют содержимое в текстовое поле (так что крошечный MCE, но гораздо более упрощенный). Я хотел бы повторно использовать этот код на нескольких страницах (создать, обновить).

Любые мысли приветствуются!


symfony twig
person rolandow    schedule 02.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Прежде всего, я рекомендую вам добавить блок 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 %}
person Julien Sanchez    schedule 02.07.2013