Framework7: Löschen von Elementen eines Arrays mit swipeout

Question

Ich habe versucht, App mit Framework7 zu entwickeln.

drucke ich meine Array (Liste) auf diese Weise:

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); 

Wenn ich einen Eintrag swipeout, wird der Eintrag verschwinden, aber er ist immer noch in der Anordnung.

Dies ist das Entfernen-Ereignis zu behandeln:

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

Wie kann ich den Index des Elements erhalten sie von der Anordnung auch entfernen? Oder gibt es eine andere Möglichkeit, dieses Problem zu lösen?

Vielen Dank!

Markus

Answer 1

Wenn ich Sie wäre, würde ich eher Framework7 Ansicht Engine die swipeout Elemente und nutzen Sie die @index Helfer zu machen verwenden. Click here for further information.

In Ihrem Markup, würden Sie etwas ähnlich dazu haben:

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

Beachten Sie, dass ich zusammen mit "@index" die "jeden" Helfer bin mit dem zu machen, Elemente und legen Sie ihnen ein Attribut mit der ID. Aber man kann immer noch das gleiche Ziel erreichen, indem er mit dem "i" Variable in der for-Schleife:

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

}

Wenn das Ereignis ausgelöst wird:

$$('.swipeout').on('deleted', function() { 
    var $thisAction = $(this); 

    // Here you delete the item 
    delete list[$thisAction.data('index')]; 

    myApp.alert('Item removed'); 
}); 

In diesem Fall können Sie Verwenden Sie nicht Array.slice, denn wenn Sie Element 2 aus dem Markup löschen, ersetzt das Element mit dem Index 3 Element 2. Das Problem mit dem obigen Ansatz ist, dass Sie auf die "Löcher" in Ihrem Array achten müssen. Ein viel besserer Ansatz wäre die Verwendung eines bidirektionalen Bindungsrahmens wie VueJs.