2013-04-04 4 views
0

J'ai un modèle de vue qui ressemble à ceci:KnockoutJS - événement, cliquez tir trop tôt après beforeRemove

self.selectedItems = ko.observableArray(); 

self.onBeforeUnselectItem = function (elem) { 
    if (elem.nodeType === 1) 
     $(elem).fadeOut(function() { 
      $(elem).remove(); 
     }); 
}; 

self.unselectItem = function (item) { 
    self.selectedItems.remove(item); 
    self.unSelectedItems.push(item); 
}; 

Mon point de vue ressemble à ceci:

<div data-bind="foreach: {data: selectedItems, beforeRemove: onBeforeUnselectItem}"> 
    <span data-bind="text: Name"></span> - <a href="#" data-bind="">Remove</a> 
</div> 

Mon problème est que la item est poussé dans unSelectedItems avant la fin de l'animation fadeOut.

Est-il possible d'appeler unselectItem jusqu'à ce que l'animation soit terminée?
Je sais que cela est à cause de la façon dont l'événement click est lié à unselectItem

Modifier

Pour le moment, je mets un retard dans ma unselectItem fonction:
(ce qui est évidemment pas idéal !)

self.unselectItem = function (item) { 
     self.selectedItems.remove(item); 
     setTimeout(function() { 
      self.unSelectedItems.push(item); 
     }, 350); 
    }; 

Répondre

0

Bien sûr. Vous le faites déjà pour la suppression de l'élément. Les effets jQuery et les processus de longue durée similaires s'exécutent de manière asynchrone, c'est-à-dire qu'ils n'empêchent pas les autres JS de continuer à fonctionner. C'est pourquoi fadeOut a un rappel: pour exécuter des choses une fois que le fondu est terminé. Si votre exigence est que le fondu doit terminer avant que l'élément soit ajouté à unSelectedItems, vous devez faire cela à l'intérieur de ce rappel.

+0

C'est ce que je pensais ... Donc je dois faire la suppression de l'intérieur du callback du fadeOut? – Alex

+0

Oui. S'il y avait un processus plus compliqué, vous pourriez l'extraire dans une fonction et ensuite appeler cette fonction à partir du rappel, mais ce serait probablement exagéré pour un one-liner comme ça. –