자바 스크립트가 장고 템플릿 상속과 함께 작동하지 않습니다

자바 스크립트를 장고 템플릿 상속과 함께 사용하는 데 몇 가지 문제점이 있습니다. 오페라에 따르면 모든 자바 스크립트와 CSS 파일은 정상적으로로드되지만 자바 스크립트는 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는.

여러분 모두를 도와 주셔서 감사합니다.

출처

2012-04-13 Qwyt

_ 생성 된 마크 업을 보여 주시겠습니까? –

부모 파일이 base.html이지만 자식이 base_new.html을 확장한다고 가정합니다. 오타처럼 간단합니까? 또한 SO 및 질문 포럼에 예제를 게시 할 때 최대한 문제를 나타내는 최소값 만 남겨 두십시오. 우리는 붙여 넣기를 더 잘 할 가능성이 크며, 문제는 더 쉽게 찾아 낼 수 있습니다. – Spacedman

템플릿을 확장하는 경우 상위 템플릿에서 재정의 할 블록을 정의해야합니다. 게시 한 하위 템플릿에 {% block %} templatetags 내에 포함되지 않은 마크 업이 있습니다.

문서의 전체 구조를 변경하려면 템플릿 상속이 필요하지 않습니다. 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>

출처

2012-04-13 17:30:33

당신은 상속이 어떻게 작동하는지 템플릿 이해하지 않았습니다. 자식 템플릿에서 아무것도 블록 태그 바깥에 있어야합니다. 어쨌든 doctype/header 항목에는 아무 것도 없습니다.

그러나 하위 템플릿에 블록을 표시하려면 부모 템플릿에 블록을 정의해야합니다. CSS 블록을 정의하지 않았기 때문에 무시됩니다.

출처

2012-04-13 17:32:48

죄송합니다. 맨 아래에 있었지만 여러 블록으로 분할하려고 시도했을 때 삭제되었습니다. 작동하지 않으면 다시 넣으려고 잊어 버렸습니다. 나는 그것을 되돌려 놓는다. – Qwyt

자바 스크립트가 장고 템플릿 상속과 함께 작동하지 않습니다

답변

관련 문제