Kendo UI (jquery) 模板在属性名称在字符串中时获取值

Question

我正在构建一个 Kendo 网格，该网格具有直到运行时才知道的可变列数。我有适当的代码来获取数据的第一行并生成模式和列信息，这些信息在连接网格之前附加到 Kendo 数据源。我还使用代理将列字段和显示名称注入到模板中。

我很难处理的是不知道如何在不知道属性名称的情况下直接引用行数据。我知道在普通的 kendo 模板中，您可以执行 #= WorkItemId = 来获取值本身，但我正在寻找类似于 #= model[item.field] # 的内容，以便我可以动态提取值。

这可能吗？我试过 this，但这指向我用 $.proxy 注入的值。我也尝试过 item、model 等，但似乎没有任何东西能满足我的需求。

// kendo.datasource
for (i = 0; i < columns.length; ++i) {
    // add template to the cell
    columns[i].template = $.proxy(
        kendo.template($('#QueueTemplate_Default').html()),
        {
            columnName: columns[i].title,
            fieldName: columns[i].field
        }
    );
}

// cell template
<script id="QueueTemplate_Default" type="text/x-kendo-template">
    #= {{model/this/something}}[item.columnName] #
</script>

// example schema that comes back from the controller
{
"schema": {
    "data": "Data",
    "total": "Total",
    "model": {
        "id": "WorkItemId",
        "field": {
            "WorkItemId": {
                "editable": false,
                "type": "number"
            },
            "WorkItem": {
                "editable": false,
                "type": "string"
            },
            // edited for brevity
        }
    }
},
"columns": [
    {
        "field": "WorkItemId",
        "title": "Work Item Id",
        "template": null
    },
    {
        "field": "WorkItem",
        "title": "Work Item",
        "template": null
    },
    // edited for brevity
]
}

Answer 1

在模板中，您有 data 个对象。事实上，您只能通过 #= PropertyA # 之类的名称访问所有属性，因为代码被包装在 with(data) { ... } 中（reference) statement. So doing #= PropertyA # is the same as #= data.PropertyA #. Note that with 已过时。

示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
  <script>
    let data = {
        propertyName: 'myProperty',
        myProperty: 'myValue'
      };
    
    console.log(kendo.template("#= data[data.propertyName] #")(data));
  </script>
</head>
<body>
</body>
</html>

Demo

你的情况我觉得可以是这样的：

<script id="QueueTemplate_Default" type="text/x-kendo-template">
    #= data[item.columnName] #
</script>

Kendo UI (jquery) 模板在属性名称在字符串中时获取值

Kendo UI (jquery) template getting value when property name is in a string

javascript

c#

asp.net

kendo-ui

Kendo UI (jquery) 模板在 属性 名称在字符串中时获取值

Kendo UI (jquery) template getting value when property name is in a string

javascript

c#

asp.net

kendo-ui

Kendo UI (jquery) 模板在属性名称在字符串中时获取值