Javascript не работает с наследованием шаблонов Django

У меня есть некоторые проблемы с работой Javascript с наследованием шаблонов Django. Согласно Opera все javascripts и их файлы 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.

Спасибо за вашу помощь всем.


django javascript django-templates
person Qwyt    schedule 13.04.2012    source источник
comment
Не могли бы вы показать нам сгенерированную разметку?   -  person Matt Ball    schedule 13.04.2012
comment
Вы говорите, что родительским файлом является base.html, но дочерний файл расширяет base_new.html. Это так же просто, как опечатка? Кроме того, при размещении примеров в SO и на форумах вопросов удаляйте как можно больше, оставляя только минимум, демонстрирующий проблему. Тогда мы с большей вероятностью вырежем и вставим его, и проблему будет легче обнаружить.   -  person Spacedman    schedule 13.04.2012

Ответы (2)


arrow_upward
2
arrow_downward

Если вы расширяете шаблон, вам нужно будет определить блоки, которые он будет переопределять в родительском шаблоне. Размещенный вами дочерний шаблон содержит разметку, не содержащуюся в тегах шаблона {% 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>
person Jason Keene    schedule 13.04.2012

arrow_upward
2
arrow_downward

Вы не поняли, как работает наследование шаблонов. В дочернем шаблоне ничего не должно находиться за пределами блочных тегов. (Всем этим doctype/header все равно там не место.)

Но чтобы отобразить блок в дочернем шаблоне, его нужно определить в родительском. Вы не определили блок CSS, поэтому он просто игнорируется.

person Daniel Roseman    schedule 13.04.2012
comment
Извините, он был внизу, но я удалил его, когда пытался разбить на несколько блоков, и забыл вернуть обратно, после того как это не сработало. Я положил его обратно сейчас. - person Qwyt; 13.04.2012