我有以下使用 Kendo UI MVVM 的工作代码 - Fiddle
这里有一个复选框的模板绑定(bind)
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
它绑定(bind)到模型的 isChecked
属性。
现在我需要通过提醒选中/未选中状态和用户名来在用户单击复选框时显示提醒。
我尝试使用 data-bind="checked: showAlert()"但没有成功。
我们怎样才能做到这一点?
body
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
</td>
</tr>
</script>
<script id="row-template" type="text/x-kendo-template">
<tr data-bind="visible: isChecked">
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
</tr>
</script>
<table id="selectionTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: employees"/>
</table>
Javascript
var viewModel = kendo.observable({
employees: [
{ name: "Lijo", age: "28", isChecked: true },
{ name: "Binu", age: "33", isChecked: true },
{ name: "Kiran", age: "29", isChecked: true }
]
});
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
引用文献
最佳答案
您可以对更改事件进行数据绑定(bind):
HTML:
<input type="checkbox" name="selection"
data-bind="checked: isChecked, events: { change: printIsChecked }"/>
查看模型:
var viewModel = kendo.observable({
employees: [{
name: "Lijo",
age: "28",
isChecked: true
}, {
name: "Binu",
age: "33",
isChecked: true
}, {
name: "Kiran",
age: "29",
isChecked: true
}],
printIsChecked: function(e) {
$("#out2").html("via event-binding on input: " + e.data.name + " is checked: " + e.data.isChecked);
}
});
或将更改事件处理程序绑定(bind)到可观察对象(不更改您的 Html):
var viewModel = kendo.observable({
employees: [{
name: "Lijo",
age: "28",
isChecked: true
}, {
name: "Binu",
age: "33",
isChecked: true
}, {
name: "Kiran",
age: "29",
isChecked: true
}],
printIsChecked: function (e) {
var changedItem = e.items[0];
// note: might need to check e.field === "isChecked"
// if other fields might change or if you add/remove items from employees
$("#out").html("via Observable.change: " + changedItem.name + " is checked: " + changedItem.isChecked);
}
});
viewModel.employees.bind("change", viewModel.printIsChecked);
( demo )
关于javascript - Kendo-UI 数据绑定(bind)功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22241999/