Question

我需要在网格行和详细信息视图上绑定一些事件。我正在使用一个可观察的视图模型，其中注册了一些事件，并尝试使用行模板和详细信息模板将它们绑定到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将事件与网格绑定？

Answer 1

您应该通过data-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>

绑定Kendo网格内的事件

1 个答案: