KnockoutJs с Jquery.tablesorter - вызывая дублирование строк - PullRequest
Новая
       16

KnockoutJs с Jquery.tablesorter - вызывая дублирование строк

5 голосов
/ 17 января 2012

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

Помогите ли вы с этим?Я получаю дубликаты строк при использовании: KnockoutJs: http://knockoutjs.com/ и плагина jquery.tablesorter: (* http://tablesorter.com/docs/).

По сути, в первый раз, когда все загружается ... это прекрасно работает. Но если я заменю или изменюданные, привязанные к данным выбивки после сортировки таблицы ... Я начинаю получать повторяющиеся строки. Кажется, что каждая создает и поддерживает свой собственный набор строк.

Ответы [ 3 ]

2 голосов
/ 08 октября 2013

  1. Вы можете очистить массив, связанный с таблицей, например 

    YourViewModel.list.clearAll();

  2. Очистить корпус стола 

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

  3. Обновление сортировщика таблиц 

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

Так что ваша функция загрузки данных может выглядеть следующим образом 

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

        }
    });
};
1 голос
/ 19 июня 2012

Я думаю, что есть две проблемы, которые составляют друг друга.Во-первых, у вас есть наблюдаемый массив, но элементы внутри массива не ko.observable, это просто обычные объекты JS.Поэтому, если вы измените значения элементов в таблицах, модель представления не будет обновлена.Во-вторых, я думаю, что вы должны отказаться от плагина tableorter и просто отсортировать наблюдаемый список в нокауте, и пусть привязки сделают всю работу за вас.Вы можете найти информацию для сортировки массивов ko.observable здесь .

0 голосов
/ 01 июня 2012

У меня есть решение для вас.Это может быть медленно, но это работает.Решение - использовать шаблон и использовать jquery.each вместо foreach.Вот код в 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>
...