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

【问题标题】：Generating routes in javascript with Twig and Symfony2使用 Twig 和 Symfony2 在 javascript 中生成路由
【发布时间】：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 可以使用这个技巧：stackoverflow.com/a/16584335/4008043

标签： javascript symfony routes twig

【解决方案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
    })
})

【讨论】：