javascript - Knockout js - beforeRemove 动画，同时将项目添加到可观察数组

Question

我在 knockout js 和将可观察数组显示为列表时遇到问题；在 beforeRemove 动画运行时添加项目时，被移除的元素将移动到列表的底部，而不是停留在其位置，直到动画结束并且元素被移除。

这里有一个 jsfiddle 可以更好地解释这个问题:http://jsfiddle.net/bPP5Q/8/

有人知道我怎么解决这个问题吗？

JavaScript:

jQuery(function ($) {
    var ViewModel = function (data) {
        var self = this;
        self.data = ko.observableArray(data);
        self.removeLine = function (elem) {
            if (elem.nodeType === 1) $(elem).fadeOut(3000, function () {
                $(elem).remove();
            });
        }

        self.addLine = function (elem) {
            if (elem.nodeType === 1) 
                $(elem).hide().fadeIn(3000);
        }

        self.removeItem = function() {
            self.data.remove(function(item) { return item.test && item.test == 2; });   
        }

        self.addItem = function() {
            self.data.splice(1, 0, { test: 9 }); 
        }

        self.addremove = function () {
            self.removeItem();
            var id = setInterval(function() {
                self.addItem();
                clearInterval(id);
            },1000);
        }
    }

    var vm = new ViewModel([{ test: 9 }, { test: 2 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }]);

    ko.applyBindings(vm);
});

HTML:

<button id="button" data-bind="click: addremove">Click</button>
<table id="grid">
    <tbody data-bind='template: { foreach: data, afterAdd: addLine, beforeRemove: removeLine }'>
        <tr>
            <td data-bind="text: test"></td>
            <td>

            </td>
        </tr>
    </tbody>
</table>

Answer 1

您的函数“addItem”在 1 秒后执行(setInterval 1000 毫秒)，因此“self.data”包含一个新元素，而动画淡出尚未完成(这需要 3000 毫秒)。这说明了您的问题。

要解决此问题，您必须为“addItem”设置与“淡出”相同的间隔，例如，它是 3000。代码变为:

jQuery(function ($) {
    var ViewModel = function (data) {
        var self = this;
        self.data = ko.observableArray(data);
        self.removeLine = function (elem) {
            if (elem.nodeType === 1) $(elem).fadeOut(3000, function () {
                $(elem).remove();
            });
        }

        self.addLine = function (elem) {
            if (elem.nodeType === 1) 
                $(elem).hide().fadeIn(3000);
        }

        self.removeItem = function() {
            self.data.remove(function(item) { return item.test && item.test == 2; });   
        }

        self.addItem = function() {
            self.data.splice(1, 0, { test: 9 }); 
        }

        self.addremove = function () {
            self.removeItem();
            var id = setInterval(function() {
                self.addItem();
                clearInterval(id);
            },3000); // the same interval as the "fadeout"
        }
    }

    var vm = new ViewModel([{ test: 9 }, { test: 2 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }, { test: 1 }]);

    ko.applyBindings(vm);
});