使用烧瓶将变量传递给javascript（图表）

Question

我有以下几点：

views.py：

   return render_template('test.html',
                           title='Home',
                           labels = output_labels)

test.html:

<script src="{{ url_for('static', filename='js/demo.js') }}"></script>
<script type="text/javascript">
        var labelsx = {{ labels|tojson }};
 </script>

demo.js:

Chartist.Pie('#chartPreferences', {
  labels: ['{{labelsx}}'],
  series: [62, 32, 6]
});

看起来 demo.js 根本无法识别 labelsx 变量（也尝试不使用括号）。 “tojson”之前的labelsx变量是一个列表：

print type(output_labels)
print output_labels

<type 'list'>
[u'string1', u'string2', u'string3']

我做错了什么？

编辑：在我看来，它与Passing variables from flask to javascript 不同，因为我已经建议了代码，并且根据此处接受的答案，问题出在定义 . js 稍后 - 在那个较旧的问题中没有提到。 谢谢！

Answer 1

我认为您需要将 labelsx 的定义移至加载使用它的 JavaScript 之前。

<script type="text/javascript">
  var labelsx = {{ labels|tojson }};
</script>
<script src="{{ url_for('static', filename='js/demo.js') }}"></script>

然后在demo.js中，直接使用变量即可。看起来您将其视为模板中的服务器端变量，但您的 JavaScript 完全被作为模板处理：

Chartist.Pie('#chartPreferences', {
  labels: labelsx,
  series: [62, 32, 6]
});

更新

我个人更喜欢从demo.js 公开一个函数，然后从您的HTML 中调用它。这避免了创建全局变量labelsx。所以，demo.js：

function drawChart(labels) {
  Chartist.Pie('#chartsPreferences', {
    labels: labels,
    series: [62, 32, 6],
  });
}

还有test.html:

<script src="{{ url_for('static', filename=js/demo.js') }}"></script>
<script>
  drawChart({{ labels|tojson }});
</script>