在剑道模板中过滤源 [英] Filtering source in a Kendo Template

查看:15
本文介绍了在剑道模板中过滤源的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下 Kendo 模板和 MVVM 绑定.这个模板的来源是内部有 employees 的 viewModel.员工集合中有 3 条记录.我只需要显示 IsSelected 属性为真的那些记录.

I have following Kendo template and MVVM binding. Source for this is template is viewModel that has employees inside it. The employees collection has 3 records in it. I need to display only those records for which the IsSelected property is true.

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


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

问题

我们如何在模板中指定这种过滤?

How can we specify this filtering inside the template?

代码

<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>
                <td data-bind="text: name"></td>
                <td data-bind="text: age"></td>
          </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 }
                       ]
        });

    </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. 网格中的 KendoUI 复选框:如何操作以及一些提示和技巧
  2. 使用字段类型对象过滤剑道 ui 网格
  3. 过滤器阵列|对象
  4. MVVM/源和模板绑定
  5. 如何在内部运行函数模板

推荐答案

使用可见绑定...

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

这篇关于在剑道模板中过滤源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆