Django / jQuery:处理模板继承和JS文件加载

时间:2015-07-03 09:11:20

标签: javascript jquery python django 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文件以尽可能快地加载网站。

那么,我该怎么办?感谢。

2 个答案:

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