Question

我有一个example，我在其中使用KnockoutJS渲染项目列表。

每次向ko.observableCollection添加或删除新项目时，系统会自动触发一项功能以重置所有项目位置。

为了达到这个目的，我订阅了ko.observableCollection来触发“reArrangeTiles”函数：

this.reArrangeTiles = function () {
    window.setTimeout(function () {
        self.$('.grid').each(function () {
            self.$('.tile[tileid=' + $(this).attr('tileid') + ']').animate($(this).position(), {duration: 500, queue: false});
        });
    }, 500);
};

ko.observableCollection中的每个项目都呈现两次，如“float：left”和“position：absolute”。 “float：left”是不可见的，其目的是标记需要移动“position：absolute”项目的位置。

问题是我需要在500毫秒的超时时间内重新安排逻辑，因为我需要等待KnockoutJS完成呈现更改才能获得更新的位置。

有人知道比使用超时更好的方法吗？

由于

Answer 1

我想我想出来了。

使用“afterAdd”和“beforeRemove”回调我可以在适当的时刻触发“reArrangeTiles”。

这里重要的一点是，当使用“beforeRemove”绑定时，需要显式删除相应的节点。删除节点后，我可以调用“reArrangeTiles”函数：

this.hideTile = function (elem) {
    if (elem.nodeType === 1) {
        $(elem).fadeOut(function () {
            $(elem).remove();
            self.reArrangeTiles();
        });
    }
};

更新了example

KnockoutJS：确定对“ko.observableCollection”的更改何时完成呈现/更新视图

1 个答案: