在Symfony 3.0上使用树枝生成Javascript，而无需与Javascript代码中的{}产生冲突

Question

研究员，我尝试ro生成一种方法，通过使用树枝的path函数，我将能够获取每个ajax调用的url。 我这样做的原因是因为我尝试使用Knockout MVVM和require.js创建单页应用程序，因此我需要Ajax调用，并且需要动态生成URL。

我这样做的方法是创建路线：

  /**
  *@Route("/ajax.js",name="ajax_calls")
  */
  public function ajax_calls(Request $request)
  {
    $response=$this->render('javascript/ajax_calls.js.twig');
    $response->headers->set('Content-Type', 'application/javascript');

    return $response;
  }

然后加载特定模板（javascript / ajax_calls.js.twig）：

/**
*Returns the urls of the calls we need
*/
define([],function($)
{

  return {
    /**
    *Urls for the albums (aka image groups)
    */
    'albums':{
              'get':function()
               {
                return "{{path('user_groups')}}";
               },
               'add':function()
               {
                 return "{{path('group_add')}}";
               }
               'delete':function()
               {
                   return "{{path('group_delete')}}";
               }
               'edit':function()
               {
                 return "{{path('group_update')}}";
               }
              },
    /**
    *Urls for the Images
    */
    'images':{
              'add':function(group_id)
              {
                return "{{path('add_images', group_id='^group_id^')}}".replace("^group_id^",group_id);
              },
              'delete':function()
              {
                return "{{path('delete_images')}}";
              }
             }
  };
});

我使用fefine是因为我希望能够加载require.js，并且如您所见，我尝试生成一个对象，该对象返回单个页面应用程序特定部分的url。

但是以某种方式在线上：

    'albums':{

有冲突，我不知道如何解决。

我得到的具体错误是：

Arguments must be separated by a comma. Unexpected token "punctuation" of value ":" ("punctuation" expected with value ",") in main.js.twig at line 11. 

您知道如何解决此问题，或者以其他方式（通过动态生成网址）将其作为Javascript对象获取吗？

注意：我还看到了使用Twig路径发布在Ajax url参数上的https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/blob/master/Resources/doc/index.md

但这对我如何设计应用程序没有帮助（我使用视图模型，并且希望保持url中尽可能清晰的视图模型并将其加载到外部）。

同样，我将以替代方式毕业。

---

编辑1：

我尝试了：

/**
*Returns the urls of the calls we need
*/
define([],function($)
{

  return {
    /**
    *Urls for the albums (aka image groups)
    */
    'albums': {% verbatim %} { {% endverbatim %}
              'get':function()
{% verbatim %}   { {% endverbatim %}
                return "{{path('user_groups')}}";
               },
               'add':function()
               {% verbatim %} { {% endverbatim %}
                 return "{{path('group_add')}}";
               }
               'delete':function()
               {% verbatim %} { {% endverbatim %}
                   return "{{path('group_delete')}}";
               }
               'edit':function()
               {% verbatim %} { {% endverbatim %}
                 return "{{path('group_update')}}";
               }
              },
    /**
    *Urls for the Images
    */
    'images': {% verbatim %} { {% endverbatim %}
              'add':function(group_id)
              {% verbatim %} { {% endverbatim %}
                return "{{path('add_images', group_id='^group_id^')}}".replace("^group_id^",group_id);
              },
              'delete':function()
              {% verbatim %} { {% endverbatim %}
                return "{{path('delete_images')}}";
              }
             }
  };
});

并返回错误：

Arguments must be separated by a comma. Unexpected token "punctuation" of value ":" ("punctuation" expected with value ",") in main.js.twig at line 11. 

---

EDIT2：

我也收到相同的错误：

{% verbatim %}
/**
*Returns the urls of the calls we need
*/
define([],function($)
{

  return {
    /**
    *Urls for the albums (aka image groups)
    */
    'albums':{
{% endverbatim %}
              'get':function()
               {
                return "{{path('user_groups')}}";
               },
               'add':function()
               {
                 return "{{path('group_add')}}";
               }
               'delete':function()
               {
                   return "{{path('group_delete')}}";
               }
               'edit':function()
               {
                 return "{{path('group_update')}}";
               }
{% verbatim %}
              },
    /**
    *Urls for the Images
    */
    'images':{
{% endverbatim %}
              'add':function(group_id)
              {
                return "{{path('add_images', group_id='^group_id^')}}".replace("^group_id^",group_id);
              },
              'delete':function()
              {
                return "{{path('delete_images')}}";
              }
{% verbatim %}
             }
  };
});
{% endverbatim %}

---

编辑3：

我发现我生成了另一个JavaScript文件。 控制器使用main.js.twig生成它：

requirejs.config({
  baseUrl:'{{asset('')}}',
  paths:{
    'text':'assets/vendor/js/text.min',

    'knockout':["https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min",'assets/vendor/js/knockout.min'],
    'pager':"{{asset('assets/vendor/js/pager.min')}}",
    'jquery':"{{asset('assets/vendor/js/jquery.min')}}",
    'boostrap':"{{asset('assets/vendor/js/bootstrap.min')}}",

    'ajax':"{{path('ajax_calls')|replace('.js':'')}}",

    {% block Viewmodels %}
    {% endblock %}

    'compMessage':'assets/js/components/message',
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager':['knockout'],
    'bootstrap':['jquery'],
    },
  waitSeconds: 200,
});

{% block initFunction %}
{% endblock %}

而产生的问题是一行：

'ajax':"{{path('ajax_calls')|replace('.js':'')}}",

我在这一行中尝试做的是生成一个不带.js的“假” .js文件，以便require.js以.js扩展名加载该文件。

Answer 1

如果这确实是您的代码...您缺少2个逗号，一个在add方法之后，另一个在删除之后 ：

{
    'get': function ()
    {
        return "{{path('user_groups')}}";
    },
    'add': function ()
    {
        return "{{path('group_add')}}";
    },
    'delete': function ()
    {
        return "{{path('group_delete')}}";
    },
    'edit': function ()
    {
        return "{{path('group_update')}}";
    }
}

我认为这根本不是与树枝相关的问题。

Answer 2

我改变了这一行：

'ajax':"{{path('ajax_calls')|replace('.js':'')}}",

有：

'ajax':"{{path('ajax_calls')|trim('.js')}}",

在main.js.twig上，就像魅力一样！