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函数，该函数应该输出以控制台接收到的字符串parameter（例如，“ 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控制台中收到以下错误：

  

未捕获的ReferenceError：未定义罗马

我当然能够理解这是发生在，因为未定义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>