Question

我正在尝试将一个敲除可观察数组绑定到kendogrid，但不成功。

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

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)

这将以递归方式展开任何可观察对象并返回一个普通对象。

当您向可观察数组添加新项目时，您必须让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/。

kendogrid与可观察数组的绑定

1 个答案: