Javascript ไม่ทำงานกับการสืบทอดเทมเพลต Django

ฉันมีปัญหาบางอย่างในการทำให้ Javascript ทำงานกับการสืบทอดเทมเพลต Django ตาม Opera จาวาสคริปต์ทั้งหมดและไฟล์ 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="/th/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="/th/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/th/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

นอกจากนี้ บางคนที่มาจากเฟรมเวิร์ก/ภาษาอื่นยังใช้เพื่อรวม เป็นกลไกหลักของการใช้ซ้ำ คุณอาจต้องการดูว่าสิ่งนั้นตรงกับความต้องการของคุณดีกว่าหรือไม่

แก้ไข: ฉันดำเนินการแก้ไขเทมเพลตของคุณแล้วเพื่อให้มีบล็อกที่เหมาะสม

ฐาน.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="/th/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>

เด็ก.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="/th/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/th/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

คุณยังไม่เข้าใจวิธีการทำงานของการสืบทอดเทมเพลต ในเทมเพลตย่อย ต้องไม่มีสิ่งใดอยู่นอกแท็กบล็อก (ประเภทเอกสาร/ส่วนหัวทั้งหมดนั้นไม่มีที่อยู่อยู่แล้ว)

แต่เพื่อที่จะแสดงบล็อกในเทมเพลตลูก จำเป็นต้องกำหนดไว้ในพาเรนต์ คุณไม่ได้กำหนดบล็อก CSS ดังนั้นจึงถูกละเว้น

person Daniel Roseman    schedule 13.04.2012
comment
ขออภัย มันอยู่ที่ด้านล่าง แต่ฉันลบมันไปแล้วเมื่อพยายามแยกมันออกเป็นหลาย ๆ บล็อก และลืมใส่กลับเข้าไป หลังจากนั้นไม่ได้ผล ฉันใส่มันกลับตอนนี้ - person Qwyt; 13.04.2012