Question

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

初始化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([]);
};

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

1 个答案: