如何使用Flask / Jinja2连续渲染项目？

Question

我试图循环浏览应用程序前端的变量列表。 唯一需要注意的是，我希望变量循环显示一次显示一个变量的列表。 我该如何实现？ Jinja2中有一些功能可以让您执行此操作吗？

  <div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger">{{x}} alligators in the pool!</span>
    {% end for %}
  </div>

照原样，该代码段将为列表中的每个元素绘制一行。 相反，我想在各个地方进行循环。 垂直的CSS如下所示：

  .vert-al{
  vertical-align:middle;
  margin-bottom: 1rem;
  margin-top: 1rem;
  }

淡入和淡出变量的Javascript：

  setInterval(function(){ $(".badge-danger").fadeOut(2100); $(".badge-danger").fadeIn(900); }, 3000); 

我不确定是否要使用python / jinja或更多js / css路由解决此问题，所以任何指导都将非常有帮助！

Answer 1

当页面加载时，Jinja将只渲染一次变量。 如果要循环浏览它们，则必须确保它们都在那里。 然后，您可以使用JS显示/隐藏它们。

也许是这样的：

<div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger" id="gator-{{x}}" style="display:none">{{x}} alligators in the pool!</span>
    {% end for %}
</div>

然后：

for (var i = 0; i < num_gators; i++) {
 document.getElementById("gator-" + i).fadeIn(900);
}

注意：不确定该Javascript，但是您知道了。