如何通过 Jinja2 将列表从 Python 传递到 JavaScript

假设我有一个 Python 变量：

list_of_items = ['1','2','3','4','5']

我通过渲染 HTML 将它传递给 Jinja，并且我在 JavaScript 中还有一个函数，称为somefunction(variable)。我正在尝试通过每一项list_of_items。我尝试过这样的事情：

{% for item in list_of_items %}
<span onclick="somefunction({{item}})">{{item}}</span><br>
{% endfor %}

是否可以将列表从 Python 传递到 JavaScript，还是应该在循环中逐项传递列表中的每个项目？我怎样才能做到这一点？

要将一些上下文数据传递给 javascript 代码，您必须以 javascript （即 JSON）“理解”的方式对其进行序列化。您还需要使用以下命令将其标记为安全safeJinja 过滤器，防止您的数据被 html 转义。

您可以通过执行类似的操作来实现此目的：

The view

import json

@app.route('/')
def my_view():
    data = [1, 'foo']
    return render_template('index.html', data=json.dumps(data))

模板

<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }})
</script>

编辑 - 确切答案

因此，为了准确实现您想要的效果（循环项目列表，并将它们传递给 JavaScript 函数），您需要分别序列化列表中的每个项目。您的代码将如下所示：

The view

import json

@app.route('/')
def my_view():
    data = [1, "foo"]
    return render_template('index.html', data=map(json.dumps, data))

模板

{% for item in data %}
    <span onclick=someFunction({{ item|safe }});>{{ item }}</span>
{% endfor %}

Edit 2

在我的示例中，我使用Flask，我不知道你使用的是什么框架，但你明白了，你只需让它适合你使用的框架即可。

编辑3（安全警告）

切勿对用户提供的数据执行此操作，仅对受信任的数据执行此操作！

否则，您的应用程序将面临 XSS 漏洞！