Question

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

firstUpdated() {
              var shadow = this.shadowRoot;
              var observer = new MutationObserver(function(mutations) {
                  mutations.forEach(function(mutation) {
                      console.log(mutation);
                  });
              });

// configuration of the observer:
              var config = { attributes: true, childList: true, characterData: true, subtree: true }

// pass in the target node, as well as the observer options
              observer.observe(shadow, config);
          }

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

  <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>

使变量渐入渐出的Javascript：

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

我不确定是否要使用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，但是您知道了。

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

1 个答案: