Question

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

然而

排序不起作用且没有js错误。

请注意，任务是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>

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

未捕获TypeError：undefined不是函数（匿名函数） 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使用可观察数组没有任何问题。

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

$.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。

你的方法的问题是剑道对KO observables一无所知，而敲门剑道只是将数据作为普通的JS对象传递给剑道。因此，如果您希望能够更改表中的数据，则应使用一些解决方法。我的方法是使用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);
}

所以现在排序工作正常，如果你改变了一些任务（按＆＃34;更改数据＆＃34; jsfiddle中的按钮），表格会刷新。

排序和过滤不适用于淘汰剑道网格

1 个答案: