淘汰赛 - 从 ViewModel 中删除项目不会从 DOM 中删除

Question

我有一个包含对象集合“文件”的视图模型。

显然这是绑定到 DOM 的。

当我从“文件”集合中删除一个项目时，我希望 DOM 会更新以反映这一点，但它不会更新。

这是我用于从“文件”集合中删除项目的 JS。

this.Delete = function(id) {
    for (var f = 0; f < this.Files.length; f++) {
        if (this.Files[f].ID() == id) {
            this.Files.splice(f, 1);
        }
    }
}.bind(this);

如果我在调用 Delete(id) 后将集合的长度打印到控制台，我可以看到一个项目已被删除。

那么为什么 DOM 没有更新呢？

如果我调用 ko.applyBindings(... 那么它确实会更新，但我的理解是我不应该在每次视图模型更新时都调用它。

那么我可能做错了什么？

另外，我已经尝试将 Files 作为 observableArray 和标准数组，没有任何区别。

更新：这是视图模型的定义（嗯...相关部分，无论如何）

function Files(files) {

    var self = this;

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

    this.Delete = function(id) {
        // find which index the specified ID exists at
        for (var f = 0; f < this.Files().length; f++) {
            if (this.Files()[f].ID() == id) {
                this.Files().splice(f, 1);
            }
        }
    }.bind(this);

    ...
}

我也试过了

self.Files = [];

然后将 Files() 的每个实例更改为文件。没有区别。

Answer 1

你需要有可观察的数组：

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

但您需要使用this.Files.splice 直接在可观察数组上调用splice：

this.Delete = function(id) {
    // find which index the specified ID exists at
    for (var f = 0; f < this.Files().length; f++) {
        if (this.Files()[f].ID() == id) {
            this.Files.splice(f, 1);
        }
    }
}.bind(this);

否则，您在 KO 不知道删除的情况下从底层数组中删除项目，因此它无法更新 DOM。另请参阅文档Manipulating an observableArray 部分。

顺便说一下，observableArray 有一个remove 函数，可以大大简化你的代码：

this.Delete = function(id) {
    this.Files.remove(function(item) { return item.ID() == id; } );        
}.bind(this);