使用 Twig 和 Symfony2 在 javascript 中生成路由

Posted 2023-02-22

【中文标题】使用 Twig 和 Symfony2 在 javascript 中生成路由

【英文标题】：Generating routes in javascript with Twig and Symfony2

【发布时间】：2011-11-29 10:04:07

【问题描述】：

很奇怪的问题，很抱歉问，我对 Symfony/Twig 很陌生。我的路线需要一个强制性的region_id 参数：

ajax_provinces_by_region:
  pattern: /ajax/region/region_id/provinces
  defaults: _controller: SWAItaliaInCifreBundle:Ajax:provincesByRegion 
  requirements: region_in: \d+

问题是：如何根据javascript中的select元素生成这条路线（代码如下）？

问题是：我不能使用 Symfony 的 path 和 url 助手，因为它们需要指定 region_id 参数 (this.value) 我无法访问，因为它是一个 javascript 变量（并且 Twig 是在服务器端编译的）。

$(document).ready(function() 
    $('select#regions').change(function()

        // Make an ajax call to get all region provinces
        $.ajax(
            url: // Generate the route using Twig helper
        );

    );
);

【问题讨论】：

如果你不喜欢使用 bundle 可以使用这个技巧：***.com/a/16584335/4008043

【参考方案1】：

您可以使用FOSJsRoutingBundle。

【讨论】：

Routing.generate('route_name')

【参考方案2】：

url:  " path('SampleBundle_route','parameter':controller_value) "

其中SampleBundle_route 是在 routing.yml 或注释中定义的有效路径。

为了测试，在树枝模板中写下这个：

<script>
    var url= " path('SampleBundle_route') ";
    alert(url);
</script>

【参考方案3】：

我知道这是一个老问题，但以防万一你不想安装像 FOSJsRoutingBundle 这样的包，这里有一个小技巧：

var url = ' path("yourroute", 'region_id': 'region_id') '; 
url = url.replace("region_id", this.value);

'region_id' 只是用作占位符，然后你在 JS 中用你的实际变量 this.value 替换它

【讨论】：

这是一个很好的变体，但 FOSJsRoutingBundle 是最好的解决方案。

这会将 url 中的 '&' 字符转义为 &

这是行不通的，因为我的 js 文件在资产文件夹中，它是 src 文件夹的兄弟..

我认为这是最好的解决方案，并且我已经成功使用了一段时间。如果您有路由要求和多个值，则失败的地方。例如，我有一个包含两个变量的路由，并且两个变量都必须是数字（"\d+"），因此对于临时值，我将一个简单的整数添加到每个变量中，然后替换。最终引起我注意的是，真实项目的 id 在第二个 url.replace 上被替换，导致生成无效路径。

【参考方案4】：

 * @Route("/id/edit", name="event_edit", options="expose"=true)

【参考方案5】：

您可以在 html 中使用 data 属性：

<select id="regions">
    % for region in regions %
        <option data-path=" path('ajax_provinces_by_region', 'region_id': region.id) ">...</option>
    % endfor %
</select>

然后在你的javascript中：

$('select#regions').on('change', function() 

    let path = $(this).find(':selected').data('path')

    $.ajax(
        'url': path
    )
)