如何从外部JS文件设置并更新Twig变量的值？

Twig是服务端模板引擎，变量items是在页面发送到浏览器之前就由服务端处理完成并渲染成静态HTML的。当外部JS在客户端运行时，Twig的处理流程已经结束，页面上不存在所谓的“Twig变量”——只有渲染后的DOM元素。所以你没法直接用JS更新Twig变量，但可以通过以下几种方式实现类似的效果：

方案1：预留DOM容器，用JS动态更新内容 #

把list.twig渲染的内容放在一个带标识的容器里，之后用JS获取新数据，生成对应的HTML替换容器内的内容。

Twig代码调整： #

{% set items = null %}
<div id="list-container">
    {% include "list.twig" with { itemList: items} %}
</div>

外部JS代码示例： #

// 模拟从接口或其他渠道获取新数据
const newItems = [
    {name: "商品A"},
    {name: "商品B"},
    {name: "商品C"}
];

// 生成新的列表HTML结构
let newListHtml = '';
newItems.forEach(item => {
    newListHtml += `<div class="list-item">${item.name}</div>`;
});

// 替换容器内的原有内容
document.getElementById('list-container').innerHTML = newListHtml;

方案2：通过AJAX请求服务端渲染好的Twig片段 #

后端新增一个接口，接收参数后重新渲染list.twig并返回HTML，前端用JS调用该接口，替换页面对应位置的内容。

后端示例（以PHP+Symfony为例）： #

public function refreshList(Request $request)
{
    // 从数据库或其他数据源获取新的items数据
    $newItems = $this->itemService->getLatestItems();
    // 渲染list.twig模板并返回HTML
    $renderedHtml = $this->renderView('list.twig', ['itemList' => $newItems]);
    return new Response($renderedHtml);
}

前端JS代码： #

fetch('/refresh-list')
    .then(response => response.text())
    .then(html => {
        document.getElementById('list-container').innerHTML = html;
    })
    .catch(error => console.error('列表更新失败:', error));

方案3：客户端使用Twig引擎 #

如果项目允许，可以引入twig.js（Twig的客户端实现），把list.twig模板编译后在客户端使用，直接用JS传入新数据渲染。

JS示例： #

// 提前加载并编译list.twig模板
const listTemplate = twig.twig({
    data: `{% for item in itemList %}<div class="list-item">{{ item.name }}</div>{% endfor %}`
});

// 新的items数据
const newItems = [{name: "最新商品1"}, {name: "最新商品2"}];

// 渲染模板并更新DOM
const newHtml = listTemplate.render({itemList: newItems});
document.getElementById('list-container').innerHTML = newHtml;

内容的提问来源于stack exchange，提问作者Zahra Talebi