Move Javascript assets from a rendered template to the website bottom

[Sergio Moya]

As we know and for performance reasons it is recommended to add our Javascripts at the end of our site.

This is not a problem if the template that we use extending from the base, which contains the block of Javascripts. 

But how do I do if I get the template using the function {% render ... %} from a controller action and this contains links to Javascripts that needs to be processed through the function of twig assetic ( {% Javascripts ... %} ) ??

In Example:

Template1:

 {% extends '::base.html.twig' %}

 

 {% render "AcmeTestBundle:Foo:getBar" %}

...

... 

... 

 

Template2 (Rendered by the controller action):

 

 ...

 ...

{% javascripts filter='?yui_js'

     'js/foo/*' %}

<script src="{{ asset_url }}"></script>

{% endjavascripts %}

 ...

 ...

In Template2, i cant extend or use 'base.html.twig'.

Even try to create a twig extension that adding this to a javascript array to then print at the end of the  'database.html.twig' template but the problem is that I can't get the result of the processing { %Javascripts ... %} function without compiling the AsseticNode node. 

Someone can help me?

Thanks!

 

[Sergio Moya]

I created the following bundle that solves this problem:

http://github.com/smoya/AssetManagementBundle

[theUniC]

Is this for loading javascript files in ajax requests? I think this is an already solved problem. Have you checked out CommonJS and AMD (Asynchronous Javascript Modules) ?

http://requirejs.org

http://requirejs.org/docs/whyamd.html

https://github.com/hearsayit/HearsayRequireJSBundle

Regards,

Christian.

2012/8/27 Sergio Moya <smo...@gmail.com>

[Sergio Moya]

Hola Christian, 

El bundle que he creado tan solo hace uso de assetic packages. Declaras los packages en la config de assetic, y luego mediante la funcionalidad del bundle lo añades a una cola para posteriormente imprimir los tags de inclusión allí donde desees.

Para qué sirve? Si creas un widget que arrastra javascript y requiere de alguna librería o función y ésta no ha sido cargada todavía (por ejemplo: por que las incluyes al final del html renderizado y tu widget está en la cabecera), te permite postponer el renderizado de la inclusión de esos assets hasta que se le indique explícitamente.

[theUniC]

Hola Sergio,

Quizá es que no lo he entendido bien, qué también puede ser ... Es decir, renderizar inclusiones de archivos de javascript en layouts diferentes del base de Symfony2 ? Me da que también lo podrías haber solucionado extendiendo de un layout base distinto. Uno más adaptado a lo que necesitas. Otra opción, cómo ya he dicho, es usar AMD para pasar toda la responsabilidad de la carga de archivos de javascript a requirejs.

Un saludo!

[Sergio Moya]

Hola Christian,

Necesitamos incluir los javascripts al final de nuestro website, ya que es más óptimo como todo el mundo sabe.

Vuelvo a poner el ejemplo que escribí en el readme. 

Si tienes una plantilla base, que contiene el bloque con los javascripts y la plantilla que renderizas extiende de ella no hay problema, los javascripts aparecerán allí donde esté el bloque original.

Pero y si necesitas llamar a un {% render '...' %} y la plantilla renderizada necesita imprimir javascript?  De qué plantilla extiendes para poder incluir esos javascripts al final del código? Imposible extender DE NUEVO de la plantilla base.

Lo de requirejs está muy bien, y es una solución muy buena para crear javascripts basado en módulos, con sus dependencias, etc. Pero seguiriamos teniendo el mismo problema. El código se imprimiría donde se le llama.