可见绑定检查后敲除执行功能答案

【问题标题】：Knockout execute function after visible binding check可见绑定检查后敲除执行功能
【发布时间】：2014-09-29 15:49:06
【问题描述】：

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

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

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

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

【问题讨论】：

我最好的建议是以与项目淡出相同的速度淡入消息。它应该看起来更自然。

标签： javascript knockout.js

【解决方案1】：

我会做自定义 bindingHandler，扩展 foreach，类似的东西 (http://jsfiddle.net/v2774x0f/5/)

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()(); }（为了评论而缩小）。

【解决方案2】：

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

确实没有一种优雅的方式可以做到这一点。您可以添加一个额外的属性来设置以防止在所有动画完成之前显示消息，但这充其量是hacky

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

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

【讨论】：