Loại bỏ - Xóa mục khỏi ViewModel không xóa khỏi DOM

Question

Tôi có một kiểu xem có chứa một tập hợp các đối tượng, 'Tệp'.

Rõ ràng điều này bị ràng buộc với DOM.

Khi tôi xóa một mục khỏi bộ sưu tập 'Tệp', tôi dự kiến ​​DOM sẽ được cập nhật để phản ánh điều này, nhưng nó không cập nhật.

Đây là JS mà tôi sử dụng để xóa mục khỏi bộ sưu tập 'Tệp'.

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

Nếu tôi in theo chiều dài của bộ sưu tập để giao diện điều khiển sau khi gọi Delete (id), tôi có thể thấy rằng một mục đã được gỡ bỏ.

Vậy tại sao DOM không cập nhật?

Nếu tôi gọi ko.applyBindings (... sau đó nó không cập nhật, nhưng hiểu biết của tôi là tôi không cần phải gọi đây là mỗi khi cập nhật xem mô hình.

Vì vậy, những gì tôi có thể ? làm sai

Ngoài ra, tôi đã thử nó với tập tin như một observableArray và một mảng tiêu chuẩn, mà không cần bất kỳ sự khác biệt

UPDATE:. đây là định nghĩa của mô hình view (cũng ... có liên quan một phần, 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); 

    ... 
} 

Tôi cũng đã thử nó với

self.Files = []; 

và sau đó thay đổi tất cả các thể hiện của tập tin() để chỉ Files. Không khác nhau.

Answer 1

Bạn cần có những mảng quan sát:

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

nhưng bạn cần phải gọi splice trực tiếp trên mảng quan sát được với 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); 

nếu không bạn loại bỏ các mục hình thành các mảng tiềm ẩn mà không KO biết về việc loại bỏ để nó không thể cập nhật DOM. Xem thêm phần documenation Manipulating an observableArray.

Bằng cách này các observableArray có chức năng remove mà có thể đơn giản hóa rất nhiều mã của bạn:

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