Javascript 在可见绑定检查后执行敲除功能

我有一个列表，它在foreach循环中使用knockout呈现。我可以从列表中删除项目，为此，我使用了“淡出”效果。我通过绑定到“beforeRemove”的函数实现了这一点：

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

如果列表中没有iTen，我会显示一条消息。问题是，当我删除最后一项时，它开始淡出，但在删除该项之前会显示消息。如何仅在最后一项完全隐藏后显示此消息

jsidle:

真的没有一个优雅的方式来做到这一点。您可以添加一个附加属性，设置该属性以防止在所有动画完成之前显示消息，但这充其量只是一种黑客行为

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

---

基本上，它假设动画需要半秒钟才能完成，并且在删除消息时阻止消息是真的，并且设置为零。

我会做自定义bindingHandler，扩展foreach，类似的（）

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>

去除
你没有任何物品

我的最佳建议是以与项目淡出相同的速度淡入消息。绑定处理程序是一种很好的方法。但是，您的小提琴似乎不起作用。这对我的情况很有帮助，尽管我只需要：

ko.bindingHandlers.whenVisible={update:function（e，v，b）{if（b.get（'visible'））v（）；}

（为了注释而缩小）。