I have a layout that looks like this:
<html>
<body>
<!-- Omitted -->
<div class="content">
{% block body %}{% endblock %}
</div>
<script src="js/vendor.js"></script>
{% block javascripts %}
<!-- I want to be able to inject inline scripts from sub-templates here -->
{% endblock %}
</body>
</html>
Then I have the register_content.html.twig template overridden from FOSUserBundle and in it I am trying to inject script into the "javascripts" block like so:
{% block javascripts %}
<script>
// Some inline JS
</script>
{% endblock %}
The problem I am having is the inline script seems to get injected at the end of the "body" block and not in the "scripts" block.
This is the output I am getting:
<!-- This should be below js/vendor.js scripts -->
<script>
// Some inline JS
</script>
</div>
</div>
<script src="js/vendor.js"></script>
What am I doing wrong? Does my problem lie with FOSUserBundle and it's own templates it inherits from (it still uses my layout and everything I have in it; not it's own layout). I'm very confused here.
P.S. I'm total newbie to Symfony/Twig so please be easy on me.
EDIT: These are the FOSUserBundle layout and templates I have overriden:
app/Resources/FOSUserBundle/views/layout.html.twig:
{% extends 'AcmeWebBundle::layout.html.twig' %}
{% block title %}Acme Demo Application{% endblock %}
{% block body %}
{% block fos_user_content %}{% endblock %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% endblock %}
app/Resources/FOSUserBundle/views/Registration/register.html.twig:
{% extends "FOSUserBundle::layout.html.twig" %}
{% block body %}
{% block fos_user_content %}
{% include "FOSUserBundle:Registration:register_content.html.twig" %}
{% endblock fos_user_content %}
{% endblock %}
{% block javascripts %}
{% parent() %}
{% endblock %}
app/Resources/FOSUserBundle/views/Registration/register_content.html.twig:
<div class="page-header">
<h2>Register</h2>
</div>
<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register form-horizontal">
<!-- HTML Omitted -->
</form>
{% block javascripts %}
{% javascripts '@AcmeWebBundle/Resources/public/js/app.js' %}
<script>
// jQuery is undefined because it gets defined below the 'javascripts' block in the parent layout
console.dir(window.jQuery);
</script>
{% endjavascripts %}
{% endblock %}
After the EDIT the situation is more clear.
The behaviour you expect works with template inheritance only; it won't work with
include, the way you have it inapp/Resources/FOSUserBundle/views/Registration/register.html.twig.To do what you want, do one of the following:
Place the inline JavaScript code from the
javascriptblock ofapp/Resources/FOSUserBundle/views/Registration/register_content.html.twiginside thejavascriptblock ofapp/Resources/FOSUserBundle/views/Registration/register.html.twigLet template
app/Resources/FOSUserBundle/views/Registration/register.html.twiginherit fromapp/Resources/FOSUserBundle/views/Registration/register_content.html.twigand override its blocks as needed (register_content.html.twigdoes not extendlayout.html.twig, so this does not make much sense)