在呈现主模板后执行子模板中的javascript代码

Question

我有一个基本的模板，作为子模板的通用结构。在这个基本模板中，我在结束body标记之前包含了jQuery库。

基本模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    .
    .
</head>
<body>
{% block content %}

{% endblock %}
<script src="path/to/jQuery/library"></script>
</body>
</html>

现在，我的子模板具有以下代码

子模板

{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>

<script type="text/javascript">
   // this code is specific to this template, may not be used in another template
  // but can't use jQuery here since the library hasn't loaded yet
</script>
{% endblock %}

那么，只有在基本模板加载完jQuery库之后，我才能开始在child template中运行javascript代码呢？

Answer 1

您需要使用两个块：

基座

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    .
    .
</head>
<body>
{% block content %}

{% endblock %}
<script src="path/to/jQuery/library"></script>
{% block scripts %}

{% endblock %}
</body>
</html>

child_template

{% extends 'base_template.html' %}
{% block content %}
<h1>How you doing?</h1>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
    // this code can "use" jquery
</script>
{% endblock %}