Question

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

当我向外移动一个条目时，该条目将消失，但他仍然在数组中。

这是为了处理remove-event：

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

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

谢谢！

马库斯

Answer 1

如果我是你，我宁愿使用Framework7的视图引擎来渲染swipeout项目并利用@index助手。 Click here for further information.

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

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

请注意，我使用＆＃34;每个＆＃34;帮助者和＃34; @ index＆＃34;渲染项目并使用id为其添加属性。但是你仍然可以通过使用＆＃34; i＆＃34;来实现相同的目标。 for循环中的变量：

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项。上述方法的问题是您必须小心＆＃34;洞＆＃34;在你的数组中。更好的方法是使用双向绑定框架，例如VueJs。

Framework7：使用swipeout

1 个答案: