Question

Lets say we want a library of javascript-based pieces of functionality (I’m thinking jquery):
For example:

1. an ajax dialog
2. a date picker
3. a form validator
4. a sliding menu bar
5. an accordian thingy

There are four pieces of code for each: some Python, CSS, JS, & HTML.

What is the best way to arrange all these pieces so that:

• each javascript ‘module’ can be neatly reused by different views
• the four bits of code that make up the completed function stay together
• the css/js/html parts appear in their correct places in the response
• common dependencies between modules are not repeated (eg: a javascript file in common)

x————–

It would be nice if, or is there some way to ensure that, when called from a templatetag, the templates respected the {% block %} directives. Thus one could create a single template with a block each for CSS, HTML, and JS, in a single file. Invoke that via a templatetag which is called from the template of whichever view wants it. That make any sense. Can that be done some way already? My templatetag templates seem to ignore the {% block %} directives.

x————–

There’s some very relevant gasbagging about putting such media in forms here http://docs.djangoproject.com/en/dev/topics/forms/media/ which probably apply to the form validator and date picker examples.

Answer 1

Been a while since I posted this problem. What I’ve been doing to solve it is:

1. write the javascript parts you need as a library which is served statically
2. call the routines in the static library from the template with your server side values

Restraint is required to write it in such a way that it acts as a client side script only; don’t be tempted to try and inject values from the server at the time of serving the js. Ultimately I’ve found it less confusing to apply server side variables strictly in the html template.

In this way I’m able to:

1. keep the javascript selectors on html tags inside the same file (ie: the template)
2. avoid templatetags altogether
3. re-use each javascript library in different places, and
4. keep the css/js/html pieces in all the places where they’re expected to be found

It’s not perfect, but it’s getting me by till a neater idea comes along.

For example a js library in “media/js/alertlib.js” might include:

function click_alert(selector, msg){ 
    $(selector).click(function(){ alert(msg) })
}

and the template has:

<script type="text/javascript" src="media/js/alertlib.js"></script>
<script type="text/javascript">
    click_alert('#clickme', {% message %})
</script>

<div id='clickme'>Click Me</div>