I have a view model which contains a collection of objects, 'Files'.

Obviously this is bound to the DOM.

When I remove an item from the 'Files' collection I would expect the DOM to be updated to reflect this, but it doesn't update.

This is the JS that I use for removing an item from the 'Files' collection.

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);

If I print the length of the collection to the console after calling Delete(id), I can see that an item has been removed.

So why does the DOM not update?

If I call ko.applyBindings(... then it does update, but my understanding is that I shouldn't have to call this every time the view model updates.

So what might I be doing wrong?

Also, I've tried it with Files as an observableArray and a standard array, without any difference.

UPDATE: here's the definition of the view model (well... the relevant part, anyway)

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);

    ...
}

I've also tried it with

self.Files = [];

and then changing every instance of Files() to just Files. No difference.

Edit
Report