javascript - 如何通过 Jinja2 将 Python 列表传递给 JavaScript

Question

假设我有一个 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，或者我应该在循环中一个一个地传递列表中的每个项目？我该怎么做？

Answer 1

要将一些上下文数据传递给 javascript 代码，您必须以 javascript(即 JSON)可以“理解”的方式对其进行序列化。您还需要使用 safe 将其标记为安全。 Jinja 过滤器，防止您的数据被 htmlescaped。

您可以通过执行以下操作来实现:

景色

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 函数)，您需要分别序列化列表中的每个项目。您的代码将如下所示:

景色

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 %}

编辑 2

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

编辑 3(安全警告)

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

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