Kendo UI - 如何使用 Kendo MVVM 将选中的属性（属性）和处理复选框的单击事件绑定到 viewModel答案

【问题标题】：Kendo UI - How to bind checked property (attribute) and handle click event for the checkbox to the viewModel using Kendo MVVMKendo UI - 如何使用 Kendo MVVM 将选中的属性（属性）和处理复选框的单击事件绑定到 viewModel
【发布时间】：2013-10-15 17:07:45
【问题描述】：

我有一个看起来像这样的页面：

<div data-role="view" id="side-root" data-title="Check-Boxes" data-model="myViewModel">
  <ul data-title="People" data-role="listview" data-bind="source: dsPeople" data-template="person_list_item" data-style="inset"></ul>
</div>
<script id="person_list_item" type="text/x-kendo-template">
  <label>
    <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<input type="checkbox" data-bind="checked: isChecked, click: clickHandler"/>
  </label>
</script>

现在，绑定到 isChecked 字段的 MVVM 可以正常工作，但不会调用 clickHandler。如果我从数据绑定值中删除“checked: isChecked”绑定，那么 clickHandler 就会被调用。

我也尝试为复选框设置数据绑定，例如：

data-bind="checked: isChecked, events: { click: clickHandler }"

具有相同的行为。

这是设计使然，还是我配置错误？

谢谢

【问题讨论】：

标签： data-binding kendo-ui kendo-mobile kendo-mvvm event-binding

【解决方案1】：

尝试改用更改事件。我遇到了同样的问题并解决了它。我猜你不能数据绑定到选中并绑定到点击事件。

data-bind="checked: Checked, events: { change: clickHandler}"

【讨论】：

如果你这样做，你会得到一个错误：0x800a01b6 - JavaScript 运行时错误：对象不支持属性或方法“应用”。您不能使用 MVVM 将事件处理程序绑定到 HTML 对象。您可以包含 HTML onclick= 事件处理程序或绑定到 Observable 的 (ViewModel) 更改事件（然后检查哪个字段触发了它）。

【解决方案2】：

这是处理复选框单击/更改事件的DEMO

HTML：

<input type="checkbox" data-bind="checked: checkboxChecked, events: { change: clickHandler}">
         Click the checkbox to view change event, also keep your console open

JS：

var viewModel = kendo.observable({
  checkboxChecked: true,
  clickHandler: function(e) {
    console.log('clicked ', e);
    alert("Checkbox checked = "+e.data.checkboxChecked);
  }
});
kendo.bind($("#example"), viewModel);

【讨论】：