我想使用一种全局数组来定义应该在页面末尾加载哪些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 %}
然后我的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,但更加简单化)。我想在几个页面上重用这个代码(创建,更新)。
欢迎任何想法!
答案 0 :(得分:1)
首先,我建议您在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>
通过继承,您可以在嵌套模板中加载所有脚本后执行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 %}