Javascript inside Kendo Template is giving incorrect result

问题

I have a template with javascript inside it

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

It is intended to show only those records for which the IsSelected value is true. Though it shows only two records – the records displayed are not correct. What is the reason for this?

Fiddle: http://jsfiddle.net/Lijo/Z86dq/4/

CODE

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

回答1:

Try defining the template as:

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

in order to avoid a double bind first in the tbody and then in the td.

EDIT: In order to avoid the problems with the error that throws KendoUI, I would change your code a little and instead of using a kendo.observable I would use a DataSource that implements filters.

So, you don't need to print or not the row in your template but setting the filter condition in the DataSource.

Define the template as follow:

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

and your JavaScript code as:

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

Where I set a filter that filters out elements where isSelected is not equal to true.

Then initialize a ListView as follow:

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

You can see the code here: http://jsfiddle.net/OnaBai/Z86dq/16/

回答2:

This is my syntax, but this is coming from a sub grid. So I think the syntax you need may be a little different. I think //# just becomes # if it's in the parent Grid but don't quote me on it. Looks like your missing some " " and concatenation

Here's the razor syntax for what it's worth, maybe you can convert it to your needs

.Columns(columns =>
{
    columns.Bound(x => x.FirstName).Title("First Name").ClientTemplate(
    "# if (Id == 5) { #" +
        ("<a class href='javascript: void(0);' onclick=\"return MyFunction('#=LastName#', '#= FirstName #');\">Convert</a>") +
        "# } else { #" +
                        "#= FirstName #" +
                    "# } #");
    columns.Bound(x => x.LastName).Title("Last Name");
    columns.Bound(x => x.Id).Title("User ID");    

})

So this code reads as, If the Id of the user is 5, the column will have a hyperlink that says "convert" and will call MyFunction with those parameters. If not show the user's name

回答3:

The problem comes from the fact that the MVVM implementation expects the template to render one element. In your case, you can use the visible binding - check an updated version of the fiddle.

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

来源：https://stackoverflow.com/questions/22075654/javascript-inside-kendo-template-is-giving-incorrect-result

标签

javascript

jquery

kendo-ui