kendogrid与可观察数组的绑定

时间:2014-04-07 10:34:10

标签: knockout.js kendo-grid

我正在尝试将一个敲除可观察数组绑定到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,然后应反映在网格中。两者都没有发生。

提前致谢。

1 个答案:

答案 0 :(得分:0)

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/