是否可以将 Jinja2 中的变量传递给 Javascript 中的函数而不用在 HTML 中写入 <script>？

Question

我在课程项目中使用 Flask。我在 static 和 templates 文件夹中有一些 javascript 和 HTML 文件，层次结构如下所示：

/flask_project
-->/run.py
-->/templates
  -->/index.html
-->/js
  -->/chart.js

chart.js中有一个函数可以画图，我需要将我的python代码中的一些数据传递给这个函数。

@app.route('/index')
    def index():
        data=[1,2,3,4,5,6]
        return render_template('index.html',data=data)

在我的 index.html 中，我有

<script src="{{url_for('static',filename='chart.js')}}"></script>

在我的chart.js中我有一个函数

draw(data){...}

我想将我的数据传递给这个函数，但是如果我在 .js 文件中添加 var data={{data}}，它会给我一个错误。

我知道如果我在 index.html 文件中将代码从 .js 复制到 <scripts></scripts> 会起作用，但是它很长并且会使 HTML 文件看起来很难看.

那么有什么方法可以将变量直接从 jinja2 传递到 javascript？就像在 index.html?

中调用函数 draw({{data}})

Answer 1

我看到两种方式：

a) 通过 Jinja 将数据呈现为数据属性并通过 Javascript 读取它，参见 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

b) 通过 Javascript 调用您的后端并检索数据；在早期，这是通过 jQuery.ajax(); 完成的；现在你可能会使用纯 Javascript

中的 fetch API

Answer 2

根据 Flask's documentation，尝试将 |tojson 添加到您的 Jinja 代码中。

chart.js

var data = {{data|tojson}}
draw(data){...}

我没有尝试过运行你的代码，但如果立即使用此方法不起作用，请尝试从你的端点发送 data 作为 JSON。

Is it possible to pass variables from Jinja2 to function in Javascript without writing <script> in HTML?