I'm very new to jinja2 and the use of templates in general so I was wondering if there's an easy way to load an external javascript. I was thinking of using:
{% block javascript %}
<script src="myscript.js"></script>
{% endblock %}
But I can't help to ask:
Is there a way of loading this script directly from within a template directive?
You have two choices here -- the first is the way you did it -- simply add the appropriate markup into a template (or a block if you want to be able to override it in templates which extend your first template.)
The second way is to use Jinja2's include function:
{% block javascript %}
<script type="text/javascript">
{% include "myscript.js" %}
</script>
<!-- The contents of myscript.js will be loaded inside the script tag -->
{% endblock %}
The advantage of using include is that Jinja2 will process your javascript before including it -- which means you can have variables in your javascript that change depending on the state of your program.
The disadvantage of using include in this manner is the same -- your .js file will be run through Jinja2 before being sent out -- if you are not using dynamic content you will just be processing the file unnecessarily for every request -- and if you are using a javascript templating library with Jinja2 syntax then trouble is likely.
This question is quite old, but there is another way of doing it that might be interesting as well. I found it while working with Jinja2 and flask.
I used the url_for() and it works fine:
{% block javascript %}
<script src="{{ url_for('static',filename='myscript.js') }}"></script>
{% endblock %}
And I have my myscript.js in my static folder. Specified in Jinja2 environment, or by default in flask.
" before {{ and after }}, i.e. src="{{ url_for('static',filename='myscript.js') }}", otherwise it is not valid HTML