Menu
I working on a web project using Python and Flask. I was just wondering if I can access parameters sent by python in my external javascript files? It's working well with html files or with js embedded in html files but not when javascript is extern.
See below.
The python code
@app.route('/index') def index(): return render_template('index.html', firstArg = 2, secondArg = 3) The index.html code
... <body> <p>The first arg is {{firstArg}}.</p> <script src="index.js"></script> </body> ... And the index.js file
window.onload=function(){ console.log('{{secondArg}}'); }; So the first arg is correct within the html file but the second doesn't work in the js file. The browser is showing Unexpected token {.
Maybe it's not possible to use it in external js?
Otherwise I would need to insert the secondArg as an input data in html and get it within the js file but it's not very clean.
If someone can help, thanks.
992
JsJinja lets you use your Jinja2 templates in Javascript. It compile the Jinja2 templates to Javascript with no restrictions. The js can be generated via command line jsjinja <template file> or through the {% jsjinja %} tag in the templates.
Jinja2 is a commonly-used templating engine for web frameworks such as Flask, Bottle, Morepath and, as of its 1.8 update, optionally Django as well. Jinja2 is also used as a template language by configuration management tool Ansible and the static site generator Pelican, among many other similar tools.
Flask comes packaged with Jinja2, and hence we just need to install Flask. For this series, I recommend using the development version of Flask, which includes much more stable command line support among many other features and improvements to Flask in general.
Jinja is a web template engine for the Python programming language. It was created by Armin Ronacher and is licensed under a BSD License. Jinja is similar to the Django template engine but provides Python-like expressions while ensuring that the templates are evaluated in a sandbox.
Jinja2 Template engine. Jinja2 is a template engine for Python. You can use it when rendering data to web pages. For every link you visit, you want to show the data with the formatting. By using a template engine we can seperate display logic (html, css) from the actual Python code. Let’s start with an example.
Python hosting: Host, run, and code Python in the cloud! Jinja2 is a template engine for Python. You can use it when rendering data to web pages. For every link you visit, you want to show the data with the formatting. By using a template engine we can seperate display logic (html, css) from the actual Python code.
Flask provides support for Jinja2 by default, but any other templating engine can also be used as suited. By default, Flask expects the templates to be placed in a folder named templates at the application root level. Flask then automatically reads the contents by making this folder available for use with the render_template () method.
Another important point to note here is the usage of {% block container %} {% endblock %}, which is very crucial component of Jinja2 working towards making the templates modular and inheritable. The next couple of files will make this clearer.
The index.js is probably not served by your flask instance, but it is most definitely not processed by your templateing engine and even if it would it would not have the same context as the html it is requested for.
I think the cleanest solution would be to have an initiation function in your index.js and call it from the html file:
<body> <p>The first arg is {{firstArg}}.</p> <script type="text/javascript" src="index.js"></script> <script type="text/javascript"> yourInitFunction({{secondArg}}); </script> </body> You also could tell flask to route the index.js, too: @yourapp.route('index.js') just like you did with the route('/index') however this is probably not a very good idea.
57
Also, you may create index_js.html (or same index.js) file and {% include 'index_js.html' %} where you need it.
1) If you like index_js.html - use <script> here is some JS templated code </script> there. Further: {% include 'index_js.html' %} in your templated html.
2) Or if you like index.js - do <script> {% include 'index.js' %} </script>.
45
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
