When you need to include a specific javascript file/code snippet in your page, it's always better to do it at the bottom of your page to avoid to block the rendering too soon. This tag provide you a nice way to include and launch only what is needed:
Example in an included template that need to display google maps:
{% dict js_file google_api %}
<script src="http://www.google.com/jsapi?key={{ MAPS_API_KEY }}" type="text/javascript" charset="utf-8"></script>
<script src="{{MEDIA_URL}}js/map.display.js" type="text/javascript">...</script>
{% enddict %}
{% dict js_code link_map %}
$('.show-map').click(function() {
...
});
$('.hide-map').click(function() {
...
});
{% enddict %}
Finaly you just have to add this to the very bottom of your base.html file:
....
</body>
{% for k,v in js_file.items %}
{{v}}
{% endfor %}
<script type="text/javascript">
/* <![CDATA[ */
{% for k,v in js_code.items %}
{{v}}
{% endfor %}
/* ]]> */
</script>
</html>
- template
- javascript
- dict
- stack