KnockoutJs với Jquery.tablesorter - Gây ra các hàng trùng lặp

Question

http://jsfiddle.net/nalberg/E3nBu/4/

Bất kỳ trợ giúp nào với điều này? Im nhận các hàng trùng lặp khi sử dụng: KnockoutJs: http://knockoutjs.com/ và plugin jquery.tablesorter: (http://tablesorter.com/docs/).

Về cơ bản, lần đầu tiên mọi thứ tải ... nó hoạt động rất tốt. Nhưng nếu tôi thay thế hoặc thay đổi dữ liệu liên kết với dữ liệu loại trực tiếp sau khi sắp xếp bảng ... Tôi bắt đầu nhận các hàng trùng lặp. Mỗi dường như là tạo ra và duy trì tập hợp hàng của riêng mình.

Answer 1

Tôi có giải pháp cho bạn. Nó có thể là chậm mặc dù, nhưng nó hoạt động. Giải pháp là sử dụng một mẫu và sử dụng jquery. each thay vì foreach. Đây là mã trong html:

// replace this div with the table 
<div id="peopleTemplateContainer" data-bind="{template: 'peopleTemplate' }"> 

    <script id="peopleTemplate" type="text/html"> 
    <table id="dataGrid" border="1"> 
     <thead> 
     <tr> 
     <th><b>Sortable Header (sort click me)</b></th> 
     </tr> 
     </thead> 
     <tbody > 
      {{each(index,compliance) people()}} 
     <tr > 
      <td >${data}</td> 
     </tr> 
     {{/each}} 
     </tbody> 
    </table> 
    </script> 

Answer 2

Tôi nghĩ có hai vấn đề phức tạp lẫn nhau. Trước hết bạn có một mảng quan sát được nhưng các mục bên trong của mảng không phải là ko.observable chúng chỉ là các đối tượng JS thông thường. Vì vậy, nếu bạn thay đổi các giá trị mục trong các bảng, viewmodel không được cập nhật. Thứ hai tôi nghĩ bạn nên từ bỏ plugin tablesorter và chỉ cần sắp xếp danh sách quan sát được trong loại trực tiếp và để cho các ràng buộc thực hiện công việc cho bạn. Bạn có thể tìm thông tin để sắp xếp các mảng ko.observable here.

Answer 3

1. Bạn có thể xóa mảng binded đến bảng như

   YourViewModel.list.clearAll(); 
   

2. rõ ràng nội dung bảng

   $(".gridtable").find('tbody').empty(); 
   

3. Cập nhật bảng sorter

   $(".table_border").trigger("update"); 
   

Vì vậy, chức năng tải dữ liệu của bạn có thể trông như thế này

self.Load = function() { 
    self.list.removeAll(); 
    $(".gridtable").find('tbody').empty(); 
    $.ajax('/List', { 
     data: $('#yourformname').serializeArray(), 
     global: true, 
     contentType: "application/json; charset=utf-8", 
     type: "Get", contentType: "application/json", 
     success: function (result) { 
      var mappedList = $.map(result, function (item) { return new List(item) }); 
      self.List(mappedList); 

      $(".table_border").trigger("update"); 

     } 
    }); 
};