在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文件以尽可能快地加载网站。
那么,我该怎么办?感谢。
答案 0 :(得分:9)
扩展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,并有几个初始化器来设置项目设置和加载引导数据。我的基本应用加载模板具有全局项目设置初始值设定项,子模板定义了本地设置和数据。
答案 1 :(得分:5)
由于您的脚本使用jQuery,您可以简单地使用jQuery的$(document).ready()
和$(window).load()
函数来绑定DOM已准备好的事件上的函数,并分别加载所有窗口内容。 / p>
如果您不使用jQuery,请查看这些相关问题,以了解如何使用纯JS模仿上述行为:
编辑1 :包含顺序很重要。在任何需要执行jQuery的脚本之前,您必须包含jQuery脚本。
EDIT 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
)