使用 Twig 处理动态 Javascript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8180742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Twig for dynamic Javascript files
提问by Roderik
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.
我正在开发一种具有特定功能块的仪表板迷你站点。使用 symfony2，我有一条专用路线 /instagram 可以获取一个 html 片段，该片段显示了在我们场地拍摄的所有图像。
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.
我想每 10 分钟刷新一次这个块，所以我需要在一个带有 setTimeout 的函数中运行以下 javascript，为了清楚起见，我省略了它。
jQuery('.gallery').load("/instagram", function() {
jQuery('.gallery').cycle({
fx: 'fade'
});
});
This code is in "@KunstmaanDashboardBundle/Resources/public/js/instagram.js" that i run through Assetic for concatenation and optimization.
此代码位于“@KunstmaanDashboardBundle/Resources/public/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 %}
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:
这有效，但我不认为这是最佳方法，因为我必须在 load() 函数中对路由进行硬编码。要解决此问题，我需要将 instagram.js 内容移动到 Twig 模板并将其更改为：
jQuery('.gallery').load("{{ path('KunstmaanDashboardBundle_instagram') }}", function() {
jQuery('.gallery').cycle({
fx: 'fade'
});
});
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 的优化和与内容优势的分离。而我们的自定义代码最需要这种优化。
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 Javascript（和 css）与 Twig 解析器结合起来，以便我可以将上面的代码放在 instagram.js 文件中并使其工作:)
回答by Richard Miller
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.
您目前无法使用 Assetic 处理 Twig 模板的输出，因为 Assetic 静态转储资产用于生产，而 Twig 模板在运行时处理。
For this issue you may be able to use the FOSJsRoutingBundleto expose the route and process it client side, then your JavaScript could be processed with Assetic.
对于这个问题，您可以使用FOSJsRoutingBundle来公开路由并在客户端对其进行处理，然后您的 JavaScript 就可以使用 Assetic 进行处理。
回答by egonzal
I have found the solution thanks to this post How to use YUI compressor in Symfony2 routing/controller:
由于这篇文章如何在 Symfony2 路由/控制器中使用 YUI 压缩器，我找到了解决方案：
$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'));
