2017-01-26 2 views
0

Ich baue eine Flasche App und ich muss eine Variable auf dem Python-Back-End zu Javascript am Front-End übergeben, um bestimmte Parameter zu verfolgen. Allerdings habe ich ein seltsames Codierungsproblem. Im Folgenden finden Sie ein Beispiel, in dem das Python-Back-End, das gerenderte Jinja2-Vorlagen-Frontend und der Fehler in der Chrome-Konsole dargestellt werden.flask: Fehler beim Übergeben von Variablen an Javascript

app.py:

@app.route('/') 
def send_name(): 
    name = ["Michael"] 
    return render_template('index.html', name=name) 

index.html:

<html> 
    <script> 
     console.log('{{ name }}') 
    </script> 
</html> 

Wenn ich die Konsole zu öffnen, sehe ich folgendes:

[&#39;Michael&#39;] 

Die Ampersand # 39 ist die ASCII Zeichencodierung für einen Apostroph. Wenn ich die Apostrophe (einfache Anführungszeichen) aus der console.log Aussage über (die wie console.log({{ name }}) aussieht) auslassen bekomme ich folgende Fehlermeldung:

Uncaught SyntaxError: Unexpected token &

Das Merkwürdigste ist, wenn ich die Variable überall außerhalb der <script> Tags zu drucken funktioniert gut.

Irgendeine Idee, was das Problem ist und wie kann ich es beheben?

Antwort

1

wenn Sie eine gültige JSON Objekt/Liste nehmen wollen und verwenden Sie es in JavaScript verwenden, die tojson Filter in Jinja, wie folgt aus:

console.log({{ name|tojson }}); 

der tojson Filter auch den Wert als safe markiert es so deaktivieren Sie die automatische entkommt.

+0

'name' ist eine Liste, kein Wörterbuch. Warum dürfen wir den JSON Filter benutzen? und das funktioniert für meine, ob ich 'tojson',' safe' oder beides benutze, danke! ist es besser, das eine oder andere oder beide zu verwenden? basierend auf den jinja2 docs scheint es 'sicher' in' tojson' eingebaut zu sein –

+1

ja ... ich denke, das könnte eine neue zusätzliche sein, nachdem ich diesen Trick gelernt habe;) technisch eine Liste ist gültig JSON, wenn auch nicht normalerweise, wie wir darüber nachdenken es. froh, dass das geholfen hat. wird die Antwort basierend auf nur 'tojson' aktualisieren – abigperson

Verwandte Themen