可見綁定檢查後敲除執行功能

Question

我有一個列表，正在與敲除foreach循環內呈現。我可以從列表中刪除項目，對於doind，我使用「fadeout」效果。我用這個功能綁定到「beforeRemove」實現了這個：

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

我有一條消息，顯示了，如果我沒有在名單上的任何itens。問題是，當我刪除最後一個項目時，它開始淡出，但消息顯示在項目被刪除之前。如何僅在最後一項完全隱藏後才顯示此消息？

的jsfiddle：http://jsfiddle.net/v2774x0f/

Answer 1

http://jsfiddle.net/v2774x0f/1/

真的沒有一個優雅的方式來做到這一點。您可以添加時設置，以防止顯示，直到所有動畫完成的消息的附加屬性，但是這是哈克充其量

self.removing = ko.observable(); 
self.list.subscribe(function (newValue) { 
    if (newValue.length ===0) { 
     self.removing(true); 
     setTimeout(function() { self.removing(false); }, 500); 
    } 
}); 

基本上它是假設的動畫需要半秒來完成，並防止您的信息，同時消除是真，它被設置爲零。

Answer 2

我會做定製bindingHandler，延長的foreach，類似的東西（http://jsfiddle.net/v2774x0f/5/）

JS

o.bindingHandlers.myForeach = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     if (valueAccessor().data().length) 
      $(valueAccessor().emptyElement).hide(); 
     ko.bindingHandlers['foreach']['init'].apply(null, arguments); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var args = arguments,$el = $(valueAccessor().emptyElement); 
     if (!valueAccessor().data().length) { 
      setTimeout(function() { 
      $el.fadeIn(); 
      },500); 
     } else { 
      if (!$el.is(':visible')) 
       ko.bindingHandlers['foreach']['update'].apply(null, args); 
      else { 
       $el.fadeOut(function() { 
        ko.bindingHandlers['foreach']['update'].apply(null, args); 
       }); 
      } 
     } 

    } 
}; 

HTML

<div data-bind="myForeach: {data: list, beforeRemove: fade,emptyElement:'#listEmpty' }"> 
    <li data-bind="text: name"></li> 
    <button data-bind="click: $root.remove">remove</button> 

</div> 
<div id='listEmpty'> 
    You don't have any items 
</div>