mvvm - 在 Kendo 网格中绑定(bind)事件

Question

我需要在网格行和详细信息 View 上绑定(bind)一些事件。我正在使用一个可观察的 View 模型，其中注册了一些事件，并尝试使用行模板和详细信息模板将它们绑定(bind)到 DOM。至今没有任何进展。

$("#grid").kendoGrid({
    sortable:true,
    rowTemplate:'<tr class="k-master-row"> 
         <td class="k-hierarchy-cell"><a class="k-icon k-plus" href=""></a></td>
        <td><a data-bind:"click:highlight">click in row ${id}</a></td><td>${bool}</td>
    </tr>',
    detailTemplate:'<a data-bind:"click:highlight">click In details ${id}</a>',
    columns: [{field:'id',sortable:false}, {field:'bool'}],
    dataBound: function(e) {
      var grid=$("#grid").data('kendoGrid');
      grid.expandRow("tr.k-master-row");
    }
});


var model=( {
    highlight:function(){
       console.log(this.id);
    },
   items:[{id: 1123, bool: true}, {id: 223, bool: false}]
});
kendo.bind($("#grid"),kendo.observable(model));

这是 jsFiddle http://jsfiddle.net/amGmr/9/ .有没有可能使用 MVVM 在网格中绑定(bind)事件？

Answer 1

您应该通过数据绑定(bind)属性和事件绑定(bind)指定您希望绑定(bind)的事件:

<div data-role="grid" 
     data-bind="source: dataSource, events:{dataBound: dataBound, detailInit: detailInit}"
></div>

<script>
var viewModel = kendo.observable({
   dataBound: function(e) {
      var grid = e.sender; // `this` is the viewModel instance
   },
   detailInit: function(e) {
       var grid = e.sender; // `this` is the viewModel instance
   },
   dataSource: [ 
      { name: "John Doe" },
      { name: "Jane Doe" }
   ]
});
</script>