javascript - Jinja - 将元素转换为字符串并调用 JS 函数

Question

我正在使用 Python、Flask 和 Jinja 创建 Web 应用程序。

什么有效:

从Python端，我有一个列表my_list = ["Rome", "Milan", "Bari", "Naples"]，它用于通过Jinja填充渲染到的HTML模板页面客户感兴趣的内容。

<ul>
   {% for n in my_list %}
   <button>{{n}}</button>
   {% endfor %}
</ul>

结果:

<button>Rome</button>
<button>Milan</button>
<button>Bari</button>
<button>Naples</button>

什么不起作用:

我现在想触发一个 JS 函数，该函数应该输出以控制台接收到的字符串参数(例如“Rome”、“Milan”、“Bari”、“Naples”，现在代表包含的名称)通过各种按钮)

<script>
    function foo(parameter) {
         console.log(parameter);
    }
</script>

为了做到这一点，我修改了 Jinja 模板部分，如下所示:

<ul>
    {% for n in my_list %}
    <button onclick="foo({{n}})">{{n}}</button>
    {% endfor %}
</ul>

问题是，当我按下按钮(例如罗马)时，我在 JS 控制台中收到以下错误:

Uncaught ReferenceError: Rome is not defined

当然，我能够理解发生这种情况因为 Rome 没有定义，而且 Rome 不是一个字符串(这是我需要它才能正确进行函数调用) .

所以我的问题是如何将 Rome 转换为 "Rome"？

我有兴趣了解如何将 Jinja 元素转换为 string 数据类型。

我对 Jinja 不太熟悉，非常感谢任何帮助。

Answer 1

Jinja 渲染字符串变量时不带任何引号。所以:

<button onclick="foo({{n}})">{{n}}</button>

变成

<button onclick="foo(Rome)">Rome</button>

...这显然会让 JS 引擎寻找名为 Rome 的变量。

只需在其周围加上自己的引号即可使其成为 JS 中的字符串:

<button onclick="foo('{{n}}')">{{n}}</button>

→

<button onclick="foo('Rome')">Rome</button>