2012-01-17 9 views
5

http://jsfiddle.net/nalberg/E3nBu/4/KnockoutJs con Jquery.tablesorter - hacer que las filas de duplicado

Cualquier ayuda con esto? Recibo filas duplicadas cuando uso: KnockoutJs: http://knockoutjs.com/ y el complemento jquery.tablesorter: (http://tablesorter.com/docs/).

Básicamente, la primera vez que todo se carga ... funciona muy bien. Pero si reemplazo o cambio los datos vinculados a los datos de desactivación después de ordenar la tabla ... empiezo a obtener filas duplicadas. Cada uno parece estar creando y manteniendo su propio conjunto de filas.

Respuesta

0

Tengo una solución para usted. Aunque puede ser lento, funciona. La solución es usar una plantilla y usar jquery. each en lugar de foreach. Aquí está el código en 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> 
1

Creo que hay dos problemas que están agravando el uno al otro. En primer lugar, tiene una matriz observable, pero los elementos que se encuentran dentro de la matriz no son observables, sino que son solo objetos normales de JS. Por lo tanto, si cambia los valores de los elementos en las tablas, el modelo de vista no se actualizará. En segundo lugar, creo que debes renunciar al plugin de tablesorter y simplemente ordenar la lista observable en knockout y dejar que los enlaces hagan el trabajo por ti. Puede encontrar la información para ordenar las matrices ko.observable here.

+0

En mi ejemplo (Voy a mirar en poner un violín arriba) Nunca voy a cambiar los objetos dentro de la matriz, únicamente cambiando los elementos que son miembros de la matriz que está cubierta por la matriz observable. Ordenar por KO es una buena idea, pero sería mucho código implementarlo exactamente como lo hace tableSorter. – Arbiter

+0

Por favor, publique su violín. Clasificar Knockout es bastante fácil de lograr. – PlTaylor

+0

Para implementar todas las características de tableSorter, como poder ordenar columnas arbitrarias (¿y si tengo docenas de columnas?), Ordenar en varias columnas simultáneamente usando shift + clic, algoritmos de clasificación personalizados, etc. sería mucho código. Es posible crear un observable calculado para el resultado ordenado, pero sería una tonelada de código para acomodar todo esto. Sé cómo resolver este problema (torpemente) con Knockout, quiero saber cómo resolver el problema con tableSorter. – Arbiter

2
  1. Puede borrar gama enganchan a la mesa como

    YourViewModel.list.clearAll(); 
    
  2. Claro mesa de cuerpo

    $(".gridtable").find('tbody').empty(); 
    
  3. actualización de la tabla clasificadora

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

lo tanto, su función de carga de datos puede tener este aspecto

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

     } 
    }); 
}; 
Cuestiones relacionadas