Knockout.js 具有可观测数组的kendogrid绑定
我正在尝试一个将击倒可观测数组绑定到kendogrid的示例,但没有成功 下面是我创建了一个名为-AllUsers的可观察数组的代码,它是一个用户对象数组Knockout.js 具有可观测数组的kendogrid绑定,knockout.js,kendo-grid,Knockout.js,Kendo Grid,我正在尝试一个将击倒可观测数组绑定到kendogrid的示例,但没有成功 下面是我创建了一个名为-AllUsers的可观察数组的代码,它是一个用户对象数组 define(['kendo'], function (kendo) { function user(userID) { return { userID: ko.observable(userID), }; } var vm = { activ
define(['kendo'], function (kendo) {
function user(userID) {
return {
userID: ko.observable(userID),
};
}
var vm = {
activate: activate,
attached: attached,
AddUser: AddUser,
AllUsers: ko.observableArray([]),
userID: ko.observable(),
};
return vm;
function activate() {
return true;
}
function attached() {
$("#grid").kendoGrid({
dataSource: vm.AllUsers,
groupable: true,
sortable: true,
height: 250,
pageable: true,
pageSize: 5,
columns: [{
field: 'userID',
title: 'User ID',
width: 200
},
{
command: 'destroy',
title: ' ',
width: 150
}]
});
return true;
}
function AddUser() {
vm.AllUsers.push(new user("testing"));
return true;
}
});
相同的html代码:
<div id="header" class="form-horizontal form-widgets">
<fieldset>
<label for="userID" class="required" style="margin: 20px 20px 20px 20px">User Id</label>
<input id="userid" style="margin-right:20px" class="k-textbox" data-bind="value: userID" required />
<button type="button" id="addUserButton" data-bind="click: AddUser" style="margin-bottom:30px">Add user</button>
</fieldset>
<div id="grid"></div>
</div>
用户Id
添加用户
有人能告诉我装订有什么问题吗?
单击“添加用户”按钮,用户应添加到observableArray,然后应反映在网格中。两者都没有发生
提前感谢。肯多格里德需要处理普通物体。因此,您可以约束以下内容:
dataSource: ko.toJS(vm.AllUsers)
这将递归地展开任何可观察对象并返回一个普通对象
当您向可观察数组添加新项时,您必须让KendoGrid知道您的数据源已更改。例如,您可以订阅ObservalArray上的任何阵列更改,并对网格进行更新,如:
vm.AllUsers.subscribe(function(changes) {
var grid = $("#grid").data("kendoGrid"),
dataSource = grid && grid.dataSource;
if (dataSource) {
//loop through changes make any adds
ko.utils.arrayForEach(changes, function(change) {
if (change && change.status === "added") {
dataSource.add(ko.toJS(change.value));
}
});
}
}, vm, "arrayChange");
样本:
如果需要更多的集成,您还可以在此处探索使用击倒剑道绑定。感谢回复和fiddle链接。如何让delete命令工作?@user2439903-这里有一个delete工作的示例:谢谢链接。我遵循了这个链接[链接]中的代码。“删除”按钮是如何工作的?我无法在我的代码库中使用相同的代码。网格必须具有“editable:true”,然后添加一个与id匹配的“remove”处理程序,并将其从ObservalArray中删除。