排序和过滤在淘汰赛剑道网格中不起作用

Question

我正在使用 Knockout-Kendo.js，将数据绑定到网格并在可观察数组更改时看到更改没有问题。

然而

1. 排序不起作用，没有js错误。

请注意，tasks 是一个 ko.observableArray()

        <div data-bind="kendoGrid: {
                data: tasks,
                columns: [
                    { field: 'TaskId', title: 'Task Id' },
                    { field: 'Description', title: 'Description' },
                    { field: 'RaisedBy', title: 'Requested User' },
                    { field: 'Status', title: 'Status' },
                    { field: '', title: '' }
                ],
                rowTemplate: 'Template',
                useKOTemplates: true,
                editable: false,
                filterable: true,
                sortable: true,
                scrollable: false,
                pageable: {pageSize: 5 }
                }">
        </div>


<script id="Template" type="text/html">
    <tr>
        <td><div data-bind="text: TaskId"></div></td>
        <td><div data-bind="text: Description"></div></td>            
        <td><div data-bind="text: RaisedBy"></div></td>            
        <td><div data-bind="text: Status"></div></td>
        <td><button data-bind="click: $root.viewDetails">View</button></td>
    </tr>
</script>

1. 过滤也不起作用，这是我在控制台中看到的。

Uncaught TypeError: undefined is not a function（匿名函数） VM3445:3 o.filter kendo.web.min.js:11 o.process kendo.web.min.js:11 ct.extend.query kendo.web.min.js:11 ct.extend._query kendo.web.min.js:11 ct.extend.filter kendo.web.min.js:11 g.extend.filter kendo.web.min.js:19 g.extend._submit kendo.web.min.js:19 b.extend.proxy.b.isFunction.i jquery-1.9.1.js:7223 b.event.dispatch jquery-1.9.1.js:9593

JSfiddle - http://jsfiddle.net/fc0ukq9o/

我发现 JSFiddle 使用 observable 数组没有任何问题。

但是，在我的例子中，可观察数组由以下代码填充，该代码会自动为数据的每个属性创建可观察属性。在此之后，我可以看到排序和过滤器停止工作。

$.each(data.source, function (index, data) {
                    self.tasks.push(ko.mapping.fromJS({
                        TaskId: data.TaskId,
                        Description: data.Description,
                        RaisedBy: data.RaisedBy,
                        Status: data.Status
                    }));
                });

Answer 1

哇，这很难，但我想我解决了，见demo。

您的方法的问题在于 Kendo 对 KO 可观察对象一无所知，并且 knockout-kendo 只是将数据作为纯 JS 对象传递给 Kendo。因此，如果您希望能够更改表中的数据，您应该使用一些解决方法。我的方法是使用valueHasMutated 方法告诉淘汰赛任务数组中的任务已更新。

下面是视图模型的样子：

function ViewModel() {
    var self = this;
    self.tasks = ko.observableArray();
    self.viewDetails = function(data) {
        alert(data.TaskId);
    };
    self.changeData = function() {
        self.tasks()[0].TaskId = 3;
        self.tasks.valueHasMutated(); // this will tell knockout that tasks were changed
    }
};

tasks 是一个可观察的 Task 对象数组：

function Task(id, description, raisedBy, status) {
    this.TaskId = id;
    this.Description = description;
    this.RaisedBy = raisedBy;
    this.Status = status;
};

我还添加了具有虚拟数据的初始化方法：

ViewModel.prototype.init = function() {
    var self = this;
    var data = {
        source: [
            new Task(1, "Task 1", "User 1", "New"),
            new Task(2, "Task 2", "User 2", "Closed"),
            new Task(3, "Task 3", "User 3", "In progress"),
            new Task(4, "Task 4", "User 4", "New"),
            new Task(5, "Task 5", "User 5", "In progress")
        ]
    };
    self.tasks(data.source);
}

所以现在排序工作正常，如果您更改某些任务（按jsfiddle 中的“更改数据”按钮），表格会刷新。