Symfony - Ajax and Twig

Question

Я работаю над проектом Symfony2. И теперь хочу добавить некоторые динамические действия. Я хочу использовать вызовы jQuery и Ajax и API.

Ниже я написал свою модель проекта.

Проблема там, где я положил «?» на картинке.

Например, у меня есть комментарии на моей странице и 2 кнопки "oldest" "newest".

В основном на странице загрузите комментарий TWIG на мой взгляд, и все работает нормально. Затем я хочу нажать кнопку, чтобы изменить способ отображения комментариев. Но вы хотите сделать это без перезагрузки страницы. Я нажимаю btn -> запустить JavaScript -> подключить byt AJAX с контроллером API -> вернуть данные из базы данных ... И вот я застрял

У меня есть данные в JSON, но я понятия не имею, как загрузить их в мой вид вместо этого дата, загруженная Twig в начале.

Это серьезная стена на моем пути к динамическим изменениям на веб-странице. Думая о:

• Создание все представление в JavaScript и заменить данные хворостины на представлении с помощью JQuery, как .html() или что-то - но там будет много HTML кода в сценарии JavaScript, не уверен, что это правильно путь

Возможно, вы знаете, как решить эту проблему более элегантным способом?

Answer 1

Это не Twig, а проблема JQuery. Вот пример.

Маршрут:

my_symfony_route: 
    path:  /get-filtered-list 
    defaults: { _controller: "CompanyMyBundle:Comment:getFilteredList" } 
    methods: POST 

Контроллер

public function getFilteredListAction(Request $request) 
{ 
    $param1= $request->request->get('param1'); 
    $param2= $request->request->get('param2'); 

    $result = array(); 
    //Fill $result with DB request 

    return new JsonResponse($result); 
} 

JQuery запрос

$.ajax({ 
    type: 'POST', 
    url: "{{ path('my_symfony_route') }}", 
    data: { param1: 'value', param2: 'value' }, 
    dataType: 'json', 
    success: function (data) { 
     //Handle your JSON data to update the DOM 
     $.each(data, function(index, element) { 
      $('#myDivId').append($('<div>', { 
       text: element.name 
      })); 
     }); 
    } 
});