使用 Twig 处理动态 Javascript 文件

Question

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

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

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

这段代码位于“@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 %}

这可行，但我不认为这是最佳方法，因为我必须在 load() 函数中对路线进行硬编码。为了解决这个问题，我需要将 instagram.js 内容移动到 Twig 模板并将其更改为：

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

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

所以我的问题是，如何将 Assetic Javascript（以及与此相关的 css）与 Twig 解析器结合起来，以便我可以将上面的代码放入 instagram.js 文件中并使其工作:)

Answer 1

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

对于这个问题，您可以使用 FOSJsRoutingBundle 公开路由并在客户端处理它，然后您的 JavaScript 可以使用资产。

Answer 2

感谢这篇文章，我找到了解决方案 如何使用 YUI 压缩器在 Symfony2 路由/控制器中：

    $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'));