Framework7：スワイプアウトで配列の項目を削除する

Question

Framework7で開発してみました。

私はこのように私の配列（リスト）を印刷：私はエントリをswipeoutとき

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-イベントを処理することです：

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

にはどうすればいいの要素のインデックスが配列からも、それを削除するために得ることができますか？ また、この問題を解決する別の方法がありますか？

ありがとうございました！

マルクス

Answer 1

私があなただったら、私はむしろswipeoutアイテムをレンダリングし、@Indexヘルパーを利用するためにFramework7のビューエンジンを使用すると思います。あなたのマークアップでClick here for further information.

、あなたはこれに似何かがあるだろう：私はレンダリングするために、「@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}} 

お知らせアイテムに属性を付け、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のような双方向バインディングフレームワークを使うことです。