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。另请参阅文档Manipulating an observableArray部分。

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

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

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

1 个答案: