Knockout.js 具有可观测数组的kendogrid绑定

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

我正在尝试一个将击倒可观测数组绑定到kendogrid的示例,但没有成功

下面是我创建了一个名为-AllUsers的可观察数组的代码,它是一个用户对象数组

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中删除。