通过js修改twig变量无需重新加载页面答案

【问题标题】：Modify twig variable through js without reloading page通过js修改twig变量无需重新加载页面
【发布时间】：2023-01-20 21:54:04
【问题描述】：

我有一个对象数组，它们通过 twig 模板中的 for 循环呈现。我想应用一种类似过滤器的机制，在从过滤器中选择一个类别后，twig 中的元素列表将在不刷新页面的情况下更新，并且仅包含来自所选类别的元素。

到目前为止，我设法通过 ajax 将选定的类别值传递给 Symfony 控制器，解析它，编码为 JS 并将其作为响应发送并通过 ajax 获取它。

这是一些代码：

//variable passed to twig
        return $this->render('@Ad/ad_list.html.twig', [
            'adList' => $adList,
        ]);

//An ajax call
$.ajax({
   url : $form.attr('action'),
   type: "POST",
   data : filters,
   complete: function(html) {
        console.log(html['responseJSON'])
   }
});

//creating a response
$response = JsonResponse::fromJsonString($jsonContent);
$response->prepare($request);
$response->send();

{% for ad in adList|slice(0, 9) %}
    ...
{% endfor %}

是否可以通过 JS 将传递的变量（$adList）更新为 twig，以便从响应中渲染元素？

【问题讨论】：

Twig 模板是在服务器端还是在客户端呈现？
我正在使用 Symfony，所以它是在服务器端呈现的。
所以你不能通过客户端 Javascript 更改它。
您可以从服务器返回预呈现的 HTML 并（重新）将现有的特定 DOM 与新的 HTML 一起放置，而不是返回 JSON
那意味着用更新的参数调用 Symfony 渲染函数，对吧？

标签： javascript php symfony twig

【解决方案1】：

感谢 brombeer 和 DarkBee 的帮助，我实现了我的目标。我是这样做的：

正在创建包含元素列表的新模板，

在主模板中呈现这个新模板并传递更新值

主模板：

<section>
    {% include '@Ad/ad_list_container.html.twig' %}
</section>

ad_list_container 模板：

<div id="ad-list">
   {% for ad in adList %}
       ...
   {% endfor %}
</div>

阿贾克斯调用：

$.ajax({
    url : $form.attr('action'),
    type: "POST",
    data : filters,
    success: function(response) {
        $('#ad-list').html(response);
    }
});

PHP控制器：

return $this->render('@Ad/ad_list_container.html.twig', [
   'adList' => $adList
]);

【讨论】：