Kendo-UI 数据绑定功能不起作用

Posted 2023-05-07

【中文标题】Kendo-UI 数据绑定功能不起作用

【英文标题】：Kendo-UI data-bind to function is not working

【发布时间】：2014-04-10 02:56:43

【问题描述】：

我有以下使用 Kendo UI MVVM 的工作代码 - Fiddle

这里有一个复选框的模板中的绑定

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

绑定到模型的isChecked属性。

现在我需要在用户点击复选框时通过提醒选中/未选中状态和用户名称来显示提醒。

我尝试使用 data-bind="checked: showAlert()" 但没有奏效。

我们怎样才能做到这一点？

身体

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

参考文献

How to display only selected records in the result table MVVM / Custom binding MVVM / Event binding Kendo MVVM Overview Value binding

【参考方案1】：

您可以对更改事件进行数据绑定：

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

或将更改事件处理程序绑定到可观察对象（不更改您的 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)