javascript - Python Flask 模板使用 {{}} 不能混合 javascript var

Question

这是我的问题。 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);
}

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