Question

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

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

我希望列表显示在页面加载上，而不是我使用fadeIn()应用的afterAdd效果，并在我清空usersArr时消失数组，没有beforeRemove触发。

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

有没有办法实现这个目标？

Answer 1

在userArr中一次加载所有数据，而不是一个一个地推送它们：

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

修改

以上不起作用。 afterAdd和beforeRemove绑定不关心如何添加/删除元素，无论如何都会调用它们。

这是一个丑陋的伎俩：将allowAnimation变量添加到您的viewmodel并仅在设置时运行代码（告诉您它很难看）：

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

在某些情况下，忽略foread afterAdd和beforeRemove

1 个答案:

修改