在 JavaScript 脚本标签内使用 jinja2（带烧瓶）来呈现数据

Question

正如问题所述，我只想将列表的结果（从 flask 项目中的 main.py 文件传递）传递并呈现给 html 模板（charts.html）。 问题是我试图将 jinja 变量或在脚本标签 (JavaScript) 中使用 jinja，而不是 html。 我找不到任何可以告诉我如何执行此操作的文档或答案：

我的代码：charts.html （烧瓶中的模板）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <title>Webscraping and Charts</title>
</head>
<body>
    <h1>Webscraping and Beautiful Charts</h1>
<p>{{enrolled}}</p>
<div class="ct-chart .ct-perfect-fifth"></div>

<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [15, 222, 4, 2, 0]
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>
</body>
</html>

在 h1 标签下，您会注意到：

{{已注册}}

此变量的内容在 python 文件中定义。 Function 如下所示。 注册=[3,200,600,1800,22000]

@app.route('/charts')
def charts():
    enrolled=[3,200,600,1800,22000]
    return render_template('charts.html',enrolled=enrolled)

我想要的是显示注册的内容，而不是脚本标签中的现有列表。

因此，将脚本标签中的 [15, 222, 4, 2, 0] 替换为注册的内容。

我尝试了各种方法，但它不起作用。

例如，我尝试将 jinja 变量放在呈现如下列表的列表中。

<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [{{enrolled}}]
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>

这行不通。

尝试在 JavaScript 内部使用 jinja2 以将数据呈现到 html 页面时，任何人都可以提出一个解释最佳实践的解决方案，在这种情况下，使用图表列表数据。

更新：

我还研究了一种解决方案，该解决方案涉及使用 jquery 和 ajax 来呈现结果（没有 jinja2 用于我想要实现的目标），但这似乎过于复杂。

请在您的回答中提出最佳解决方案/替代方案，但我的主要问题是使用 jinja2 是否可以轻松实现

Answer 1

我知道这是一个相对较旧的问题，但由于我需要实现与@MissComputing 类似的事情，我正在分享我找到的这个解决方案。 它不漂亮，但它可以完成工作。

所以在你的情况下，你需要这样做：

<!-- This SET is just to illustrate an example data source, the data would probably come from you controller -->
{% set enrolled_data = '[3,200,600,1800,22000]' %}

<!-- place a hidden field somewhere in your template to "hold" your data -->
<input type="hidden"  id="enrolled_id" value="{{ enrolled_data }}">

<!-- Now Javascript can look for the hidden field and get the data out of it -->
<script>
var data = {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    document.querySelector('#enrolled_id').value
  ]
};
new Chartist.Line('.ct-chart', data); //this line creates the chart
</script>

致谢：此解决方案基于 Reddit 用户在以下帖子中的评论之一的建议： https://www.reddit.com/r/flask/comments/aj06vb/jinja2_into_javascript/

Answer 2

我尝试了您的代码，只需将[{{enrolled}}]替换为{{enrolled}}即可。

在 JavaScript 脚本标签内使用 jinja2（带烧瓶）来呈现数据

问题描述

2 个解决方案

解决方案1
2 2020-12-08 11:48:21

解决方案2
-1 2020-07-23 14:07:09

在 JavaScript 脚本标签内使用 jinja2（带烧瓶）来呈现数据

问题描述

2 个解决方案

解决方案1 2 2020-12-08 11:48:21

解决方案2 -1 2020-07-23 14:07:09

解决方案1
2 2020-12-08 11:48:21

解决方案2
-1 2020-07-23 14:07:09