Provides a (more) elegant solution for injecting Django template variables into the context of an external Javascript file.
pip install django-js-variable-injector- add
injectortoINSTALLED_APPS
The injector can be used in one of two ways. Either you can explicitly define which django variables to inject into the Javascript namespace, or - if no variables are provided - the entire context will attempt to be injected.
Now, to actually use the injector you simply must:
- Load the template tag library
- Wrap your javascript execution in the djangovars function.
Of course, I will elaborate. We'll use the following as an example:
views.py
def myview(request):
return render(request, 'test.html', {
'yo': 'a',
'mr_white': 1,
'science': [1, 2, 3],
'bitch': {
'a': 1,
'b': 2
}
})
Now, we have two different ways that we can inject the variables. Here is the first:
test.html
{% load js_injector %}
<!DOCTYPE html>
<html>
<head>
{% js_injector %}
<script type="text/javascript" src="{{STATIC_URL}}injector_test.js"></script> <-- (your scripts should be below the injector)
<title></title>
</head>
<body>
....
</body>
</html>
This would result in the entire contents of the context being added.
The other (more granular) way is as follows: test.html
{% load js_injector %}
<!DOCTYPE html>
<html>
<head>
{% js_injector yo mr_white science bitch %}
<script type="text/javascript" src="{{STATIC_URL}}injector_test.js"></script> <-- (your scripts should be below the injector)
<title></title>
</head>
<body>
....
</body>
</html>
This would result in ONLY yo, mr_white, science, and bitch variables being injected. Regardless of which method you choose, the following Javascript is how you would inject the variables into a namespace.
injector_test.js
djangovars(['yo', 'mr_white', 'science', 'bitch'], function(y, m, s, b) {
... your logic here ...
});
Omitting variables is also valid, i.e.:
test.html
{% load js_injector %}
<!DOCTYPE html>
<html>
<head>
{% js_injector yo bitch %}
<script type="text/javascript" src="{{STATIC_URL}}injector_test.js"></script> <-- (your scripts should be below the injector)
<title></title>
</head>
<body>
....
</body>
</html>
In settings.py the following configuration variables are available:
INJECTOR_MAP_NAME- The injector introduces a JS variable into the global namespace which could conceivably conflict with another name (by default, this variable is calleddjangovars_map). To override this name, set this variable to a different value.
- Error catching
- More suggestions welcome!
=== If you like the injector and are using it, please star and/or fork :)