Jinja模板化javascript变量[重复]

Question

我正在尝试将烧瓶中的列表传递到我的 javascript 中，然后在用户按下回车键时对其进行迭代。例如，我将 python 中的列表作为["a","b","c"] 发送到呈现的模板中，然后在我的呈现模板中，我想将它作为{{ list[0] }} 访问第一个元素，该元素将是“a”并将其显示在 div 中，然后当用户按下回车键我想将 div 中的文本更改为 {{ list[1] }} 之一，依此类推，直到列表末尾（比如说 {{ list[n] }}

到目前为止，我已经尝试创建一个计数器并在每次用户按 Enter 键时将其递增 1 以切换列表的索引值，但它似乎不起作用。

<script>
    var cont = 0;
    document.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            cont ++;
            document.getElementById("divtochange").innerHTML = '{{ "%s%s%s"|format("list[", cont, "]") }}';

        }
    });
</script>

如果我手动输入{{ list[0] }} 或任何其他索引，我会得到相应的值，但是我希望每次按 Enter 时它都会改变。

Answer 1

模板仅在页面加载时进行评估，因此浏览器此时看到的基本上是静态内容。您需要将动态元素传递给 JavaScript，以便它可以在用户与页面交互时对其进行操作。

我不是 Javascript 程序员，但类似

<script>
    var cont = 0;
    var list = {{list | safe}};
    document.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            cont ++;
            document.getElementById("divtochange").innerHTML = list[cont];
        }
    });
</script>

（基于 cmets 添加了|safe。）