Dav*_* D. 3 javascript python django jquery django-templates
在Django中,如何在实际使用之前处理需要等待JS文件加载的事实？
让我们看看这个例子的问题:
base.html文件
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% include "content.html" %}
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
</body>
</html>
content.html
<script>
$(document).ready(function(){
...
});
</script>
这在逻辑上失败($ is undefined).我可以在调用脚本之前加载jQuery,但我试图避免在我的主要内容之前加载JS文件以尽可能快地加载网站.
那么,我该怎么办？谢谢.
扩展Wtower的建议 - 让他接受.
我真的会坚持在他的例子中使用基于模板继承的方法.我想为该方法介绍一些其他要素,以涵盖其他一些共同需求:
<!DOCTYPE html>
<html>
<head>{% block scripts-head %}{% endblock %}</head>
<body>
{% block content %}{% endblock %}
{% block scripts %}
<script src="jquery.js"></script>
{% endblock %}
<script>{% block script-inline %}{% endblock %}</script>
</body>
</html>
这里有3个想法:
在基本文件中包含常用脚本.如果它们很常见,属于基本文件,则不必在每个模板中重复自己.然而你把它放在块中,所以它可以在层次结构中覆盖.
{% extends "base.html" %}
{% block scripts %}
{{ block.super }}
<script src="a-local-lib.js"></script>
{% endblock %}
关键是使用{{ block.super }}带来父模板中定义的任何脚本.当您在模板中有多个级别的继承时,它的工作特别好.您可以控制脚本是在继承脚本之前还是之后运行.当然,您可以完全覆盖该块,{{ block.super }}如果您愿意,则不包括.
基本上是相同的想法,但与原始的JavaScript.你以同样的方式使用它:每个需要包含一些内联javascript的模板都会有它{{ block script-inline }},并且会以{{ block.super }}这样开始,所以无论父进程放在哪里仍然包括在内.
例如,我在我的项目中使用Ember,并有几个初始化器来设置项目设置和加载引导数据.我的基本应用程序加载模板具有全局项目设置初始化程序,子模板定义本地设置和数据.
由于您的脚本使用jQuery,您可以简单地使用jQuery $(document).ready()和$(window).load()函数来绑定一个函数,该函数分别是DOM已准备好并且所有窗口内容都已加载.
如果您不使用jQuery,请查看这些相关问题,以了解如何使用纯JS模仿上述行为:
编辑1:包含顺序很重要.在执行需要jQuery的任何脚本之前,必须包含jQuery脚本.
编辑2:您可以通过使用第二个模板将脚本与主要内容分开来更好地组织模板:
base.html文件
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% include "content.html" %}
{% include "js.html" %}
</body>
</html>
js.html
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
<script>
$(document).ready(function(){
...
});
</script>
(在这种情况下你渲染base.html)
或者使用块(推荐):
base.html文件
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
</body>
</html>
content.html
{% extends 'base.html' %}
{% block content %}
...
{% endblock %}
{% block scripts %}
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
<script>
$(document).ready(function(){
...
});
</script>
{% endblock %}
(在这种情况下你渲染content.html)
| 归档时间： |
|
| 查看次数： |
2640 次 |
| 最近记录： |