Python Bottle：将 python 变量分配给 Javascript 变量

Question

我正在使用Bottle web 框架来呈现网页。我正在使用瓶子模板引擎从 Python 传递变量，然后在嵌入了 Python 代码的模板文件中相应地处理它们。

当我在模板中使用javascript 时，问题就来了。如果我尝试在 javascript 函数中访问我的 Python 变量，则会失败并显示 TypeError: unhashable type: 'list'

我在我的 python 文件中调用我的模板：

list_vals = [['Mushrooms', 3, 5], ['Onions', 1, 4], ['Olives', 1, 5], ['Zucchini', 1, 2]]    
return bottle.template(os.path.join(os.path.dirname(__file__), 'templates', 'pizzaStats.html'), vals=list_vals)

在我的模板文件中，我使用vals 变量当前只是在javascript 中打印，如下所示（仅显示模板的脚本部分）：

<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    %print ({{ vals }})
    var graphdata = {{ vals }}; 
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addColumn('number', 'pieces');
    data.addRows(graphdata);

    // Set chart options
    // to smoothen the lines - 'curveType':'function'
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

即使我将变量的类型从list 更改为dict 类型，它仍然会报错。 TypeError: unhashable type: 'dict' 错误来自 print() 但如果我删除 print() 没有任何反应，也没有绘制图表，这意味着变量没有正确分配。

最终目标是将此变量分配给 javascript 变量，然后该变量将使用 Google API 绘制图形。将 Python 变量分配给瓶子模板内的 javascript 变量的正确方法是什么？谢谢。

Answer 1

我认为问题出在模板方面，当您渲染 vals 参数时。呈现的 vals 必须是有效的 JavaScript 代码。默认情况下，bottle 会自动转义 HTML 特殊字符，其中包括单引号和双引号。因此，当您将 Python list_vals 列表传递给 template 函数时，它会被评估为如下字符串：

"[['Mushrooms', 3, 5], ['Onions', 1, 4], ['Olives', 1, 5], ['Zucchini', 1, 2]]"

并自动被瓶后记这样转义：

[['Mushrooms', 3, 5], ['Onions', 1, 4], ['Olives', 1, 5], ['Zucchini', 1, 2]]

生成无效的 JavaScript 代码。

快速解决方案可能只是disabling the bottle auto-escaping 只需在模板vals 参数中添加一个感叹号：

var graphdata = {{!vals}};