如何将Jinja2循环变量绑定到JavaScript函数？求解决方案

方法一：直接传递JSON化的对象 #

你之前的问题出在给tojson结果加了单引号，导致传递的是字符串而非JS对象。正确的做法是去掉单引号，同时用safe过滤器确保Jinja不转义JSON的引号：

{% for project in projects.items %}
   <tr>
       <!-- 其他列保持不变 -->
       <td>
           <button type="button" id="project-{{ project.id }}" onclick="drawModal(this, {{ project | tojson | safe }})" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#edit-modal">
               Edit
           </button>
       </td>
   </tr>
{% endfor %}

这样project会被转成合法的JS对象，drawModal函数里可以直接访问project.project_id等属性。

方法二：用data属性存储（推荐） #

把数据存到按钮的data属性里，再通过JS事件监听获取，这种方式更符合HTML/JS分离的最佳实践：

HTML部分 #

{% for project in projects.items %}
   <tr>
       <!-- 其他列保持不变 -->
       <td>
           <button type="button" id="project-{{ project.id }}" data-project="{{ project | tojson | safe }}" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#edit-modal">
               Edit
           </button>
       </td>
   </tr>
{% endfor %}

JS部分 #

// 监听所有带data-project属性的按钮点击
document.querySelectorAll('.btn-primary[data-project]').forEach(btn => {
    btn.addEventListener('click', function() {
        // 解析data属性里的JSON字符串为JS对象
        const project = JSON.parse(this.dataset.project);
        // 调用drawModal函数
        drawModal(this, project);
    });
});

为什么之前的尝试无效？ #

• onclick="drawModal.bind(this, '{{ project | tojson }}')"：单引号把JSON字符串包裹成了普通字符串，函数收到的是字符串而非对象，无法直接访问属性。
• onclick="drawModal.bind(this,{{ project | safe }})"：直接输出project的Python对象默认字符串表示，不是合法的JS对象，自然无法识别。

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