8

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

显然，这是绑定到 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() 的每个实例更改为文件。没有不同。

4

1 回答 1

8

你需要有可观察的数组：

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

但您需要splice直接调用 observable 数组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);
于 2013-04-30T15:43:43.850 回答