在不混合 html 和 js 代码的情况下，使用 Jinja2 将列表传递给 javascript 的最佳方法是什么？

Question

我正在使用 Jinja2 制作模板，根据我在其他问题中看到的情况，我可以使用 {{x}} 符号将列表传递给模板。我的问题是，这是否意味着我会在 HTML 模板中包含 Javascript 代码？

据我了解，最好将脚本与 HTML 分开，并在关闭正文标记之前调用脚本。如果我做一些像我首先写的那样的事情，情况就不会是这样了，如下例所示。

<body>
(Other page elements)
<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }}) <-- MyList
</script>
</body>

在这种情况下，我的 html 模板中会有一些 javascript，据我所知这不是最佳选择。我该如何解决？

Answer 1

数据可以通过 AJAX 从端点加载或存储在您的 DOM 中。

如果您希望在应用程序的多个位置使用标记和 window 对象并且不存在污染全局命名空间的问题

<script>
   window.myInitData = {{{myJSdata}}};
</script>

或在 DOM 元素上

<div data-data={{{myJSData}}}></div>

然后你会查询

var data = document.querySelector('yo').dataset.data;
test_func(data);

现在可以肯定地解决您关于 "storing JavaScript code in your HTML" 的问题，除非您正在跟踪或加载外部脚本，否则您不希望像那样嵌入 JavaScript。然而，将数据存储在 DOM 中通常被认为是好的，并且在 data 属性中进行存储的结果是通过您的普通脚本标签加载的脚本将通过查询来访问您的数据.

在不混合 html 和 js 代码的情况下，使用 Jinja2 将列表传递给 javascript 的最佳方法是什么？

What is the best way to pass a list to javascript with Jinja2 without mixing the html and js code?

html

javascript

jinja2