Question

我有一个正在使用knockout在foreach循环中呈现的列表。我可以从列表中删除项目，对于doind，我正在使用“fadeOut”效果。我用这个绑定到'beforeRemove'的函数实现了这个目的：

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

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

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

Answer 1

我会自定义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>

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

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

可见绑定检查后的Knockout执行功能

2 个答案: