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 配列に追加されます。私のアプローチは間違っているに違いありません。

私のプロジェクトでは、この再利用可能なコードは、実際にはテキストエリアにコンテンツを挿入するいくつかの追加ボタンを備えたフォームです (tinyMCE ですが、はるかに単純化されています)。このコードを複数のページ (作成、更新) で再利用したいと考えています。

どんな考えでも大歓迎です！

4

1 に答える 1