0

我尝试使用 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');
});

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

谢谢！

马库斯

4

1 回答 1

0

如果我是你，我宁愿使用 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。

于 2016-06-14T14:00:35.117 回答