Kendo UI可见绑定无法正常工作

时间:2014-02-28 14:33:14

标签: javascript kendo-ui

根据问题“Filtering source in a Kendo Template”中的回答,我使用visible binding。根据问题“Javascript inside Kendo Template is giving incorrect result”中的答案,我避免双重约束。但是visible绑定并不是它的功能。为什么没有进行过滤?

Fiddle

CODE

<head>
    <title>Template Filtering</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>

    <!----Kendo Templates-->
     <script id="row-template" type="text/x-kendo-template">
        <tr data-bind="visible: IsSelected">
           <tr>
                <td>#= name #</td>
                <td>#= age #</td>
            </tr>
        </tr>
    </script>

    <!--MVVM Wiring using Kendo Binding-->
    <script type="text/javascript">

        $(document).ready(function () {
            kendo.bind($("body"), viewModel);
        });

    </script>

    <script type="text/javascript">
        var viewModel = kendo.observable({

            employees: [
                        { name: "Lijo", age: "28", IsSelected: true },
                        { name: "Binu", age: "33", IsSelected: false },
                        { name: "Kiran", age: "29", IsSelected: true }
                       ],

//            isVisibleCheck: function (e) {
//                isValid = false;
//                //person object is created using "e"
//                var person = e.data;
//                if (person.age >= 29) {
//                    isValid = true;
//                }
//                return isValid;
//            }
        });

    </script>

    <style>
        table, th, td
        {
            border: 1px solid black;
        }
    </style>

</head>
<body>
    <table id="resultTable">
        <tbody data-template="row-template" data-bind="source: employees">
        </tbody>
    </table>
</body>

参考

  1. Visible binding in Kendo UI MVVM- docs.telerik
  2. Filtering source in a Kendo Template
  3. Javascript inside Kendo Template is giving incorrect result

1 个答案:

答案 0 :(得分:3)

当我从你的rowTemplate中取出额外的<tr></tr>时,它似乎工作正常。

<tr data-bind="visible: IsSelected">
    <td>#= name #</td>
    <td>#= age #</td>
</tr>

参见示例... http://jsbin.com/vusav/1/edit