Python Flask 模板使用 {{}} 不能混合 javascript var [重复]答案

【问题标题】：Python Flask templates use {{}} can't mix javascript var [duplicate]Python Flask 模板使用 {{}} 不能混合 javascript var [重复]
【发布时间】：2014-12-18 03:35:44
【问题描述】：

这是我的问题。 PictureLenth 是我的图片数组长度，ProductImage 是一个列表。我现在不能用我的数组地址指向 ProductImage。如何在 {{}} 上使用 javascript var？

lenth = {{ PictureLenth }}-1;
now = 0;

function t_setInterval() {
window.intervalParam = window.setInterval(function() {
var date = new Date();
   if (lenth>now)
   {now = now + 1;}
   else
   {now = 0;}
    var img = document.getElementById("image");
    img.src="data:image/png;base64, {{ ProductImage[now] }}";
    return false;
}, 4000);
}

【问题讨论】：

标签： javascript python templates flask jinja2

【解决方案1】：

这是因为 Jinja 在服务器端运行时无权访问now，而当 JavaScript 在客户端运行时，字符串是静态的，永远不会改变。解决方案是使用Flask's tojson filter 提供ProductImage 作为JavaScript 变量：

var images = {{ ProductImage | tojson | safe }},
    length = images.length - 1,
    now = 0;

function t_setInterval() {
  window.intervalParam = window.setInterval(function() {
    if (length > now) now = now + 1;
    else now = 0;
    var img = document.getElementById("image");
    img.src = "data:image/png;base64, " + images[now];
    return false;
  }, 4000);
}

【讨论】：

【解决方案2】：

lenth = {{ PictureLenth }}-1;
now = 0;

function t_setInterval() {
window.intervalParam = window.setInterval(function() {
var date = new Date();
   if (lenth>now)
   {now = now + 1;}
   else
   {now = 0;}
    var ProductImage = {{ProductImage|safe}};
    var img = document.getElementById("image");
    img.src="data:image/png;base64,"+ProductImage[now];
    return false;
}, 4000);
}

【讨论】：