在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上，就像魅力一樣！