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

当页面加载时，我通过Ajax获得了一系列用户，我使用

foreach

绑定列出了这些用户，如下所示：

我希望列表在页面加载时显示，而不显示我使用

afterAdd

对其应用的

fadeIn（）

效果，并在清空

usersArr

数组时消失，而不显示

beforemove

触发

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

---

有没有办法做到这一点？

在

userArr

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

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

编辑 上述方法不起作用。添加后和删除前绑定不关心如何添加/删除元素，在任何情况下都会调用它们

下面是一个难看的技巧：将

allowAnimation

变量添加到viewmodel中，并仅在设置后运行代码（告诉您它难看）：

---

检查此

是否在加载时一个接一个地推送元素？我尝试过，但似乎没有任何区别，尽管我认为这确实有助于提高性能，因此我将在稍后进行研究。这里有一个小提琴可以更好地说明我遇到的问题：-试着点击顶部的“一次加载所有文件”按钮多次。这就是我在用户页面之间切换时发生的情况。我清除旧数据以引入新的userArr。@Norbert举个例子总是比较容易。更新答案。这应该是可行的，但不是很漂亮：（另一个选项是在按钮的

单击

事件上添加动画，而不是

foreach

绑定。对于删除来说效果很好。但添加时是另一回事

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