Javascript tidak bekerja dengan warisan templat Django

Saya mempunyai beberapa masalah dalam membuat Javascript berfungsi dengan warisan templat Django. Menurut Opera, semua javascript dan file CSS-nya dimuat dengan baik, tetapi Javascript tidak berfungsi, alih-alih tabel Javascript, tabel html biasa ditampilkan. Jika saya menghapus semua tag warisan dari anak, semuanya berfungsi dengan baik.

Saya telah menggunakan Dreamweaver untuk membuat file-file ini, tapi saya ragu apakah itu mempunyai efek nyata pada masalah ini.

Induk - header 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="/id/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>

Judul anak:

{% 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="/id/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/id/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>

Tampaknya ini tidak ada hubungannya dengan header. Dreamweaver membuat skrip ini di akhir 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>

yang gagal saya masukkan ke dalam blok konten - saya memerlukan waktu setengah hari untuk mengetahuinya ;p.

Terima kasih atas bantuan Anda semuanya.


django javascript django-templates
person Qwyt    schedule 13.04.2012    source sumber
comment
Bisakah Anda menunjukkan kepada kami markup yang dihasilkan?   -  person Matt Ball    schedule 13.04.2012
comment
Anda mengatakan file induknya adalah base.html tetapi file turunannya memperluas base_new.html. Apakah sesederhana salah ketik? Selain itu, ketika memposting contoh ke SO dan forum pertanyaan, ambillah sebanyak mungkin dan sisakan hanya jumlah minimum yang menunjukkan masalahnya. Kami lebih cenderung memotong dan menempelkannya, dan masalahnya lebih mudah dikenali.   -  person Spacedman    schedule 13.04.2012

Jawaban (2)


arrow_upward
2
arrow_downward

Jika Anda memperluas templat, Anda perlu menentukan blok yang akan ditimpa templat induk. Templat anak yang Anda posting memiliki markup yang tidak terdapat dalam tag templat {% block %}.

Jika Anda ingin mengubah seluruh struktur dokumen, pewarisan templat tidak diperlukan.

Untuk info lebih lanjut tentang pewarisan templat: https://docs.djangoproject.com/en/dev/topics/templates/#template-inheritance

Selain itu, beberapa orang yang berasal dari kerangka/bahasa lain terbiasa dengan penyertaan sebagai mekanisme utama penggunaan kembali. Anda mungkin ingin melihat apakah itu lebih sesuai dengan kebutuhan Anda.

Sunting: Saya melanjutkan dan mengedit templat Anda sehingga memiliki blok yang sesuai.

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="/id/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>

anak.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="/id/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<link href="/id/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

Anda belum memahami cara kerja warisan templat. Di templat anak, tidak boleh ada yang berada di luar tag blok. (Lagipula, semua hal doctype/header tidak memiliki tempat di sana.)

Namun untuk menampilkan blok di template anak, blok tersebut perlu didefinisikan di template induk. Anda belum mendefinisikan blok CSS, jadi abaikan saja.

person Daniel Roseman    schedule 13.04.2012
comment
Maaf, itu ada di bawah, tapi saya menghapusnya ketika saya mencoba membaginya menjadi beberapa blok dan lupa memasangnya kembali setelah itu tidak berhasil. Saya mengembalikannya sekarang. - person Qwyt; 13.04.2012