Question

我正在为我的路由使用注释。在我的index.twig模板中，我写了一些像JQuery一样的

 $(document).ready(function(){
    $('#sortable').NestedSortable(
        {
            accept: 'sort',
            noNestingClass: "no-children",
            helperclass: 'helper',
            autoScroll: true,
            onChange: function(serialized) {
            },
            onStop : function(){
                var element_id = $(this).attr("id");
                var parent_id = $(this).parent().attr("id");
                var prev_sibling_id = $(this).prev().attr("id");
 if(prev_sibling_id=='trash'){
    var data = {PID:element_id};
    $.ajax({
        type: "POST",
        data: data,
        url:"{{ path('v2_pm_patentgroups_trash') }}",
        cache: false,
        success: function(data) {
            document.location.reload(true);
        });
}
else if(parent_id=='sortable'){
     var p_sibling = $(this).prev().attr("value");
     if(p_sibling == null){var p_sibling = 0;}
     var n_sibling = $(this).next().attr("value");
     if(n_sibling == null){var n_sibling = 0;}
     var order = (p_sibling + n_sibling)/2;
     var data = {ID:element_id, ORD:order};
       $.ajax({
         type: "POST",
         data: data,
         url:"{{ path('v2_pm_patentgroups_sortgroups') }}",
         cache: false
       });
}

现在你看到当一个组被删除时会调用两个ajax callsone，而当这个组被排序时会调用另一个。

该组是我的twig文件中的li标签

 <li id="{{ portfolio_group.id }}" class="sort group" value={{ portfolio_group.order }}>
    <span class="drag-image groupimage">&nbsp;</span>
    <a class='expand'>{{ portfolio_group.name }}</a>
    <a class="button3" href="{{ path('v2_pm_patentgroups_edit', { 'patentgroupId': portfolio_group.id }) }}" ><span> Edit </span></a> 
            <a class="button3" href="{{ path('v2_pm_patentgroups_delete', { 'patentgroupId': portfolio_group.id }) }}" ><span> Delete </span></a>
    <hr class="separator">
 </li>

任何人都可以告诉我如何从我的JS内部提供url的路径。我不想使用路由文件。

谢谢

Answer 1

当我需要将数据从控制器/视图传递到javascript时，我通常会在相关的HTML标记上设置数据属性。例如，如果我需要一个AJAX请求的路由，我会写：

<a href="#updateTarget" class="ajaxTrigger" data-ajax-route="{{ path('my_ajax_route') }}">click here for ajax</a>

然后使用以下命令访问它：

$('.ajaxTrigger').on('click', function(){
  $.getJSON($(this).data('ajax-route'), function(response) {
    // do something with response
  });
 });

还有一个捆绑包可以使用动态JS路由https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

执行更复杂的操作

修改对于您的特定情况，您可以在组的容器<ul>

上设置路径数据
<ul id="portfolioContainer" data-ajax-trash="{{ path('v2_pm_patentgroups_sortgroups') }}" data-ajax-sort="{{ path('v2_pm_patentgroups_sortgroups') }}">

然后从你的JS文件中引用那些数据属性：

$.ajax({ type: "POST", data: data, url:$('#portfolioContainer').data('ajax-trash'), cache: false, success: function(data) { document.location.reload(true); });

Symfony2路由注释和JavaScript

1 个答案: