Kendo UI - Как связать отмеченное свойство (атрибут) и обработать событие щелчка для флажка для viewModel с помощью Kendo MVVM

Question

У меня есть страница, которая выглядит примерно так:

<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>

Теперь привязка MVVM к полям isChecked работает правильно, но clickHandler никогда не вызывается. Если я удаляю привязку "checked: isChecked" из значения привязки данных, то вызывается clickHandler.

Я также попытался настроить привязку данных для флажка, как:

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

с таким же поведением.

Это дизайн или я что-то неправильно настроил?

Спасибо

Answer 1

Попробуйте вместо этого использовать событие изменения. Я столкнулся с этой же проблемой, и это решает ее. Я думаю, что вы не можете привязать данные к флажку, а также привязать к событию click

data-bind="флажок: проверен, события: { change: clickHandler}"

Answer 2

Вот ДЕМО для обработки чекбокса / изменения события

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);