Question

我正在尝试将烧瓶中的列表传递到我的JavaScript中，然后在用户按下Enter键时对其进行迭代。例如，我将来自python的列表作为["a","b","c"]发送到呈现的模板中，然后在我的呈现的模板中，我想为第一个元素“ a”将其作为{{ list[0] }}进行访问，并将其显示在div，然后当用户按Enter时，我想将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>

（根据评论添加了|safe。）

Jinja模板化JavaScript变量

1 个答案: