Kendo如何将HTML元素绑定到网格选择的行/数据项？

Question

我有如下情况（使用KendoUI）：

我有一个绑定到数据源的表格。当我在表格中选择一行时，我会触发其“change”事件以获取所选数据项，并通过其他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模型绑定解决方案来实现相同的功能？

- Matteo Piazza

---

我不熟悉MVVM相关的内容，但是提供一下信息 - 在change事件中，你可以使用“this”来访问网格。 - Jono

Answer 1

到目前为止，我已经找到了以下的解决方案：

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

有更好的方法吗？

- Matteo Piazza

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

它应该稍微更加紧凑。

- Petur Subev

---

是的，谢谢您。但实际上有些情况下我需要对数据应用自定义格式（例如"kendo.toString(value, "p1")"），因此我更喜欢在模型中保留该字段。 - Matteo Piazza