使用 Twig 处理动态 Javascript 文件

Posted 2023-02-19

【中文标题】使用 Twig 处理动态 Javascript 文件

【英文标题】：Using Twig for dynamic Javascript files

【发布时间】：2012-01-01 02:49:52

【问题描述】：

我正在开发一种带有特定功能块的仪表板迷你网站。使用 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 文件中并使其工作:)

【参考方案1】：

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

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

【参考方案2】：

感谢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'));