PythonFlask模板使用{{}}不能混合javascrip

Question

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

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);
}

Answer 1

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);
}

Answer 2

这是因为Jinja在服务器端运行时不能访问now，当JavaScript在客户端运行时，字符串是静态的，永远不会改变。解决方案是使用Flask's ^{} 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);
}