最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Kendo-UI data-bind to function is not working - Stack Overflow

programmeradmin5浏览0评论

I have following working code using Kendo UI MVVM - Fiddle

Here there is a binding in the template for the checkbox

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

It is bound to isChecked property of the model.

Now I need to show an alert when user clicks on the checkbox by alerting the checked / unchecked state and Name of user.

I tried with data-bind="checked: showAlert()" but that didnt work.

How can we achieve this?

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

REFERENCES

  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

I have following working code using Kendo UI MVVM - Fiddle

Here there is a binding in the template for the checkbox

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

It is bound to isChecked property of the model.

Now I need to show an alert when user clicks on the checkbox by alerting the checked / unchecked state and Name of user.

I tried with data-bind="checked: showAlert()" but that didnt work.

How can we achieve this?

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

REFERENCES

  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
Share Improve this question edited May 23, 2017 at 11:58 CommunityBot 11 silver badge asked Mar 7, 2014 at 5:10 LCJLCJ 22.7k69 gold badges267 silver badges429 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

You can either data-bind the change event:

Html:

<input type="checkbox" name="selection" 
data-bind="checked: isChecked, events: { change: printIsChecked }"/>

View model:

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

or bind a change event handler to the observable (without changing your 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)

发布评论

评论列表(0)

  1. 暂无评论