在某些情况下，忽略add之后和remove之前的foreach

Ignore foreach afterAdd and beforeRemove in certain situations

本文关键字：remove foreach 之后 add 情况下 忽略      更新时间：2023-09-26

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

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

我希望列表显示在页面加载没有的fadeIn()效果，我使用afterAdd应用于它，并在我清空usersArr数组时消失，没有beforeRemove射击。

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

有办法做到这一点吗?

在userArr中一次加载所有数据，而不是逐个推送:

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

编辑

上面的

不起作用。afterAdd和beforeRemove绑定不关心如何添加/删除元素，它们在任何情况下都将被调用。

这是一个丑陋的技巧:添加一个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);
};

检查提琴

相关文章：