使用烧瓶将变量传递给 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']

我做错了什么？

编辑： 在我看来它与不同，因为我建议的代码已经到位并且按照此处接受的答案，问题出在顺序上稍后定义 .js 使用的变量 - 在那个较旧的问题中没有提到。谢谢！

Answer 1

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

<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>

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

Passing variable to javascript (chartist) with flask

javascript

python

jinja2

flask

chartist.js