Framework7:使用swipeout

时间:2016-05-10 21:40:57

标签: javascript arrays swipe-gesture html-framework-7

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

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

谢谢!

马库斯

1 个答案:

答案 0 :(得分:0)

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