傳遞變量的JavaScript（圖表分析）與燒瓶

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不是r完全認可labelsx變量（也可以不使用括號嘗試）。「tojson」之前的labelsx變量是一個列表：

print type(output_labels) 
print output_labels 

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

我在做什麼錯？

編輯：在我看來，這是Passing variables from flask to javascript不同的，因爲我曾在地方建議的代碼已經和按這裏accecpted答案，這個問題是通過定義後名爲.js使用的變量的順序 - 這是在那個老問題中沒有提到。謝謝！

來源

2017-06-16 Pitr

[從燒瓶變量傳遞給JavaScript]的可能的複製（https://stackoverflow.com/questions/37259740/passing-variables-from- flask-to-javascript） – Wombatz

我認爲在加載使用它的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] 
});

UPDATE

我個人更喜歡暴露來自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>

來源

2017-06-16 19:56:51 smarx

太好了，事實證明，我只需在調用'demo.js'之前定義'labelsx'。關於全局變量的建議也很感謝！謝謝。 – Pitr

傳遞變量的JavaScript（圖表分析）與燒瓶

回答

相關問題