表未更新（带有 Knockout 的 tableSorter）答案

【问题标题】：Table not updating (tableSorter with Knockout )表未更新（带有 Knockout 的 tableSorter）
【发布时间】：2016-09-02 21:38:10
【问题描述】：

我编写代码以每 5 秒更新一次表格。

我使用了带有 knocknot 的表格分拣机.... 数据在第一次迭代时加载完美，之后数据被附加到以前的数据..而不是更新..

这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script src="scripts/knockout-3.4.0.js"></script>
    <script src="scripts/knockout.mapping-latest.js"></script>
    <link href="scripts/tableSorter/theme.blue.css" rel="stylesheet" />
    <script src="scripts/tableSorter/jquery.tablesorter.js"></script>
        <script src="https://cdn.jsdelivr.net/tablesorter/2.17.4/js/widgets/widget-scroller.js"></script>
    <script src="scripts/tableSorter/jquery.tablesorter.widgets.js"></script>
    <title>Dynamic Data from sqlData</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" data-bind="value: vm.AccountArray().length" />
            <table border="1">
                <thead>
                    <tr>
                        <th>accountNumber
                        </th>
                        <th>accountName
                        </th>
                        <th>account balance
                        </th>

                    </tr>
                </thead>
                <tbody data-bind="foreach: { data: AccountArray, as: 'Account' }">
                    <tr>
                        <td data-bind="text: Account.AccountNumber"></td>
                        <td data-bind="text: Account.AccountName"></td>
                        <td data-bind="text: Account.AccountBalance"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
    <script>
        function Account(accountNumber, accountName, accountBalance) {
            this.AccountNumber = ko.observable(accountNumber);
            this.AccountName = ko.observable(accountName);
            this.AccountBalance = ko.observable(accountBalance);
        }
        var viewModel;
        var table;
        var hg;
        var vm = new function () {
            this.amount = ko.observableArray();
            this.AccountArray = ko.observableArray();
        }
        $(function () {
            table = $("table").tablesorter({
                theme: 'blue',
                widthFixed: true,
                widgets: ['zebra', 'stickyHeaders', 'filter', 'scroller', 'resizable'],
                widgetOptions: {
                    reorder_axis: 'x', // 'x' or 'xy'
                    reorder_delay: 100,
                    reorder_helperClass: 'tablesorter-reorder-helper',
                    reorder_helperBar: 'tablesorter-reorder-helper-bar',
                    reorder_noReorder: 'reorder-false',
                    reorder_blocked: 'reorder-block-left reorder-block-end',
                    reorder_complete: completed,// callback
                    scroller_height: 300,
                    scroller_barWidth: 17
                }
            });
            $('.tablesorter-scroller-table').css({
                height: '',
                'max-height': '300px'
            });
            function completed() {

            }
            function AutoReload() {
                $.ajax({
                    type: "POST",
                    url: "Dynamic_Data_Creation.aspx/GetDataAjax",
                    contentType: "application/json; charset=utf-8",
                    data: {},
                    dataType: "json",
                    success: function (response) {
                        hg = $('.tablesorter-scroller-table').prop("scrollTop");
                        vm.AccountArray.removeAll();
                        vm.AccountArray().length = 0;
                        vm.AccountArray.valueHasMutated();
                        ko.mapping.fromJSON(response.d, null, vm.AccountArray); // updata response data
                        $("table").trigger("update");
                        $('.tablesorter-scroller-table').prop("scrollTop", hg); // updating the scroll position to table 
                        $('.tablesorter-scroller-table').css("scrollTop", $('.tablesorter-scroller-table').prop("scrollTop"));
                        setTimeout(function () { AutoReload(); }, 5000); //reload on every 5 seconds.
                    },
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            }
            AutoReload();
        });
        ko.applyBindings(vm);
    </script>
</body>
</html>

【问题讨论】：

您需要一个绑定处理程序才能使用 jQuery 小部件。 stackoverflow.com/questions/14593367/…
代码工作，当我放置 $("table").find("tbody").empty();清空 AccountArray 后

标签： c# jquery html ajax knockout.js

【解决方案1】：

我认为您不会从 Knockout 中获得任何好处。您必须操纵 DOM 以将其与您的数据同步。这就是 Knockout 应该做的。

一个相对简单的自定义绑定处理程序会为您解决这个问题。

ko.bindingHandlers.sortable = {
  init: function(el, va) {
    var arg = ko.unwrap(va());
    $(el).tablesorter(arg.options);
    arg.data.subscribe(function() {
      $(el).trigger('update');
    });
  }
};

绑定看起来像

<table data-bind="sortable: {data: accountArray, options: tableOptions}" border="1">

Here's a fiddle 演示了一次添加元素、清除数组和设置整个数组。

【讨论】：