Danh sách làm mới sau khi cuộc gọi ajax với Knockout JS

Question

Tôi có một danh sách các phần đính kèm trên một trang được tạo bằng cách sử dụng cuộc gọi JS $.ajax và Knockout JS.

HTML của tôi trông giống như (điều này được rút gọn lại):

<tbody data-bind="foreach: attachments"> 
    <tr> 
    <td data-bind="text: Filename" /> 
    </tr> 
</tbody> 

Tôi có một chức năng mà được danh sách các file đính kèm mà được trả lại như một phản ứng JSON:

$(function() { 
    getFormAttachments(); 
}); 

function getAttachments() { 
    var request = $.ajax({ 
    type: "GET", 
    datatype: "json", 
    url: "/Attachment/GetAttachments" 
    }); 

    request.done(function (response) { 
    ko.applyBindings(new vm(response)); 
    }); 
} 

xem mô hình của tôi trông giống như:

function vm(response) { 
    this.attachments = ko.observableArray(response); 
}; 

Có nút làm mới mà người dùng có thể nhấp để làm mới danh sách này bởi vì qua file đính kèm thời gian có thể đã được thêm vào/loại bỏ:

$(function() { 
    $("#refresh").on("click", getAttachments); 
}); 

Hình dựng ban đầu của danh sách các file đính kèm là tốt, tuy nhiên khi tôi gọi getAttachments một lần nữa thông qua các nút refresh nhấp danh sách sẽ được thêm vào (trong thực tế mỗi mục là nhân đôi nhiều lần).

Tôi đã tạo một jsFiddle để chứng minh vấn đề này ở đây:

http://jsfiddle.net/CpdbJ/137

Tôi đang làm gì sai?

Answer 1

Đây là một câu đố sửa mẫu của bạn. Vấn đề lớn nhất của bạn là bạn đã gọi 'applyBindings' nhiều lần. Nói chung, bạn sẽ gọi applyBindings khi tải trang và sau đó trang sẽ tương tác với View Model để làm cho Knockout làm mới các phần của trang của bạn.

http://jsfiddle.net/CpdbJ/136

html

<table> 
    <thead> 
     <tr><th>File Name</th></tr> 
    </thead> 
    <tbody data-bind="foreach: attachments"> 
     <tr><td data-bind="text: Filename" /></tr> 
    </tbody> 
</table> 
<button data-bind="click: refresh">Refresh</button> 

javascript

$(function() { 
    var ViewModel = function() { 
    var self = this; 

    self.count = 0; 
    self.getAttachments = function() { 
     var data = [{ Filename: "f"+(self.count*2+1)+".doc" }, 
        { Filename: "f"+(self.count*2+2)+".doc"}]; 
     self.count = self.count + 1; 
     return data; 
    } 

    self.attachments = ko.observableArray(self.getAttachments()); 

    self.refresh = function() { 
     self.attachments(self.getAttachments());   
    } 
    }; 

    ko.applyBindings(new ViewModel()); 
}); 

-

Bạn cũng có thể muốn xem xét các plugin mapping - http://knockoutjs.com/documentation/plugins-mapping.html. Nó có thể giúp bạn chuyển đổi JSON thành dạng xem. Ngoài ra, nó có thể gán một thuộc tính làm "khóa" cho một đối tượng ... điều này sẽ được sử dụng để xác định các đối tượng cũ và mới trên ánh xạ tiếp theo.

Đây là một fiddle tôi đã viết một thời gian trở lại để chứng minh một ý tưởng tương tự:

http://jsfiddle.net/wgZ59/276

Chú ý: Tôi sử dụng 'cập nhật' như là một phần của quy tắc ánh xạ của tôi, nhưng chỉ để tôi có thể đăng nhập vào giao diện điều khiển. Bạn chỉ cần thêm điều này nếu bạn muốn tùy chỉnh cách các đối tượng cập nhật plugin ánh xạ.