私は、今後 2 年間の開発に取り組まなければならない次の Web アプリケーションの POC を開発しています。現在、KendoUI MVVM バインディングと KnockoutJS バインディングに関する決定を下すのに苦労しています。
私は 2 つのテクノロジを使用して 2 つの POC を開発しました。サンプル コードを次に示します。
KendoUI グリッド用 MVVM バインディング
<table id="kendoUiGridMvvmTest" height="600px" width="1153px">
<tr>
<td>
<h4>KendoUI Grid - Native MVVM Implementation</h4>
<div data-role="grid"
data-sortable="true" data-source='{"schema":{"model":{"fields":{"Name":{}, "Price":{"type":"number"}, "UnitsInStock":{"type":"number"}}}}}' data-filterable="true" data-editable="true" data-groupable="true" data-scrollable="true" data-selectable= "multiple cell"
data-resizable="true"
data-reorderable="true" data-pageable='{ "pageSize": 10 @*events: {change: onPage}*@}'
data-columns='[{"field":"Name", "filterable":true}, {"field":"Price", "filterable":false}, "UnitsInStock", {"command": "destroy"}]'
data-bind="source: gridSource"></div>
</td>
</tr>
これがViewModelコードです。
var viewModel = kendo.observable({
gridSource: [
{ Name: "Item1", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item2", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item3", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item4", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item5", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item6", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item7", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item8", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item9", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item10", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item11", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item12", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item13", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item14", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item15", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item16", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item17", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item18", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item19", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item20", Price: 97.00, UnitsInStock: 29 }
],
});
kendo.ui.Grid.fn.options.filterable = false;
kendo.bind($("#kendoUiGridMvvmTest"), viewModel);
このコードは完璧に機能し、Kendo Grid にデータを表示できます。
しかし、私がやりたいことは、KnockoutJS ViewModel を使用して Kendo Grid にデータをバインドすることです。というわけで、こんなコードが欲しいです。
var viewModel = {
gridSource: [
{ Name: "Item1", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item2", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item3", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item4", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item5", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item6", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item7", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item8", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item9", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item10", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item11", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item12", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item13", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item14", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item15", Price: 18.00, UnitsInStock: 39 },
{ Name: "Item16", Price: 19.00, UnitsInStock: 17 },
{ Name: "Item17", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item18", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item19", Price: 97.00, UnitsInStock: 29 },
{ Name: "Item20", Price: 97.00, UnitsInStock: 29 }
],
};
ko.applyBindings(viewModel);
ko.applyBindingsここでは、代わりに使用したことがわかりますkendo.bind
つまり、簡単に言えば、KendoUI の MVVM バインディングを使用せずに、KnockoutJS モデルを KendoUI Grid にバインドすることです。
ここでkendoUI 統合へのノックアウトを見つけましたが、グリッドでは機能しません。どんなコメントでも大歓迎です。
前もって感謝します。