knockout.js - kendoui - kendo ui developer

Kendo-Knockout: utilice el modelo de vista eliminada con el origen de datos del kendo

Question

Estoy haciendo algunos experimentos con las bibliotecas Kendo, Knockout y kendo-knockoutjs. Quiero utilizar el modelo de vista eliminada con el origen de datos kendo y vincularlo al widget de la grilla kendo.

En 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/

Lo que quiero lograr:

El html es el mismo que el ejemplo anterior.

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/

Obviamente, esto no funcionará porque knockoutjs no tiene enlace source . ¿Es posible crear un enlace personalizado llamado source para que el ejemplo actual funcione? Cualquier ayuda con el código de trabajo será muy apreciada. ¡Gracias!

Answer 1

Inicié una rama hace bastante tiempo para gestionar directamente el paso de una referencia kendo.data.DataSource, pero nunca completé la corrección: https://github.com/rniemeyer/knockout-kendo/issues/6

Si hay interés, entonces podría tratar de resolverlo.

De lo contrario, puede definir el origen de datos en el enlace (o pasar un objeto). Me gusta:

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

Entonces, ata como:

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

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