javascript - 在某些情况下忽略 foreach afterAdd 和 beforeRemove

Question

我有一个在页面加载时通过 Ajax 获取的用户数组，并使用 foreach 绑定(bind)列出它们，如下所示:

<div data-bind="foreach: { data: usersArr, 
                           afterAdd: showElement, 
                           beforeRemove: fadeRemove }">

我希望列表在页面加载时显示，没有我使用 afterAdd 对其应用的 fadeIn() 效果，并在以下情况下消失:我清空了 usersArr 数组，没有 beforeRemove 触发。

我只希望在添加新用户或删除现有用户时触发效果。

有办法实现吗？

Answer 1

在 userArr 中一次性加载所有数据，而不是一一推送它们:

viewmodel.userArr(receivedArray); //instead of viewmodel.userArr.push(newElement)

编辑

上面的方法不起作用。 afterAdd 和 beforeRemove 绑定(bind)不关心如何添加/删除元素，它们在任何情况下都会被调用。

这是一个丑陋的技巧:向您的 View 模型添加一个 allowAnimation 变量，并仅在设置时运行代码(告诉您它很丑陋):

ViewModel.prototype.showElement = function(elem, index, user) {
    if (user.allowAnimation) {
        if (elem.nodeType === 1) {
            $(elem).hide().fadeIn();
            user.allowAnimation = false;
        }
    }
};

ViewModel.prototype.fadeRemove = function(elem, index, user) {
    if (user.allowAnimation) {
        if (elem.nodeType === 1) $(elem).fadeOut(500, function() {             
            $(elem).remove(); 
            user.allowAnimation = false;
        });
    } else {
        $(elem).remove();
    }
};

ViewModel.prototype.addUser = function() {
    this.usersArr.push({name: 'bla', allowAnimation: true});
};

ViewModel.prototype.removeUser = function(user) {
    user.allowAnimation = true;
    this.usersArr.remove(user);
};

检查这个 fiddle