Question

`

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
        <script src="../content/shared/js/products.js"></script>

        <div id="example">
            <div id="grid"></div>

            <script>
              var products = [{ProductName:"p1"},{UnitPrice:200},{UnitsInStock:20},{Discontinued:false},{parent:"parent"}];
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" },
                                        UnitsInStock: { type: "number" },
                                        Discontinued: { type: "boolean" },
                                        parent: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" },
                           { field: "parent", width: "130px" }
                        ]
                    });
                });
            </script>
</div>


</body>
</html>

`我在Kendo Grid上从服务器渲染数据，在其中一个列值中显示函数体而不是值。经过一些调试后发现了列名＆＃34; parent＆＃34;被Kendo视为特殊关键字。当我将其更改为＆＃34; parent1＆＃34;它工作正常。请确认这是正确的假设吗？如果是，那么任何人都可以共享我们不能用作Kendo网格列名称的关键字列表吗？

提前致谢

Answer 1

我明白了你的意思。在剑道模板中发生的事情是，在每一行上，它运行一个功能，提供对当前行对象（或dataItem）的访问。此对象具有您的所有属性以及所有kendo内部属性和方法。它类似于：

// Consider this template
template: "<span>#= name #</span>"

// The code will be
(function(data) {
    with(data) {
        $kendoOutput = "<span>" + name + "</span>";
    }
});

以上片段是幕后发生的简短版本，但是类似。 name var是data的属性，用于with语句。如果您在console.log()上致电data，您就会发现它不仅具有name属性，而且具有上文提到的其他剑道属性，包括{{ 1}}方法。因此，如果您在模板中使用parent，那么剑道将占用他的财产，而不是您的财产。它会像：

parent

因此，要检查所有kendo属性，只需在模板中使用(function(data) { with(data) { $kendoOutput = "<span>" + parent + "</span>"; } });即可。试试这个模板：

console.log(data)

使用<script id="tmpl" type="text/x-kendo-template"> # debugger; # # console.log(data); # </script>，您可以看到它在幕后的工作方式，使用debugger;，您可以在控制台中检查剑道正在处理的行对象的完整版本。我相信剑道属性是：

console.log()
parent()
uid
_events

Check out this demo to help you understand

Kendo网格在列值中显示函数体

1 个答案: