时间戳

首页 > 解决方案 > Uncaught SyntaxError: Unexpected token '%', Flask error when using a separate js file

javascript - Uncaught SyntaxError: Unexpected token '%', Flask error when using a separate js file

问题描述

我正在开发一个烧瓶应用程序，当我尝试在我的 html 页面中链接我的 js 文件时出现上述错误。

但是，当我在 HTML 文件本身的标记下包含 js 逻辑时，我没有看到错误并且页面按预期呈现

使用导致错误的方法。

JS：存放在/static/js/alv.js

var lineData1 = {
labels : [
{% for item in mob %} //Error on this line Uncaught SyntaxError: Unexpected token '%'
"{{ item }}",
{% endfor %}
],

datasets : [{
fill: {
target: 'origin',
above: 'rgb(255, 0, 0)',   // Area will be red above the origin
below: 'rgb(0, 0, 255)'    // And blue below the origin
},
borderColor :  "rgba(0,175,233)",
fillColor:  "rgba(0,175,233)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
bezierCurve : true,
data : [
{% for item in apo %}
{{ item }},
{% endfor %}]
}
]
};

Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,0,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = false;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;


steps = 5

/*Chart display options*/
var config1 =  {
type : "line",
data : lineData1,
scaleOverride: false,
scaleSteps : 10,
scaleStepWidth : 4,
scaleStartValue: 0,
scaleShowVerticalLines: true,
scaleShowGridLines : true,
barShowStroke : true,
scaleShowLabels: true,
bezierCurve: true,
options: {
title: {
display: true,
text: ['ATL_60K NoStress Blended','Attrition per Open(%)']
},
legend : { display : false },
responsive : true,
scales:{
xAxes:[{
display : true,
ticks: {
autoSkip: true,
maxTicksLimit: 20
},
scaleLabel: {
display : true,
labelString : 'MOB'
}
}],
yAxes:[{
display : true,
scaleLabel: {
display : true,
labelString : 'Attrition Rate'
}
}]
}
},
plugins: {
datalabels: {
display: false,
}
}
};
/* get chart canvas */
var attr_chart = document.getElementById("attr_line").getContext("2d");
/* draw charts */
var attr_line = new Chart(attr_chart,config1);
/* Load each chart and hide() the tab immediately. */
$('#tab1').hide();
$('#tab1_btn').on('click',function(){
$('#tab1').show();

HTML：/模板/alv.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/nav-bar.css') }}">
</head>

<body>
  <center>

<div class="navbar">
  <a href="/">Home</a>
  <a href="/alv">ALV</a>
  <div class="dropdown">
  <button class="dropbtn">ACE
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Partner 1</a>
    <a href="#">Partner 2</a>
    <a href="#">Partner 3</a>
  </div>
  </div>
</div>

  <center>
    <h1>{{ title }}</h1>

<button id="tab1_btn">Attrition per Open</button>
<div id="tab_cover"> </div>
<div id="tabs">
    <div id="tab1" class="tab">
        <canvas id="attr_line" class="chart" width="400" height="300"></canvas>
    </div>
</div>

<script src="{{url_for('static', filename='js/alv.js')}}"></script>
  </center>
</body>
</html>

当我使用上述方法时，我遇到了错误，即使用 HTML 中的链接从外部位置调用 js 文件

但是，如果我在标签中包含整个 js 逻辑，它就可以正常工作。

希望我很清楚。请帮帮我

谢谢

标签： javascriptjsonflask

解决方案

出现此问题是因为您不能在不是由 flask 呈现而是静态文件的文件中使用 Jinja 模板。在这个问题中，解释了在外部 js 中使用烧瓶变量的几种方法。 在外部 Javascript 中使用 Python Flask 传递参数

问题解释 当你使用{%%}或者{{}}这段代码不能被html或浏览器理解时，当flask渲染它时，它会将那些逻辑和变量转换为html。但是对于这个烧瓶需要知道你正在渲染一个包含 Jinja 标签的文件。render_template()当我们调用并传递其中的 html 文件时，我们会这样做。但是对于 js 文件，我们不会告诉 flask 我们正在渲染一个 js 文件，因为在大多数情况下它用于客户端编码，所以 flask 不需要知道这一点。但在某些情况下，你必须在 js 中使用烧瓶变量。不幸的是，没有直接的方法可以做到这一点，所以我们必须以一种 hack(ish) 的方式来做到这一点，就像你在那个线程中看到的那样。

推荐阅读