如何在django模板中管理Javascript模块？

Question

让我们说我们想要一个基于javascript的功能库(我在想jquery):例如:

1. ajax对话框
2. 日期选择器
3. 表单验证器
4. 一个滑动菜单栏
5. 一个手风琴的东西

每个代码有四个代码:一些Python,CSS,JS和HTML.

安排所有这些部分的最佳方法是:

• 每个javascript'模块'都可以被不同的视图巧妙地重用
• 构成完成功能的四位代码保持在一起
• css/js/html部分出现在响应中的正确位置
• 模块之间的公共依赖关系不会重复(例如:共同的javascript文件)

X - - - - - - -

如果,或者有某种方法可以确保从模板标签调用模板时遵循{%block%}指令,那将是很好的.因此,可以在单个文件中创建单个模板,每个模板具有用于CSS,HTML和JS的块.通过从任何视图所需的模板调用的模板标签来调用它.这是有道理的.这可以通过某种方式完成吗？我的模板标签模板似乎忽略了{%block%}指令.

X - - - - - - -

关于将这些媒体放在表格中有一些非常相关的说法http://docs.djangoproject.com/en/dev/topics/forms/media/这可能适用于表单验证器和日期选择器示例.

Answer 1

我发布这个问题已经有一段时间了.我一直在做的解决方法是:

1. 将您需要的javascript部分写为静态提供的库
2. 使用服务器端值从模板调用静态库中的例程

必须使用约束来编写它,使其仅充当客户端脚本; 不要试图在服务js时尝试从服务器注入值.最后,我发现在html模板中严格应用服务器端变量不那么令人困惑.

通过这种方式,我能够:

1. 将javascript选择器保留在同一文件中的html标签上(即:模板)
2. 完全避免模板标签
3. 在不同的地方重用每个javascript库,以及
4. 将css/js/html片段保存在预期可以找到的所有位置

它并不完美,但是它让我感觉到一个更整洁的想法.

例如,"media/js/alertlib.js"中的js库可能包括:

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

并且模板具有:

<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>