如何通过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）“理解”。您还需要使用safeJinja过滤器将其标记为安全，以防止数据被html转义。

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

风景

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漏洞！