Passe variable javascript (chartist) avec ballon

Question

Je le suivant:

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

On dirait que demo.js n'est pas reconnaître la variable labelsx du tout (essayé aussi sans parenthèses). La variable labelsx avant "tojson" est une liste:

print type(output_labels) 
print output_labels 

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

Qu'est-ce que je fais mal?

EDIT: À mon avis, il est différent de Passing variables from flask to javascript depuis que je l'avais suggéré le code déjà en place et que par réponse accecpted ici, le problème était de l'ordre de la définition de la variable utilisée par .js sur - ce qui est pas mentionné dans cette question plus ancienne. Merci!

Answer 1

Je pense que vous devez déplacer votre définition de labelsx avant de charger le JavaScript qui l'utilise.

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

Et puis dans demo.js, il vous suffit d'utiliser directement la variable. Il semble que vous traitez comme une variable côté serveur dans un modèle, mais votre JavaScript est en cours de traitement comme modèle à tous:

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

MISE À JOUR

Personnellement, je préférerais exposer une fonction de demo.js, puis l'appeler à partir de votre code HTML. Cela évite de créer la variable globale labelsx. Ainsi, demo.js:

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

Et test.html:

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