Framework7: Supprimer des éléments d'un tableau avec swipeout

Question

J'ai essayé de développer des applications avec Framework7.

imprimer mon tableau (liste) de cette manière:

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

Quand je swipeout une entrée, l'entrée disparaît, mais il est encore dans le tableau.

C'est de gérer l'événement supprimer:

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

Comment puis-je obtenir l'indice de l'élément pour le supprimer également du tableau? Sinon, existe-t-il un autre moyen de résoudre ce problème?

Merci!

Markus

Answer 1

Si je vous, je préfère utiliser le moteur de vue Framework7 pour rendre les éléments de swipeout et bénéficier de l'aide de @Index. Click here for further information.

Dans votre balisage, vous auriez quelque chose à ce similaire:

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

Notez que j'utilise la « chaque » aide avec « @Index » pour rendre la éléments et mettre un attribut sur eux avec l'ID. Mais vous pouvez toujours atteindre le même objectif en utilisant le « i » variable dans la boucle:

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

}

Lorsque l'événement est déclenché:

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

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

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

Dans ce cas, vous pouvez n'utilisez pas Array.slice car si vous supprimez l'élément 2 du balisage, l'élément avec l'index 3 remplacera le point 2. Le problème avec l'approche ci-dessus est que vous devez prendre soin des "trous" dans votre tableau. Une approche bien meilleure consisterait à utiliser un cadre de liaison bidirectionnel, tel que VueJs.