剑道将 HTML 元素绑定到网格选定的行/数据项 [英] kendo bind HTML elements to grid selected row/dataItem

问题描述

我有以下情况(使用 KendoUI):

I have the following situation (using KendoUI):

我有一个绑定到数据源的网格.当我在网格中选择一行时，我会调用它的更改"事件来获取所选数据项 e 通过其他 HTML 元素显示其值.

I have a grid binded to a datasource. When I select a row in the grid I invoke its "change" event to get the selected dataItem e show its values through other HTML elements.

类似于以下内容:

$("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 模型绑定解决方案来实现相同的目标?

My question is: is it possibile to achieve the same through MVVM or a better KendoUI model binding solution?

推荐答案

目前我找到了以下解决方案:

So far I have found the following solution:

=== 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>

有更好的方法吗?

这篇关于剑道将 HTML 元素绑定到网格选定的行/数据项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！