1

我在使 Javascript 与 Django 模板继承一起工作时遇到了一些问题。根据 Opera，所有 javascript 及其 CSS 文件都可以正常加载，但 Javascript 无法正常工作，而不是显示 Javasrcript 表格，而是显示普通的 html 表格。如果我从孩子身上删除所有继承标签，一切正常。

我一直在使用 Dreamweaver 制作这些文件，但我怀疑这是否对这个问题有任何实际影响。

父级 - base.html 标头：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="/SpryAssets/css/base_new.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<style type="text/css">
.item_table_main {  border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>
</head>

<body>

孩子的标题：

{% extends "base_new.html" %}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    {% block css %}
body table tr {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFF;
    border: 0px none #FFF;
}
</style>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:382px;
    height:252px;
    z-index:1;
    left: 1169px;
    top: 616px;
}
#apDiv2 {
    position:absolute;
    width:1575px;
    height:138px;
    z-index:2;
}
    {% endblock css %}
</style>
</head>

这似乎与标题无关。Dreamweaver 在 child.html 的末尾生成此脚本

<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var CollapsiblePanel9 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel9", {contentIsOpen:false});
var CollapsiblePanel8 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel8", {contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", 
</script>

我未能将其包含在内容块中 - 我花了半天时间才弄清楚这一点；p。

谢谢大家的帮助。

4

2 回答 2

2

如果您正在扩展模板，您将需要定义它将在父模板中覆盖的块。您发布的子模板具有 {% block %} 模板标签中未包含的标记。

如果要更改文档的整个结构，则不需要模板继承。

有关模板继承的更多信息：https ://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance

此外，一些来自其他框架/语言的人习惯于将包含作为重用的主要机制。您可能想看看这是否更符合您的需求。

编辑：我继续编辑您的模板，使它们具有适当的块。

base.html

{% block doctype %}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">{% endblock %}
<html>

{% block head %}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="/SpryAssets/css/base_new.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<style type="text/css">
.item_table_main {  border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
</style>
</head>
{% endblock %}

<body>

{% block content %}

    {# base content here #}

{% endblock %}

</body>
</html>

child.html

{% extends "base.html" %}

{% block doctype %}<!DOCTYPE HTML>{% endblock %}

{% block head %}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    {% block css %}
body table tr {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFF;
    border: 0px none #FFF;
}
</style>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:382px;
    height:252px;
    z-index:1;
    left: 1169px;
    top: 616px;
}
#apDiv2 {
    position:absolute;
    width:1575px;
    height:138px;
    z-index:2;
}
    {% endblock css %}
</style>
</head>

{% endblock %}

{% block content %}

    {# child content here #}

{% endblock %}

</body>
</html>
于 2012-04-13T17:30:33.847 回答
2

你还没有理解模板继承是如何工作的。在子模板中，任何内容都不能位于块标记之外。（无论如何，所有这些 doctype/header 的东西都没有位置。）

但是为了在子模板中显示一个块，它需要在父模板中定义。您还没有定义 CSS 块，所以它被简单地忽略了。

于 2012-04-13T17:32:48.953 回答