3

次の状況があります(KendoUIを使用):

データソースにバインドされたグリッドがあります。グリッドで行を選択すると、その「変更」イベントを呼び出して、選択した dataItem を取得し、その値を他の HTML 要素で表示します。

次のようなもの：

$("grid-element").kendoGrid({
    change: setElements
});

function setElements() {
    var grid = $("#grid-element").data("kendoGrid");
    var selectedItem = grid.dataItem(grid.select());

    $("#span-field1").text(selectedItem.field1);
    $("#span-field2").text(selectedItem.field2);
    $("#span-field3").text(selectedItem.field3);
}

私の質問は、MVVM またはより優れた KendoUI モデル バインディング ソリューションを使用して同じことを達成することは可能ですか?

4

2 に答える 2

5

これまでのところ、次の解決策を見つけました。

=== JAVASCRIPT ===
var vm = kendo.observable({
    gridSelectedItem: null,

    _field1: function() { 
        return this.get("gridSelectedItem.field1"); 
    },
    _field2: function() { 
        return this.get("gridSelectedItem.field2"); 
    }
});

$("#grid-element").kendoGrid({
    change: function(e) {
        var selectedItem = this.dataItem(this.select());
        vm.set("gridSelectedItem", selectedItem);
    }
});


=== HTML ===
<span data-bind="text: _field1"></span>
<span data-bind="text: _field2"></span>

より良い方法はありますか？

于 2012-12-10T16:37:09.877 に答える
2

確かに、あなたは正しい道を進んでいます。

試してみることをお勧めするものは次のとおりです。

=== JAVASCRIPT ===
var vm = kendo.observable({
    gridSelectedItem: null    
});

$("#grid-element").kendoGrid({
    change: function(e) {
        var selectedItem = this.dataItem(this.select());
        vm.set("gridSelectedItem", selectedItem);
    }
});


=== HTML ===
<span data-bind="text: gridSelectedItem.field1"></span>
<span data-bind="text: gridSelectedItem.field2"></span>

もう少しコンパクトになるはずです。

于 2012-12-10T23:00:13.173 に答える