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变量（尝试没有括号）。在＆＃34; tojson＆＃34;之前的labelsx变量是一个清单：

print type(output_labels)
print output_labels

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

我做错了什么？

编辑：在我看来，它与Passing variables from flask to javascript不同，因为我已经建议了代码，并且根据此处的加入答案，问题是按照定义使用的变量的顺序by .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（chartist）

1 个答案: