Include and extend don't work as expected, only in one specific case each

[adam-lynch]

I've only tested this with two templates, one including/extending the other.

What works

If the templates are ordered as parent then child (include) and the function passed into Twig.render() is the name given to the child (include) template.

<script type="text/javascript">
            $(document).ready(function(){
                {% javascripts  
                    "@TemplateDemoBundle/Resources/views/Default/template_for_js.html.twig"
                    "@TemplateDemoBundle/Resources/views/Default/include.html.twig"
                    filter="twig_js" %}
                    var jstemplate = "{{asset_url}}";
                {% endjavascripts %}

                $('.render').on('click', function() {
                    $.get(jstemplate, function(data){  
                        $("body").append(Twig.render(include, {name: "Johannes"}));
                    });
                });
            });
        </script>

What doesn't work

Referencing the files in the opposite (logical*) order, despite the choice of function passed to Twig.render().

From the compiled JS template:

500 | Internal Server Error | Twig_Error_Loader
[message] Unable to find template "include.html.twig" in "Resources/views/Default/template_for_js.html.twig".
..........
.....
..

* to me at least

Passing Twig.render() the name of the parent, despite the order

From the console:

Uncaught ReferenceError: greeting is not defined

(greeting is the name given to the parent template and the function passed into Twig.render())

Extends

It's a similar story for extends but the opposite way around. The child (which extends the parent) should be referenced first, then the child and the name given to the parent template must be passed to Twig.render().

[adam-lynch]

It looks like the Assetic filter isn't doing what I expected. I expected it to compile all the specified templates into one JS template somehow and store the URL to reference it all in asset_url. This is why I assumed I'd have to pass the parent template name to Twig.render() when using the include example.

What actually happens is this:

From my computed source:

<script type="text/javascript">
            $(document).ready(function(){
                console.log("jq loaded; dom ready");
                                    var jstemplate = "/symfony/web/app_dev.php/js/7d38e97_include.html_1.js";
                                    var jstemplate = "/symfony/web/app_dev.php/js/7d38e97_template_for_js.html_2.js";

                $('.render').on('click', function() {
                    $.get(jstemplate, function(data){  
                        console.log("got the compiled JS template via AJAX");
                        console.debug(data);
                        $("body").append(Twig.render(greeting, {day: "Johannes"}));
                    });
                });
            });
        </script>

What's specified between Assetic 'javascripts' tags happens for each template referenced, not just once.

Further investigation needs to be done to see what happens when there's a larger tree structure to the templates (a few levels, siblings, children and grandchildren) and which function needs to be passed to Twig.render() then