javascript引用jinja2模板中的变量和参数

一、JS引用Jinja2模板的变量

直接到js中，使用{{ 变量名 }} 即可

二、JS引用jinja2模板的参数

jinja2模板的html 页面接收参数 通过 {{ docontent.title }} 加载变量 
1、js 如果是和html 文件在一起的话，js文件调用参数，代码：

var daer= {{ docontent.content|tojson }}
console.log(daer)
$(".docontent").html(daer)

2、js和html 分开的，是单独文件，在html头部添加：

<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var Server = {
docontent:{{ docontent.content|tojson }}
};
</script>

js 文件中 ，代码如下：

var daer= Server.docontent
console.log(daer)
$(".docontent").html(daer)

3、如果数据库中是通过富文本编辑器存储的文件，带有标签元素，实现文章怎么编辑，页面怎么渲染的：

首先是要数据库中要保存html的标签元素，然后通过 tojson 过滤器实现和html()，加载文章的内容，
不可通过text() 加载内容。

三、示例一

python文件，视图函数

import json 
 
 @ app.route（'/'）
 def my_view（）：
 data = [1，'foo'] 
 return render_template（' index.html'，data = json.dumps（data））

jinja2 模板

 

  {％ for item in data ％} 
< span onclick = someFunction（{{item | safe}}）;> { {item}}< / span> 
 {％ endfo r％} 
  

 

js文件，或者jinja2模板中的js代码

 < script type =“text / javascript”> 
 function test_func（data）{
 console.log（data）; 
} 
 test_func（{{data | safe}}）
< / script> 

 

示例二：

1.jinja2模板

<script src="js/index2.js"></script>
<script>
  graphData({{GraphData}});
</script>

 

js文件

function graphData(gd) {
  var chart = AmCharts.makeChart("chartdiv", {
    "graphs": [{
    "id": "g3",
    "valueAxis": "v1",
    ...
    }],
    "Data" = gd  
  });
}

 

示例三：

jinja2模板

<script src="js/index2.js" value = {{GraphData}}></script>

var chart = AmCharts.makeChart("chartdiv", {
  "graphs": [{
  "id": "g3",
  "valueAxis": "v1",
  ...
  }],
  "Data" = {{GraphData}}  
})
function graphData(gd) {
  var chart = AmCharts.makeChart("chartdiv", {
    "graphs": [{
    "id": "g3",
    "valueAxis": "v1",
    ...
    }],
    "Data" = gd  
  });
}