删除最后一个元素时,ko observable数组不会触发

Question

我有一个元素的地图,显示当前正在加载的图层.我在一个knockout observable数组中保存了一个层名列表.加载新图层时,它们会按预期显示.当图层完成加载时,它们将按预期移除,但最后一个除外.即使调试显示它绑定的列表现在为空,也不会删除它.

要初始化可观察量:

self.currentlyLoadingLayers = ko.observableArray([]);

什么时候加载图层:

self.layerLoadingStarted(layerName);

加载图层时触发的事件:

layer.events.register('loadend', layer, function () {
    self.layerLoadingFinished(layerName);
});

以及被调用的函数:

self.layerLoadingStarted = function (layerName) {
    self.currentlyLoadingLayers.push(layerName);
};

self.layerLoadingFinished = function(layerName) {
    for (var i = self.currentlyLoadingLayers().length - 1; i >= 0; i--) {
        if (self.currentlyLoadingLayers()[i] === layerName) {
            self.currentlyLoadingLayers().splice(i, 1);
        }
    }
    //if (self.currentlyLoadingLayers().length === 0) self.currentlyLoadingLayers([]);
};

如果我取消注释上面函数中的最后一行,那么一切正常.为什么需要这个？不应该自动观察阵列现在为空的事实吗？

我的绑定:

<div id="layersLoadingMessage" data-bind="visible: $root.currentlyLoadingLayers() && $root.currentlyLoadingLayers().length">
    <div data-bind="foreach: $root.currentlyLoadingLayers">
        <div data-bind="text: $data"></div>
    </div>
</div>

Answer 1

当observableArray添加或删除某个项目时,或者如果更换整个集合,Knockout将通知订阅者.但只有通过observableArray对象完成而不是直接操作底层数组.

所以这将通知订阅者:

self.currentlyLoadingLayers.splice(i, 1)

这不会:

self.currentlyLoadingLayers().splice(i, 1)

这将:

self.currentlyLoadingLayers([])

请查看observableArray的文档.

我在您的代码中添加了一些注释,但有一些解释:

self.layerLoadingFinished = function(layerName) {
    for (var i = self.currentlyLoadingLayers().length - 1; i >= 0; i--) {
        if (self.currentlyLoadingLayers()[i] === layerName) {
            //this line modifies the underlying array directly bypassing ko's notifiers
            //change this to self.currentlyLoadingLayers.splice(i, 1)
            //to notify subscribers after each item is removed
            self.currentlyLoadingLayers().splice(i, 1);
        }
    }
    //this line uses self.currentlyLoadingLayers([]) which changes 
    //the underlying array through ko and will notify subscribers
    if (self.currentlyLoadingLayers().length === 0) self.currentlyLoadingLayers([]);
};