Question

我已经阅读了类似的stackoverflow问题并检查了我是否犯了同样的错误。我不认为这是URL或视图的问题，因为Django-debug-toolbar显示它正在拾取父模板，但子模板并没有扩展它。

我有以下项目结构：

project
    templates
        base.html
        index.html

    apps
        charts
            templates
                chart_base.html
                charts.html

项目/模板/ base.html文件

<body>
    {% block wrapper %}
        <div id="wrap">
    {% endblock %}

    <div class="container" id="container-main">
        {% block body %}
        {% endblock %}
    </div>

    <footer class="footer">
        <div class="container">
            {% block footer %}
            {% endblock %}
        </container>
    </footer>

    ....(scripts)....

    {% block extrajs %}
    {% endblock %}

</body>

项目/应用/图表/模板/ chart_base.html

{% extends 'base.html' %}

{% block body %}

<!-- chartjs container -->
    <div class='container'>
        <!-- charts.js code -->
        {% block chart %}
        {% endblock chart %}
        <!-- / charts.js code -->
    </div>
<!-- /chartjs container -->

    {% include 'base/js.html' %}

    <script>
    $(document).ready(function(){
      {% block jquery %}{% endblock %}
    })
    </script>

{% endblock %}

项目/应用/图表/模板/ charts.html

{% extends 'chart_base.html' %}

<!-- charts.html jquery -->
    <script>
    {% block jquery %}

    var labels = []
    var defaultData = []
    var endpoint = '/api/chart/data/'

    $.ajax({
        method: "GET",
        url: endpoint,

        success: function(data){
            labels = data.labels
            defaultData = data.default
            setChart()
        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)
        }
    })

    function setChart(){
        var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '# of Votes',
                        data: defaultData,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                }
            })
    }

    {% endblock %}
</script>

{% block chart %}

    <div class='row'>
        <div class='col-sm-12'>
            <h1>Hello World</h1>
            <canvas id="myChart" width="400" height="400"></canvas>
        </div>
    </div>

{% endblock chart %}

项目/应用/图表/ views.py

class HomeView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'chart_base.html')

结果页面的HTML源代码显示chart_base.html已正确呈现，但没有使用charts.html位。

127.0.0.1:8000/results /

<div class="container" id="container-main">

  <!-- chartjs container -->
    <div class="container">
    <!-- charts.js code -->


    <!-- / charts.js code -->
    </div>
  <!-- /chartjs container -->

我可能会出错的任何想法？

Answer 1

在你的base.html中，你有一个错字。您正在使用<div>标记关闭<container>。

<footer class="footer">
    <div class="container">
        {% block footer %}
        {% endblock %}
    </container>
</footer>

应该是：

<footer class="footer">
    <div class="container">
        {% block footer %}
        {% endblock %}
    </div>
</footer>

还将charts.html包装在一个块中，以便它可以包含在任何地方。

Answer 2

您的观点应该使用charts.html，而不是chart_base.html（它扩展了）。

class HomeView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'chart.html')

您可以使用TemplateView代替View：

class HomeView(TemplateView):
    template_name = 'chart.html'

在您的charts.html中，评论和<script>标记不在任何区块中。这意味着它们不会包含在渲染模板中，因此您可以删除它们。

{% extends 'chart_base.html' %}

<!-- charts.html jquery -->
    <script>
    {% block jquery %}

Django 1.11 - 子模板不从父级继承

2 个答案: