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

テンプレートの継承がどのように機能するかを理解していません。子テンプレートでは、ブロック タグの外側には何も置かないでください。(とにかく、doctype/header のものはすべてそこにはありません。)

ただし、子テンプレートでブロックを表示するには、親で定義する必要があります。CSS ブロックを定義していないため、単純に無視されます。

于 2012-04-13T17:32:48.953 に答える
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 に答える