Kendo-Knockout: use knockout view model with kendo

问题:

I am doing some experiments with Kendo, Knockout and kendo-knockoutjs libraries. I want to use knockout view model with kendo datasource and to bind it to the kendo grid widget.

In Kendo:

html:

<div id="main">
    <div id="reportGrid" data-bind="source: gridDataSource"></div>
</div>

javascript:

var billingReportViewModel = kendo.observable({
    gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]})
});

$("#reportGrid").kendoGrid();

kendo.bind($("#main"), billingReportViewModel);

http://jsfiddle.net/zeQMT/71/

What I want to accomplish:

The html is the same as the example above.

javascript:

var billingReportViewModel = ko.observable({
    gridDataSource: new kendo.data.DataSource({data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]})
});

$("#reportGrid").kendoGrid();


ko.applyBindings(billingReportViewModel);

http://jsfiddle.net/zeQMT/72/

Obviuosly, this will not work because knockoutjs does not have source binding. Is it possible to create custom binding named source so that the current example will work? Any help with working code will be greatly appreciated. Thanks!

回答1:

I started a branch quite a while ago to handle passing in a kendo.data.DataSource reference directly, but never completed the fix: https://github.com/rniemeyer/knockout-kendo/issues/6

If there is interest, then I could try to get this one resolved.

Otherwise, you can define the dataSource in the binding (or pass in an object). Like:

var billingReportViewModel = ko.observable({
    gridDataSource: {data:[{name:"Apple", color:"green"},{name:"Banana", color:"yellow"}]}
});

Then, bind like:

<div id="reportGrid" data-bind="kendoGrid: { data: undefined, dataSource: gridDataSource }"></div>

Sample: http://jsfiddle.net/rniemeyer/6SEzp/