Kendo-Knockout:使用具有剑道数据源的淘汰赛视图模型 [英] Kendo-Knockout: use knockout view model with kendo datasource

问题描述

我正在用 Kendo、Knockout 和 kendo-knockoutjs 库做一些实验.我想对剑道数据源使用淘汰赛视图模型并将其绑定到剑道网格小部件.

在剑道中:

html:

<div id="reportGrid" data-bind="source: gridDataSource"></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/

我想要完成的:

html 与上面的示例相同.

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/

显然，这是行不通的，因为knockoutjs 没有source 绑定.是否可以创建名为 source 的自定义绑定，以便当前示例可以工作?任何有关工作代码的帮助将不胜感激.谢谢！

解决方案

我很早就开始了一个分支来处理直接传入 kendo.data.DataSource 引用，但从未完成修复:https://github.com/rniemeyer/knockout-kendo/issues/6

如果有兴趣，那么我可以尝试解决这个问题.

否则，您可以在绑定中定义数据源(或传入一个对象).喜欢:

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

然后，像这样绑定:

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

示例:http://jsfiddle.net/rniemeyer/6SEzp/

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!

解决方案

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/

这篇关于Kendo-Knockout:使用具有剑道数据源的淘汰赛视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！