kendogrid 与可观察数组的绑定

Question

我正在尝试一个将淘汰赛可观察数组绑定到 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>

谁能告诉我绑定有什么问题？ 单击添加用户按钮时，应将用户添加到 observableArray，然后应反映在网格中。两者都没有发生。

提前致谢。

Answer 1

kendoGrid 需要处理普通对象。因此，您可以绑定以下内容：

dataSource: ko.toJS(vm.AllUsers)

这将递归地解开任何可观察对象并返回一个普通对象。

当您向 observable 数组添加新项目时，您必须让 KendoGrid 知道您的数据源已更改。例如，您可以订阅 observableArray 上的任何数组更改并对网格进行更新，例如：

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");

示例：http://jsfiddle.net/rniemeyer/E8dMq/

如果您想要更多集成，您还可以在此处探索使用 Knockout-Kendo 绑定：http://kendo-labs.github.io/knockout-kendo/。