使用Twig获取动态Javascript文件 [英] Using Twig for dynamic Javascript files

问题描述

我正在开发一种仪表板迷你站点，它具有一定功能的块。使用symfony2我有一个专用的路线/ instagram，它会获得一个html片段，显示在我们场地拍摄的所有图像。

I'm working on a kind of dashboard mini site that has blocks with a certain functionality. Using symfony2 I have a dedicated route /instagram that gets an html fragment that shows all the images taken in our venue.

我想每隔10分钟刷新一次这个块，所以为了清楚起见，我需要在带有setTimeout的函数中运行以下javascript。

I want to refresh this block every 10 minutes, so i need to run the following javascript, in a function with a setTimeout, omitted for clarity.

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

此代码位于我运行的@ KunstmaanDashboardBundle / Resources / public / js / instagram.js中通过Assetic进行连接和优化。

This code is in "@KunstmaanDashboardBundle/Resources/public/js/instagram.js" that i run through Assetic for concatenation and optimization.

{% 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内容移动到Twig模板并将其更改为：

This works, but i don't feel like this is an optimal approach because i have to hardcode the route in the load() function. To fix this i need to move the instagram.js content to the Twig template and change it to:

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

但这样我就失去了优化和分离Assetic的内容优势。我们的自定义代码最需要这种优化。

But this way i lose the optimization and separation from content benefits of Assetic. And our custom code is in the most need of this optimizing.

所以我的问题是，如何将Assetic Javascript（和css）与Twig解析器结合起来所以我可以将上面的代码放在instagram.js文件中并使其工作：）

So my question is, how can i combine Assetic Javascript (and css for that matter) with the Twig parser so i can put the code above in the instagram.js file and make it work :)

推荐答案

您目前无法处理输出使用Assetic的Twig模板，因为Assetic静态转储资产以进行生产，而Twig模板在运行时处理。

You cannot currently process the output of Twig templates with Assetic because Assetic dumps the assets statically for production whereas the Twig templates are processed at runtime.

对于此问题，您可以使用 FOSJsRoutingBundle 公开路线并处理客户端，然后您的JavaScript可以用Assetic处理。

For this issue you may be able to use the FOSJsRoutingBundle to expose the route and process it client side, then your JavaScript could be processed with Assetic.

这篇关于使用Twig获取动态Javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！