如何在django模板中管理Javascript模块？ [英] How to manage Javascript modules in django templates?

问题描述

假设我们想要一个基于javascript的功能库（我在想jQuery）：
例如：

1. ajax对话框


2. 日期选择器


3. 表单验证器


4. 滑动菜单栏


5. 一个协调的事情

每个代码有四个代码：一些Python，CSS， JS，&

安排所有这些作品的最佳方法是：

• 每个javascript'模块'可以通过不同的视图整齐地重用


• 构成完成功能的四位代码保持在一起


• css / js / html部分出现在响应中的正确位置


• 不重复模块之间的常见依赖关系（例如：一个共同的javascript文件）

x --------------

如果，或者有一些方法来确保，当从模板标签调用时，模板遵守{％block％}指令。因此，可以在单个文件中创建一个单独的模板，每个模板具有CSS，HTML和JS。通过从模板中调用的任意视图想要的模板进行调用。这有道理可以这样做吗？我的模板标签模板似乎忽略了{％block％}指令。

x --------------

有一些非常相关的气袋关于将这种媒体放在这里的形式 http://docs.djangoproject.com/en/dev/topics/forms/media/ ，这可能适用于表单验证器和日期选择器示例。

解决方案

自从我发布了这个问题以来有一段时间。我一直在努力解决的问题是：

1. 将您需要的javascript部分作为静态服务的库编写


2. 使用服务器端值从模板调用静态库中的例程

需要约束才能写入它只能作为客户端脚本;在服务js时不要试图从服务器注入值。最终我发现在html模板中严格地应用服务器端变量更不容易。

以这种方式我可以：

1. 保留javascript选择器在同一个文件中的html标签（即：模板）


2. 避免模板集合


3. 重新使用不同地方的每个javascript库， / li>
   
4. 在所有预期找到的地方保留css / js / html片段

这不是完美的，但是它让我得到一个更好的想法。

例如，media / js / alertlib.js中的js库可能包括：

  function click_alert（selector，msg）{
 $（selector）.click（function（）{alert （msg）}）
} 
  

，模板有：

 < script type =text / javascriptsrc =media / js / alertlib.js>< / script> 
< script type =text / javascript> 
 click_alert（'＃clickme'，{％message％}）
< / script> 
 
< div id ='clickme'>点击我< / div> 
  

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.

解决方案

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>

这篇关于如何在django模板中管理Javascript模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！