Passing Variable Javascript (chartist) mit Kolben

Question

I haben die folgenden:

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] 
}); 

Es sieht so aus, dass demo.js nicht r ist die labelsx-Variable überhaupt erkennen (auch ohne Klammern). Die labelsx-Variable vor "tojson" ist eine Liste:

print type(output_labels) 
print output_labels 

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

Was mache ich falsch?

EDIT: Meiner Meinung nach ist es anders zu Passing variables from flask to javascript da ich Code bereits an Ort und Stelle vorgeschlagen hatte und wie pro accecpted Antwort hier, das Problem war in der Reihenfolge der Variable zu definieren, später von Js verwendet - das ist, in dieser älteren Frage nicht erwähnt. Danke!

Answer 1

Ich denke, Sie müssen Ihre Definition von labelsx verschieben, bevor Sie das JavaScript laden, die es verwendet.

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

Und dann in demo.js, müssen Sie einfach direkt die Variable verwenden. Es scheint, wie sind Sie es wie eine serverseitige Variable in einer Vorlage zu behandeln, aber sie JavaScript als Vorlage wird überhaupt verarbeitet:

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

UPDATE

Ich persönlich würde es vorziehen, zu belichten eine Funktion aus demo.js und dann rufen Sie es aus Ihrem HTML. Dadurch wird vermieden, dass die globale Variable labelsx erstellt wird. Also, demo.js:

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

Und test.html:

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