Django расширяет тег, заставляет JS диаграммы не загружаться - PullRequest
Новая
       1

Django расширяет тег, заставляет JS диаграммы не загружаться

0 голосов
/ 27 июня 2019

Я использую файл base.html для создания панели навигации для всех дочерних шаблонов.

Проблема, с которой я сталкиваюсь, заключается в том, что это мешает моим диаграммам JS (диаграммам Google) больше не загружать их. Может ли кто-нибудь пролить свет на то, почему это происходит, и, возможно, это можно исправить?

base.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

       {% block tab_menu %}
 <div class="topnav">
  <a href="/index">Home</a>
  <a href="/index/devops">Devops</a>
  <a href="/index/qa">QA</a>
  <a href="/index/frontend">Frontend</a>
     <a href="/index/middleware">Middleware</a>
     <a href="/index/portal">Portal</a>
  <
</div>
{% endblock tab_menu %}


</body>
</html>

child.html: 

<!DOCTYPE html>
{% extends "KPI/base.html" %}
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
             google.charts.load("current", {packages:["corechart"]});
             google.charts.setOnLoadCallback(VelocityChart);
             function VelocityChart() {
               var data = google.visualization.arrayToDataTable([
                 ['Status', 'Number of Tasks'],
                 ['Completed', {{completed_velocity}}],
                 ['Incompleted',  {{incomplete_velocity}}],
                ]);

                var options = {
                   title: '',
                   is3D: true,
                 };

               var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
        chart.draw(data, options);
      }

    </script>
</head>
<body>

{% block tab_menu %}
   {{ block.super }}

<h2> QA Dashboard</h2>

 <div id="velocity_chart"></div>


{% endblock tab_menu %}
</body>
</html>

Код в файле base.html отлично работает на других шаблонах, но не загружает диаграммы в дочерние шаблоны.

Также диаграммы загружаются нормально без реализации навигационной панели

** РЕДАКТИРОВАННОЕ размещение {% extends "KPI/base.html" %} в child.html

1 Ответ

1 голос
/ 27 июня 2019

Это потому, что ничто выше вашего {% block %} тега не вставляется в base.html при его расширении. Вам нужно создать теги {% block %} для инкапсуляции ваших сценариев, чтобы вставить их в base.html.

При расширении шаблона все, что находится за пределами тега блока, отбрасывается.

Добавлен пример:

[[base.html]] 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% block script %}  <!-- add matching block to contain insert -->
    {% endblock %}
</head>
<body>

{% block tab_menu %}
 <div class="topnav">
  <a href="/index">Home</a>
  <a href="/index/devops">Devops</a>
  <a href="/index/qa">QA</a>
  <a href="/index/frontend">Frontend</a>
     <a href="/index/middleware">Middleware</a>
     <a href="/index/portal">Portal</a>
  <
</div>
{% endblock tab_menu %}


</body>
</html>

[[child.html]] 

<!DOCTYPE html>
{% extends "base.html" %}
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Title</title>
    <!--  add block tag (along with endblock below) to insert your script -->
    {% block script %}
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
             google.charts.load("current", {packages:["corechart"]});
             google.charts.setOnLoadCallback(VelocityChart);
             function VelocityChart() {
               var data = google.visualization.arrayToDataTable([
                 ['Status', 'Number of Tasks'],
                 ['Completed', {{completed_velocity}}],
                 ['Incompleted',  {{incomplete_velocity}}],
                ]);

                var options = {
                   title: '',
                   is3D: true,
                 };

               var chart = new google.visualization.PieChart(document.getElementById('velocity_chart'));
        chart.draw(data, options);
      }

    </script>
    {% endblock %}
</head>
<body>

{% block tab_menu %}
{{ block.super }}

<h2> QA Dashboard</h2>

 <div id="velocity_chart"></div>


{% endblock tab_menu %}
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...