Kendo UI - 如何绑定已检查属性(属性)并使用Kendo MVVM处理viewModel复选框的click事件

时间:2013-10-08 16:36:40

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

我的页面看起来像:

<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。如果我从data-bind值中删除“checked:isChecked”绑定,则会调用clickHandler。

我还尝试为复选框设置数据绑定,如:

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

具有相同的行为。

这是设计,还是我错误配置了什么?

由于

2 个答案:

答案 0 :(得分:6)

请尝试使用更改事件。我遇到了同样的问题而且解决了这个问题。我猜你不能对数据绑定进行检查,也可以绑定到click事件。

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

答案 1 :(得分: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);