具有行模板绑定到事件错误的 Kendo Grid MVVM答案

【问题标题】：Kendo Grid MVVM with rowtemplate binding to events error具有行模板绑定到事件错误的 Kendo Grid MVVM
【发布时间】：2014-04-06 03:37:14
【问题描述】：

我正在尝试使用 Kendo Grid MVVM 将 RowTemplate 中的事件绑定到 viewModel 函数。

但是，在调用 kendo.bind 之后，控制台中会显示一个错误，并且该事件不会被触发，但是网格会正确显示。这是错误：

未捕获的错误：按钮元素 kendo.editor.js:890 不支持鼠标悬停绑定

我尝试将行模板中的元素类型更改为其他任何东西，结果相同。

这是我的html代码：

<div id="content">
<div>
    <div id="grid" data-role="grid" data-bind="source: ordersSource"
                    data-selectable="True" data-columns='["OrderID", "ShipName", "ShipCity"]' data-row-template="rowTemplate" />
</div>            
</div>
<script id="rowTemplate" type="text/x-kendo-template">
        <tr data-uid="#= uid #">
            <td><button data-bind="mouseover: listener">#: OrderID #</button></td>
            <td>#: ShipName #</td>
            <td>#: ShipCity #</td>
        </tr>
</script>

这是我的 viewModel 代码：

var ordersDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
    read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
schema: {
    model: {
        id: "OrderID",
        fields: {
            OrderID: { type: "number" },
            ShipName: { type: "string" },
            ShipCity: { type: "string" }
        }
    }
},
pageSize: 5,
});

var viewModel = kendo.observable({
   ordersSource: ordersDatasource,
   listener: function (e) {
    alert("Event: " + e.type);
    }
});

kendo.bind($('#content'), viewModel);

Here 是 jsFiddle，如果你想试试的话。

当鼠标经过它时，第一列按钮应该触发事件，但它不会。

【问题讨论】：

标签： javascript jquery mvvm kendo-ui kendo-grid

【解决方案1】：

绑定事件的正确语法是：

<button data-bind="events: { mouseover: listener }">#: OrderID #</button

(updated demo)

【讨论】：