Loading external script with jinja2 template directive

Question

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?

Answer 1

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.

Answer 2

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.