Wie kann ich eine JS-Vorlage aus einer gerenderten HTML-Vorlage rendern?

Wenn ich über Jinja2 JavaScript-Code generieren möchte und nicht nur HTML, bleibe ich dabei, den JS-Code inline zu halten, oder gibt es eine Möglichkeit für mich, auf das Skript zu verweisen?Wie kann ich eine JS-Vorlage aus einer gerenderten HTML-Vorlage rendern?

Konkret:

app.py

from flask import Flask, render_template 
app = Flask(__name__) 
app.config['DEBUG'] = True 

@app.route('/') 
def index(): 
    return render_template('index.html', name='Sebastian', color='pink') 

if __name__ == '__main__': 
    app.run()

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta content="utf-8" http-equiv="encoding"> 
     <script> 
      function myEnterFunction() { 
       element = document.getElementById("demo"); 
       element.style.backgroundColor = "{{ color }}"; 
      } 
     </script> 
    </head> 
    <body> 
     <p>Hello {{ name }}</p> 
     <div onmouseenter="myEnterFunction()"> 
      <p>onmouseenter: 
       <span id="demo">Mouse over me!</span> 
      </p> 
     </div> 
    </body> 
</html>

Dies funktioniert gut, wenn der JavaScript-Code ist inlined, aber was, wenn wir würden gerne sauber bleiben und eine separate Datei referenzieren?

<head> 
    <meta content="utf-8" http-equiv="encoding"> 
    <script src="code.js"></script> 
</head>

Möglicherweise kann dies durch src="code.js" ersetzt mit

{% render_template('code.js', color=color) %}

getan werden kann, sehen Sie, wie Sie eine JS-Vorlage zu machen, während Sie eine HTML-Vorlage rendern?

Quelle

2016-07-11 Calaf

Mögliche Duplikate von [Verwenden Sie Jinja2 Vorlage-Engine in externen Javascript-Datei] (http://stackoverflow.com/questions/21956500/use-jinja2-template-engine-in-external-javascript-file) –

Sie haben Recht . Die Frage ist ähnlich. Aber die bevorzugte Antwort dort ist nicht geeignet, weil die Frage übermäßig einfach ist. Auch hier ist der Code zur besseren Übersichtlichkeit vereinfacht. Der Grund, warum die alternative Antwort dort "* ist wahrscheinlich keine sehr gute Idee *" ist nicht angegeben (noch klar für mich). Die Antwort hier ist genau richtig. – Calaf

Sie können eine Route hinzufügen, die JS generiert.

function myEnterFunction() { 
       element = document.getElementById("demo"); 
       element.style.backgroundColor = "{{ color }}"; 
      }

Und in Ihrem layout.html:

<script src="{{url_for('script')}}"></script>

Jinja2 wird analysieren jede

@app.route('/script.js') 
def script(): 
    return render_template('script.js', color='pink')

Und in script.js, diese im selben Ordner wie die anderen Vorlagen sein sollte Dateien, die ihre Syntax enthalten.

Quelle

2016-07-11 20:14:38

Funktioniert gut ... @Sinan Guclu, was ist, wenn Sie die js-Datei im 'static'-Ordner behalten wollen, wie verweisen Sie darauf in' render_template() '? –

Und ist es möglich? –

@YoungMillie Während es möglich ist, 'render_template_string' zu verwenden, würde es keinen Sinn ergeben, wenn Sie nur einen Satz Python-Variablen hätten, die in alle statischen Dateien gerendert werden sollen. Es gibt eine Beispielimplementierung [auf diesem Gist] (https://gist.github.com/Driptap/25ba392b00c8b0e0dfe88c7b8c180ca7) –

Wie kann ich eine JS-Vorlage aus einer gerenderten HTML-Vorlage rendern?

Antwort

Verwandte Themen