0

我正在使用 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 (anonymous 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
                    }));
                });
4

1 回答 1

1

哇，这很难，但我想我解决了，请参阅演示。

您的方法的问题是 Kendo 对 KO 可观察对象一无所知，并且 kendo-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中的“更改数据”按钮），表格将被刷新。

于 2014-08-15T19:08:10.960 回答