数据绑定在 kendo.template 中不起作用

Question

我在尝试在 Kendo 网格中实现自定义删除按钮时遇到问题。这是我的代码：

查看：

<div id="gridAdditionalLines">

Javascript:

var dataSourceGrid = new kendo.data.DataSource({
            data: MyData,   --> It's a type of Kendo.Observable
            schema: {
                model: {
                    Id: "Id",
                    fields: {
                        Id: { editable: false, nullable: true },
                        Column1: { editable: false, nullable: true },
                        Description: { validation: { required: true} },
                        Value: { validation: { required: true} }
                    }
                }
            }
        });

        $("#MyGrid").kendoGrid({
            dataSource: dataSourceGrid,
            editable: true,
            navigatable: true,
            toolbar: ["create"],
            columns: [
                        { field: "Description" },
                        { field: "Value" },
                        { command: [{name: "destroy", template: kendo.template($("#DeleteTemplate").html())}], width: 60}
            ]
        });

这是我用于每行删除按钮的模板：

<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
    <span class="glyphicon glyphicon-remove"></span> 
</button>

使用上面的代码，Kendro 网格可以正确显示数据。但是，当尝试删除任何行时，此时单击“删除”按钮，没有任何反应。

我是不是漏了什么？

Answer 1

自从我使用 Kendo 以来已经有一段时间了，但如果我没记错的话，由于网格本身不受 MVVM 约束，其子元素（包括呈现的模板）的 none也将检查 MVVM 数据绑定属性。

如果您的网格是使用 data-role="grid" 通过 MVVM 初始化的，那么我认为模板也会被绑定。

我忘记了具体怎么做，但我相信当网格触发其 dataBound 事件时，您可以手动调用网格的子元素 kendo.bind(...) 以使它们绑定到 MVVM。

Answer 2

此处缺少您的按钮点击功能。添加此脚本后，一个按钮将添加到网格中，但未指定单击按钮时发生的情况

<script type="text/x-kendo-template" id="DeleteTemplate">
<button class="btn btn-default" data-bind="click: Applicability.deleteLine">
    <span class="glyphicon glyphicon-remove"></span> 
</button>

然后你必须为按钮添加一个onclick函数：

$('.btn.btn-default').on('click', function() {
  var grid = $("#grid").data("kendoGrid");
   var dataItem = grid.dataItem($(this).closest("tr"));


  if(confirm('Are you sure you want to delete : ' + dataItem.name)) {

    grid.dataSource.remove(dataItem);
    grid.dataSource.sync();
    grid.refresh();
  }  
});

Check jsbin here