将列表传递给瓶子模板，然后在 <script></script> 中使用此列表答案

【问题标题】：Passing a list to a bottle template, then using this list in a <script></script>将列表传递给瓶子模板，然后在 <script></script> 中使用此列表
【发布时间】：2022-01-07 11:24:14
【问题描述】：

我将瓶子用于一个非常简单的单页网站。在我的“/”路线中，我有这样的事情：

@app.route('/')
def index():
   data = [['A', 1], ['B', 2], ['C', 3]]
   return template('index.tpl', data=data)

然后，在我的模板index.tpl 中，我想在位于<head></head> 的脚本中使用这些数据：

<head>
    <script type="text/javascript">
       function doSomething(some_data) {
          return some_data[0];
       }
    
       function myFunc() {
          var test = doSomething({{data}});
          console.log(test);
       }
    </script>
</head>

但是，这行：doSomething({{data}}) 会导致语法错误：',' expected. Declaration or statement expected.

我可以绕过它的唯一方法是添加这样的引号：doSomething('{{data}}')，但它变得完全没用，因为它现在是一个字符串，我必须将它转换回我需要的格式。

我在 StackOverflow 上看到过很多直接在 JS 中使用 {{data}} 而不需要引号的解决方案，所以我不明白为什么它对我不起作用。这是因为我的脚本所在的位置吗？

【问题讨论】：

我认为您在这里可能遇到解构问题。看看这个developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript python templates bottle

【解决方案1】：

在您提供的渲染模板上查看view-source: 或print()：

<head>
    <script type="text/javascript">
       function doSomething(some_data) {
          return some_data[0];
       }
    
       function myFunc() {
          var test = doSomething([[&#039;A&#039;, 1], [&#039;B&#039;, 2], [&#039;C&#039;, 3]]);
          console.log(test);
       }
    </script>
</head>

您可以看到特殊字符不是有效的 JS，虽然我得到的错误与您略有不同 (Uncaught SyntaxError: Unexpected token '&')，但我认为我们在同一页面上足以提供答案。

docs 说：

SimpleTemplate 引擎自动转义 {{bad_html}} 表达式中的 HTML 特殊字符。使用新的 {{!good_html}} 语法来获取旧行为（无转义）。

让我们开始吧：

<head>
    <script type="text/javascript">
       function doSomething(some_data) {
          return some_data[0];
       }
    
       function myFunc() {
          var test = doSomething({{!data}});
          //                       ^ changed
          console.log(test);
       }
    </script>
</head>

现在我们得到一个干净的结果：

<head>
    <script type="text/javascript">
       function doSomething(some_data) {
          return some_data[0];
       }
    
       function myFunc() {
          var test = doSomething([['A', 1], ['B', 2], ['C', 3]]);
          //                       ^ changed
          console.log(test);
       }
    </script>
</head>

为了完整起见，这是我的 Bottle 0.12.19 代码：

from bottle import route, run, template

@route('/')
def index():
   data = [['A', 1], ['B', 2], ['C', 3]]
   print(template('index.tpl', data=data))
   return template('index.tpl', data=data)

run(host='localhost', port=8080)

【讨论】：