时间戳

首页 > 解决方案 > Jinja 通过“SyntaxError: expected property name, got '%'” 错误

javascript - Jinja 通过“SyntaxError: expected property name, got '%'” 错误

问题描述

我正在使用带有 render_template 的 Flask 框架。Flask 将列表返回到 if.html 文件。我在 if.html 文件中使用 Chart.js 从烧瓶返回的列表中创建图表。当我在 HTML 文件中使用Chart.js代码时，它可以正常工作，但是当我想将相同的 javascript 代码复制到外部line.js文件并将其链接回我的if.html时，我会看到SyntaxError: expected property name,控制台中出现 '%' javascript 错误。

我将不胜感激有关该问题的任何帮助。

if.html 中的 JavaScript

{% extends "index.html" %}
{% block content %}
<!-- bar chart canvas element -->
<canvas id="myChart" width="600" height="400"></canvas>
<p id="pointSelected">Point selected:</p>

<script>
  // Global parameters:
  // do not resize the chart canvas when its container does (keep at 600x400px)
  Chart.defaults.global.responsive = false;

  // define the chart data
  var chartData = {
    labels : [{% for item in labels %}
               "{{item}}",
              {% endfor %}],
    datasets : [{
        label: '{{ legend }}',
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data : [{% for item in values %}
                  {{item}},
                {% endfor %}],
        spanGaps: false
    },

    {
        label: 'Sensor 2',
        fill: false,
        lineTension: 0.1,
        borderColor: "#3e95cd",
        data : [{% for item in values %}
                  {{item + 3}},
                {% endfor %}],

    }
    ]
  }

  // get chart canvas
  var holder = document.getElementById("myChart");
  var ctx = document.getElementById("myChart").getContext("2d");

  // create the chart using the chart canvas
  var myChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
      tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
          label: function(tooltipItems, data) {
                   return tooltipItems.yLabel + ' degrees';
                 }
        }
      },
    }
  });

  // get the text element below the chart
  var pointSelected = document.getElementById("pointSelected");

  // create a callback function for updating the selected index on the chart
  holder.onclick = function(evt){
    var activePoint = myChart.getElementAtEvent(evt);
    console.log(activePoint);
    console.log('x:' + activePoint[0]._view.x);
    console.log('maxWidth: ' + activePoint[0]._xScale.maxWidth);
    console.log('y: ' + activePoint[0]._view.y);
    console.log('index: ' + activePoint[0]._index);
    pointSelected.innerHTML = 'Point selected... index: ' + activePoint[0]._index;
  };
</script>

{% endblock %}

line.js 文件

  // Global parameters:
  // do not resize the chart canvas when its container does (keep at 600x400px)
  Chart.defaults.global.responsive = false;

  // define the chart data
  var chartData = {
    labels : [{% for item in labels %}
               "{{item}}",
              {% endfor %}],
    datasets : [{
        label: '{{ legend }}',
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: "rgba(75,192,192,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data : [{% for item in values %}
                  {{item}},
                {% endfor %}],
        spanGaps: false
    },

    {
        label: 'Sensor 2',
        fill: false,
        lineTension: 0.1,
        borderColor: "#3e95cd",
        data : [{% for item in values %}
                  {{item + 3}},
                {% endfor %}],

    }
    ]
  }

  // get chart canvas
  var holder = document.getElementById("myChart");
  var ctx = document.getElementById("myChart").getContext("2d");

  // create the chart using the chart canvas
  var myChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: {
      tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
          label: function(tooltipItems, data) {
                   return tooltipItems.yLabel + ' degrees';
                 }
        }
      },
    }
  });

  // get the text element below the chart
  var pointSelected = document.getElementById("pointSelected");

  // create a callback function for updating the selected index on the chart
  holder.onclick = function(evt){
    var activePoint = myChart.getElementAtEvent(evt);
    console.log(activePoint);
    console.log('x:' + activePoint[0]._view.x);
    console.log('maxWidth: ' + activePoint[0]._xScale.maxWidth);
    console.log('y: ' + activePoint[0]._view.y);
    console.log('index: ' + activePoint[0]._index);
    pointSelected.innerHTML = 'Point selected... index: ' + activePoint[0]._index;
  };

是否.html文件

{% extends "index.html" %}
{% block content %}

<!-- <script src='static/Chart.min.js'></script> -->
<script src='static/js/Chart.js'></script>
<script src='static/js/line.js'></script>
<!-- <canvas id="line-chart" width="300" height="150"></canvas> -->

<h1>Temperature Sensor #1</h1>
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="600" height="400"></canvas>
    <p id="pointSelected">Point selected:</p>
{% endblock %}

标签： javascriptpythonflaskchart.jsjinja2

解决方案

Jinja 仅适用于 html 文件，您不能在其他文件中使用它的标签。但是您可以简单地使用包含 html 模板中所需值的变量来渲染小脚本，而不是在外部脚本中使用它们，例如：

    {% extends "index.html" %}
    {% block content %}
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="600" height="400"></canvas>
    <p id="pointSelected">Point selected:</p>

    <script>
        var labels = [{% for item in labels %}
           "{{item}}",
          {% endfor %}]
        var data = [{% for item in values %}
              {{item}},
            {% endfor %}]
        // and so on for each variable
        // it's important to import external script 
        // after variables declaration, not before
    </script>

    <script src="external-script.js"></script>

    {% endblock %}

并且您可以简单地在外部脚本中使用它们，例如：

    var chartData = {
        labels : labels,
        // and so on
    };

推荐阅读