Question

If I'd like to generate JavaScript code, and not just HTML, through Jinja2, am I stuck with keeping the JS code inline, or is there a way for me to reference the script?

Concretely:

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>

This works fine if the JavaScript code is inlined, but what if we'd like to remain tidy and reference a separate file?

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

?

Possibly, this can be done by replacing src="code.js" with

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

Can you see how to render a JS template while you're rendering an HTML template?

Answer 1

You can add a route that generates the JS.

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

And in script.js, this should be in the same folder as your other templates:

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

And in your layout.html:

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

Jinja2 will parse any files containing it's syntax.

How can I render a JS template from a rendered HTML template?

1 个答案: