剑道的UI数据绑定到功能无法正常工作

Question

我有以下使用剑道UI MVVM工作代码 - Fiddle

这里存在的模板复选框绑定

<input type="checkbox" name="selection" data-bind="checked: isChecked"/> 

它必然到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); 
}); 

参考

1. How to display only selected records in the result table
2. MVVM/Custom binding
3. MVVM/Event binding
4. Kendo MVVM Overview
5. Value binding

Answer 1

您可以数据绑定change事件：

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

或绑定change事件处理函数，以可观察到的（不改变你的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）