带有嵌套评估的 Kendo UI 网格列模板 - 如何？答案

【问题标题】：Kendo UI grid column template with nested evaluations - how to?带有嵌套评估的 Kendo UI 网格列模板 - 如何？
【发布时间】：2018-03-14 18:36:10
【问题描述】：

剑道用户界面 v2015.2.805

我有一个带有模板列的 KendoGrid，它根据条件确定是否应该添加一组按钮，如果需要额外的评估，我不知道如何嵌套它们。

以下内容有效，但没有所需的额外评估：

{ field: "Served", title: "Served", 
template: "<div>" + 
"#= (Kind==0 || Kind==7) ? '" + 
"<button type=\"button\" data-id=\"12345\">Yes</button>" + 
"<button type=\"button\" data-id=\"54321\">No</button>" + 
"' : " +  
"'NO BUTTON HERE'" +  
"#</div>"

我对它进行了多排线，试图让它看起来不错，但事实并非如此。这个想法是，如果 Kind = 0 或 7 则显示两个按钮，否则不显示。效果很好。

但是我需要将 data-id 评估为 #= ID #，所以我尝试：

" <button type=\"button\" data-id=\"' #= ID # '\">Yes</button>"

我知道我需要“退出”带引号的字符串才能使评估工作，因为我对整个表达式使用了双引号，所以我将条件中的按钮作为单引号字符串返回，因此转义按钮属性，但我无法评估#=。

我已经尝试了很多不同的组合，但我迷失了方向。

那么，这样做的“正确方法”是什么？

解决方案：

接受大卫的回答，修改为在函数中使用模板评估：

{ field: "Served", title: "Served", 
  template: function (data) {
    switch (data.Kind) {
      case 0:
      case 7:
        var template = kendo.template("<button type='button' data-id='#= ID #' >Yes</button><button type='button' data-id='#= ID #'>No</button>");
        return template(data);
      default:
        return '';
    }
}

让函数执行初始测试会删除一个级别并允许进行“正常”评估。

【问题讨论】：

我不确定您是否在使用 asp.net mvc 构建器，因此我提出了一个易于与 mvc 构建器一起使用的解决方案。但如果您是客户端并控制完整的初始化，这是正确的方法:)

标签： kendo-ui kendo-grid kendo-template

【解决方案1】：

你可以使用一个函数来代替我相信它会让你的事情变得更容易。

您的模板可以是"#= buildButtons(data) #"

function buildButtons(model) {
    if (model.Kind == 0 || model.Kind == 7) {
        return "hello world";
    }

    return "";
}

这是一个代码示例 https://dojo.telerik.com/UQuqAfuv

<div id="grid"></div>
  <script>
  var people = [
    { id: 1, firstName: 'David', lastName: 'Lebee' },
    { id: 2, firstName: 'John', lastName: 'Doe' }
  ];

  $('#grid').kendoGrid({ 
        dataSource: {
        transport: {
            read: function(options) {
            options.success(people);
          }
        }
      },
        columns: [
        { field: 'firstName', title: 'First Name'  },
        { field: 'lastName', title: 'Last Name' },
        { title: 'Actions', template: '#= buildActions(data) #'}
      ]
  });


  function buildActions(model) {
        if (model.firstName == "David") {
        return 'Hello David';
      }

      return '';
  }
  </script>

【讨论】：