Knockout - 从ViewModel中删除项目不会从DOM中删除

Question

我有一个视图模型,其中包含一组对象,'文件'.

显然这与DOM绑定在一起.

当我从'Files'集合中删除一个项目时,我希望更新DOM以反映这一点,但它不会更新.

这是我用来从'Files'集合中删除项目的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([]);

但你需要splice直接在可观察数组上调用this.Files.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.另请参阅操作observableArray部分的文档.

顺便说一句,observableArray有一个remove可以大大简化代码的函数:

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