如何在 jinja 循环中使用 javascript var答案

【问题标题】：How to use a javascript var in a jinja loop如何在 jinja 循环中使用 javascript var
【发布时间】：2021-07-07 02:22:43
【问题描述】：

在我的 HTML 文件的 javascript 部分中，我需要使用 jinja 循环从烧瓶传递的 JSON。但是，当索引达到已经存在的 javascript var 的值时，我需要中断循环。

var username_selected = $('#username').find(":selected").text();
 {% for user in users if user.username == username_selected -%}
    var key = {{ user.keynumber }};
    $('#originalkey').val(key);
 {% endfor %}

不幸的是，这不起作用，我认为这是因为 jinja 认为 username_selected 是 jinja 的一部分，但它不是。

我尝试使用 JS var 值创建一个 jinja 变量，但没有帮助。

{% set username = namespace(username=username_selected) %}

是否有任何解决方法或者它在物理上是不可能的？

【问题讨论】：

这是完全不可能的，因为 jinja 模板代码在服务器上运行，在生成的 HTML 发送到浏览器之前，并且在浏览器开始运行客户端
请注意，您似乎将 JSON 称为对象或数组，但要将其插入到您的客户端 JS 代码中，您实际上需要将其转换为 JSON（即文本）。
我是这样解决这个问题的：pastebin.com/DrTNku8M

标签： javascript python html flask jinja2

【解决方案1】：

@Chris G 在Pastebin 中给出的代码。确保代码的可用性以供将来使用。

const users = {{ users | tojson | safe }}

$('#username').on('input', function () {
  const username_selected = $('#username').val();
  const user = users.find(user => user.username === username_selected);
  if (user) $('#originalkey').val(user.keynumber);
});

【讨论】：

【解决方案2】：

这是不可能的。 Python代码在服务器上运行，在浏览器中运行js。

【讨论】：

【解决方案3】：

我通过在 jinja 循环中删除 if 条件并将其替换为 javascript if 条件并在满足条件时从函数返回来修复它。

function update_userkey(){
    var username_selected = $('#username').find(":selected").text();
    {% for user in users -%}
    if( "{{user.username}}" == username_selected){
        var key = {{ user.keynumber }};
        $('#originalkey').val(key);
        return;
    }
    {% endfor %}
}

【讨论】：

什么功能？这不是一个合适的解决方案。 SO 应该是一个详尽的常见问题解答，而不是单个解决方法的集合。发现此问题的未来用户可能会在他们自己的项目中使用此代码，并且不良做法会传播。
这是解决我个人提出的问题的解决方案。它只是缺少函数包装器，所以我添加了它。
我没关系这是你个人的问题；只要您将其发布到此处，它就会公开并受 SO 的指导。一个公认的答案应该提供理想的最佳实践解决方案，而不是产生大量重复代码的拼凑解决方案。正确的解决方案是为客户端脚本提供一种访问用户数组并基于 Array.find 搜索填充字段的方法，而不是包含数十个或数百个 if 块的 for 循环。