Javascript 不适用于 Django 模板继承

Posted 2023-02-24

技术标签:

【中文标题】Javascript 不适用于 Django 模板继承【英文标题】：Javascript doesen't work with Django template inheritance 【发布时间】：2012-04-26 01:59:25 【问题描述】：

我在使 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.

感谢大家的帮助。

【问题讨论】：

你能告诉我们生成的标记吗？您说父文件是base.html，但子文件扩展了base_new.html。是不是像打错字那么简单？此外，在将示例发布到 SO 和问题论坛时，请尽可能多地删除，只留下证明问题的最低限度。那时我们更有可能剪切和粘贴它，并且更容易发现问题。 【参考方案1】：

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

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

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

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

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

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>

【讨论】：

【参考方案2】：

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

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

【讨论】：

对不起，它在底部，但是当我尝试将其拆分为多个块时将其删除，并且在不起作用后忘记将其放回。我现在把它放回去了。

以上是关于Javascript 不适用于 Django 模板继承的主要内容，如果未能解决你的问题，请参考以下文章

.items 不适用于 Django 模板中的 defaultdict

Css 静态引用不适用于 Django 模板

Django模板标签切片不适用于表单切片

Python Django - 模板标签中的 % request.user.is_authenticated % 不适用于 JS

用于 JavaScript 的 Django reverse()