Kendo Template中的Javascript给出了错误的结果

Question

Kendo Template中的Javascript给出了错误的结果

我有一个带有javascript的模板

    # if(IsSelected) { #
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: age"></td>
    </tr>
    # } #

Run Code Online (Sandbox Code Playgroud)

它仅用于显示IsSelected值为true的记录.虽然它只显示两条记录 - 但显示的记录不正确.这是什么原因？

小提琴:http://jsfiddle.net/Lijo/Z86dq/4/

码

<html>
<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>
      <script id="row-template" type="text/x-kendo-template">
        # if(IsSelected) { #
        <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>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ona*_*Bai 7

尝试将模板定义为:

<script id="row-template" type="text/x-kendo-template">
    # if(IsSelected) { #
    <tr>
        <td>#= name #</td>
        <td>#= age #</td>
    </tr>
    # } #
</script>

Run Code Online (Sandbox Code Playgroud)

为了避免双重绑定首先在tbody然后在td.

编辑:为了避免抛出KendoUI的错误的问题,我会稍微改变你的代码,而不是使用kendo.observable我将使用DataSource实现filters.

因此,您不需要打印模板中的行,也不需要在模板中设置过滤条件DataSource.

定义模板如下:

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>#= name #</td>
        <td>#= age #</td>
    </tr>
</script>

Run Code Online (Sandbox Code Playgroud)

和您的JavaScript代码:

var ds = new kendo.data.DataSource({
    data  : {
        employees: [
            { name: "Lijo", age: "28", IsSelected: true },
            { name: "Binu", age: "33", IsSelected: false },
            { name: "Kiran", age: "29", IsSelected: true }
        ]
    },
    schema: {
        data: "employees"
    },
    filter: { field: "IsSelected", operator: "eq", value: true }
});

Run Code Online (Sandbox Code Playgroud)

我在哪里设置filter过滤掉isSelected不等于的元素true.

然后初始化ListView如下:

$("#list").kendoListView({
    dataSource: ds,
    template  : $("#row-template").html()
});

Run Code Online (Sandbox Code Playgroud)

你可以在这里看到代码:http://jsfiddle.net/OnaBai/Z86dq/16/

归档时间：	11 年，10 月前
查看次数：	5909 次
最近记录：	11 年，7 月前