2011-11-18 49 views
7

我正在研究一種具有特定功能塊的儀表板迷你網站。使用symfony2我有一個專門的路線/ instagram,可以獲得一個html片段,顯示我們場地中拍攝的所有圖像。對動態JavaScript文件使用Twig

我想每10分鐘刷新一次這個塊,所以我需要運行下面的javascript,在一個setTimeout函數中,爲了清晰起見省略。

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

此代碼是 「@ KunstmaanDashboardBundle /資源/公/ JS/instagram.js」 我通過Assetic用於級聯和優化運行。

{% 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 %} 

這工作,但我不覺得這是一個最佳的方法,因爲我有硬編碼在load()函數的路線。爲了解決這個問題,我需要移動instagram.js內容樹枝模板,並將其更改爲:

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

但這種方式我失去從Assetic的內容收益的最優化和分離。我們的自定義代碼最需要這種優化。

所以我的問題是,我怎麼能結合Assetic的Javascript(和CSS爲此事)與枝條解析器,所以我可以在instagram.js文件把上面的代碼,並使其工作:)

回答

8

你目前無法使用Assetic處理Twig模板的輸出,因爲Assetic靜態轉儲資產以進行生產,而Twig模板在運行時處理。

對於這個問題,您可能可以使用FOSJsRoutingBundle公開路由並處理它的客戶端,那麼您的JavaScript可以使用Assetic進行處理。

+0

這完美的作品。謝謝! – Roderik

0

我已經找到了解決方案感謝這個帖子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'));