2011-11-18 4 views
7

Sto lavorando a una sorta di mini sito dashboard con blocchi con una determinata funzionalità. Usando symfony2 ho una route/instagram dedicata che ottiene un frammento html che mostra tutte le immagini scattate nella nostra sede.Utilizzo di Twig per file Javascript dinamici

Voglio aggiornare questo blocco ogni 10 minuti, quindi ho bisogno di eseguire il seguente javascript, in una funzione con un setTimeout, omesso per chiarezza.

jQuery('.gallery').load("/instagram", function() { 
    jQuery('.gallery').cycle({ 
     fx: 'fade' 
    }); 
}); 

Questo codice è in "@ KunstmaanDashboardBundle/Resources// pubblici JS/instagram.js" che ho eseguito attraverso Assetic per la concatenazione e l'ottimizzazione.

{% javascripts 
    '@KunstmaanDashboardBundle/Resources/public/js/thirdparty/jquery-1.7.min.js' 
    '@KunstmaanDashboardBundle/Resources/public/js/thirdparty/jquery.cycle.lite.js' 
    '@KunstmaanDashboardBundle/Resources/public/js/*' 
    filter='closure' 
%} 
    <script src="{{ asset_url }}"></script> 
{% endjavascripts %} 

Questo funziona, ma non mi sento come questo è un approccio ottimale perché devo hardcode il percorso nella funzione load(). Per risolvere questo problema ho bisogno di spostare il contenuto instagram.js al template Twig e modificarla in:

jQuery('.gallery').load("{{ path('KunstmaanDashboardBundle_instagram') }}", function() { 
    jQuery('.gallery').cycle({ 
     fx: 'fade' 
    }); 
}); 

Ma in questo modo perdo l'ottimizzazione e la separazione dai benefici di contenuti di Assetic. E il nostro codice personalizzato è nel maggior bisogno di questo ottimizzazione.

Quindi la mia domanda è: come posso combinare Assetic Javascript (e css per questo) con il parser Twig così posso mettere il codice di cui sopra nel file instagram.js e farlo funzionare :)

risposta

8

È non è attualmente in grado di elaborare l'output dei modelli Twig con Assetic perché Assetic scarica le risorse staticamente per la produzione mentre i modelli Twig vengono elaborati in fase di runtime.

Per questo problema potrebbe essere possibile utilizzare FOSJsRoutingBundle per esporre il percorso ed elaborarlo lato client, quindi il codice JavaScript potrebbe essere elaborato con Assetic.

+0

Questo funziona perfettamente. Grazie! – Roderik

0

ho trovato la soluzione grazie a questo post How to use YUI compressor in Symfony2 routing/controller:

$response = $this->renderView('template.html.twig'); 

    $path = $this->container->getParameter('kernel.root_dir'); 
    $ac = new \Assetic\Asset\StringAsset($response , array(new \Assetic\Filter\Yui\JsCompressorFilter($path . '/Resources/java/yuicompressor-2.4.7.jar'))); 

    $compressJS = $ac->dump(); 
    return new Response($compressJS, 200, array('Content-Type' => 'text/javascript'));