Kendo UI 带有嵌套评估的网格列模板 - 怎么做?

Kendo UI grid column template with nested evaluations - how to?

Kendo UI 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>"

我知道我需要 'drop out' 引用字符串才能使评估工作,并且由于我对整个表达式使用了双引号,所以我将条件中的按钮作为单引号字符串返回,并因此转义按钮属性,但我无法对其进行评估 #=.

我尝试了很多不同的组合,但我都忘记了。

那么 'right-way' 这样做的目的是什么?

一个解决方案:

接受 David 的回答并修改为在函数中使用模板评估:

{ 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 '';
    }
}

让函数执行初始测试会删除一个级别并允许 'normal' 进行评估。

你可以改用函数,我相信它会让你的事情变得容易得多。

您的模板可以是"#= 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>