有没有办法使用 javascript 过滤来自 jinja2 的数据？

Question

只是我有一个来自 jinja2 的数据。我想在单击按钮时过滤数据。另一种解决方案可能是将数据传递给 javascript 变量。

为了更清晰的定义，我创建了一个示例。在这种情况下，我想删除小于 5 的数字。然后我将它们列在 html.

中

在模板中；

{% set data = [1,2, 3, 4, 5, 6, 7, 8, 9] %}
     
<ul> 
  {% for item in data %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

<button class="btn">Filter Data</button>

在脚本中

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
// filter here
}

Answer 1

最简单的解决方案是您还提供数据值作为列表项的属性，例如data-index:

{% set data = [1,2, 3, 4, 5, 6, 7, 8, 9] %}
     
<ul class="mylist"> 
  {% for item in data %}
    <li data-index="{{ item }}">{{ item }}</li>
  {% endfor %}
</ul>

<button class="btn">Filter Data</button>

然后在点击事件后循环列表项，根据el.dataset.index的值，可以移除相应的项：

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
    let items = document.querySelectorAll(".mylist li")
    Array.from(items, el => {
        if (el.dataset.index < 5) {
            el.remove()
            // Or: el.style.display = 'none'
        }
    })    
}

有没有办法使用 javascript 过滤来自 jinja2 的数据？

Is there a way to filter data from jinja2 with using javascript?

javascript

jinja2