Menu
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?
766
The render() method # var render = function (template, node) { // Codes goes here... }; This follows the same structure as React, where you pass in a template and the node to render it into. To render content, we'll use innerHTML , a property that let's you set the inner HTML of an element.
Javascript uses the document object model (DOM) to manipulate the DOM elements. Rendering refers to showing the output in the browser. The DOM establishes parent-child relationships, and adjacent sibling relationships, among the various elements in the HTML file.
Rendering a template is indeed always about producing content, but for a slightly wider description of content. It could be a chunk of html, for example an ajax call to get new items might produce some html describing the new items, but it doesn't have to be.
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.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
