Framework7:使用swipeout删除数组中的项

Framework7: Delete items of an array with swipeout

本文关键字：数组 删除 使用 swipeout Framework7      更新时间：2023-09-26

我尝试过使用Framework7开发应用程序。

我以这种方式打印我的数组（列表）：

if (list != null){
    for (var i=0; i<list.length; i++){
    output = output + '<li class="swipeout"><div class="item-content swipeout-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">' + list[i].name + '</div></div><div class="item-subtitle">' + new Date(list[i].fDate).toLocaleDateString() + '</div></div></div><div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div></li>';
    }
}
$$('#liste').html(output);

当我刷出一个条目时，该条目将消失，但他仍在数组中。

这是为了处理删除事件：

$$('.swipeout').on('deleted', function () {
  myApp.alert('Item removed');
});

如何获取元素的索引以将其也从数组中删除？或者，有其他方法可以解决这个问题吗？

谢谢！

Markus

如果我是你，我宁愿使用Framework7的视图引擎来渲染刷出项目，并利用@index助手。单击此处了解更多信息。

在你的标记中，你会有类似的东西：

<div class="list-block">
 <ul>
{{#each item in list}}
<li class="swipeout">
  <!-- Usual list element wrapped with "swipeout-content" -->
  <div class="swipeout-content">
    <!-- Your list element here -->
    <div class="item-content">
      <div class="item-media">...</div>
      <div class="item-inner">...</div>
    </div>
  </div>
  <!-- Swipeout actions right -->
  <div class="swipeout-actions-right">
    <!-- Swipeout actions links/buttons -->
    <a href="#" data-index={{@index}}>Action 1</a>
    <a class="swipeout-close" href="#" data-index={{@index}}>Action 2</a>
  </div>
</li>
{{/each}}

请注意，我正在使用"each"辅助对象和"@index"来呈现项目，并在其上放置带有id的属性。但是，通过在for循环中使用"I"变量，仍然可以实现相同的目标：

if (list != null){
for (var i=0; i<list.length; i++){
output = output + '<li class="swipeout"><div class="item-content swipeout-content"><div class="item-inner"><div class="item-title-row"><div class="item-title">' + list[i].name + '</div></div><div class="item-subtitle">' + new Date(list[i].fDate).toLocaleDateString() + '</div></div></div><div class="swipeout-actions-right"><a href="#" class="swipeout-delete" data-index='+i+'>Delete</a></div></li>';
}

}

触发事件时：

$$('.swipeout').on('deleted', function () {
  var $thisAction = $(this);
  // Here you delete the item 
  delete list[$thisAction.data('index')];
  myApp.alert('Item removed');
});

在这种情况下，不能使用Array.slice，因为如果从标记中删除项2，则索引为3的元素将替换项2。上述方法的问题在于，您必须注意阵列中的"洞"。更好的方法是使用双向绑定框架，例如VueJs。

相关文章：