Kendo ui 如何在剑道mvvm网格列命令中使用模板?

Kendo ui 如何在剑道mvvm网格列命令中使用模板?,kendo-ui,kendo-grid,kendo-mvvm,kendo-template,Kendo Ui,Kendo Grid,Kendo Mvvm,Kendo Template,我将一个MVVM网格绑定到“LabsViewVM”视图模型,如下所示。 列命令“activate”、“suspend”、“exclude”通过“click”事件绑定到LabsViewVM的transitLab方法/处理程序,该方法执行得很好 <div id="labs_view" data-role="grid" data-bind="source: labs, visible: isVisible, events: {edit: createLab,

我将一个MVVM网格绑定到“LabsViewVM”视图模型,如下所示。 列命令“activate”、“suspend”、“exclude”通过“click”事件绑定到LabsViewVM的transitLab方法/处理程序,该方法执行得很好

<div    id="labs_view"
        data-role="grid"
        data-bind="source: labs, visible: isVisible, events: {edit: createLab, dataBound: dataBound, dataBinding: dataBinding}"
        data-detail-init="LabsViewVM.detailInit"
        data-detail-template= 'lab_details_template'
        data-selectable="row"
        data-scrollable= "true"
        data-resizable= "true"
        data-sortable= "{'allowUnsort': false}"
        data-pageable="{ 'pageSizes': [5, 10, 15, 20, 25, 30, 50], 
                         'messages':  { 'display': '{0}-{1} από {2} Διατάξεις Η/Υ', 
                                        'empty': 'Δεν βρέθηκαν Διατάξεις Η/Υ',
                                        'itemsPerPage': 'Διατάξεις Η/Υ ανά σελίδα', 
                                        'first': 'μετάβαση στην πρώτη σελίδα',
                                        'previous': 'μετάβαση στην προηγούμενη σελίδα',
                                        'next': 'μετάβαση στην επόμενη σελίδα',
                                        'last': 'μετάβαση στην τελευταία σελίδα' }}"
        data-editable="{ 'mode' : 'popup', 'template': $('#lab_create_template').html()}"
        data-toolbar="[{ 'template' : $('#lab_toolbar_template_labs_view').html()  }]"
        data-columns="[{ 'field': 'lab_id', 'title':'Κωδικός Διάταξης Η/Υ', 'width':'65px', 'hidden' : true},
                       { 'field': 'lab_name', 'title':'Ονομασία', 'width':'440px'},
                       { 'field': 'lab_type', 'title':'Τύπος', 'width':'150px', 'hidden' : true},
                       { 'field': 'lab_state', 'title':'Λειτουργική Κατάσταση', 'width':'150px'},
                       { 'field': 'rating', 'title':'Αξιολόγηση', 'template' : $('#labs_view_rating_column_template').html(), 'width':'85px'},
                       { 'field': 'positioning', 'title':'Τοποθεσία', 'width':'180px', 'hidden' : true},
                       { 'field': 'lab_special_name', 'title':'Ειδική Ονομασία', 'width':'180px', 'hidden' : true},
                       { 'field': 'creation_date', 'title':'Ημερομηνία Δημιουργίας', 'width':'150px', 'hidden' : true},
                       { 'field': 'last_updated', 'title':'Τελευταία Ενημέρωση', 'width':'150px'},
                       { 'field': 'created_by', 'title':'Δημιουργία από', 'width':'130px', 'hidden' : true},
                       { 'command': [{'text':'Ενεργοποίηση', 'click':LabsViewVM.transitLab, 'name':'activate'},
                                     {'text':'Αναστολή', 'click':LabsViewVM.transitLab, 'name':'suspend', },
                                     {'text':'Κατάργηση', 'click':LabsViewVM.transitLab, 'name':'abolish'}], 
                                    'title': 'Ενέργειες', 'width':'500px', 'hidden': LabsViewVM.hideLabTransitColumn() }
                      ]">
</div>



var LabsViewVM = kendo.observable({

    transitLab: function(e){
        e.preventDefault();
        var parent_grid = $(e.delegateTarget).data("kendoGrid");

        var transition_dialog = $("#transition_dialog").kendoWindow({
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 500,
                    pinned:true,
                    open: function(){lots of code...}
        }).data("kendoWindow");

        var transitTemplate = kendo.template($("#lab_transit_template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        transition_dialog.content(transitTemplate(dataItem));
        transition_dialog.center().open();
    }   

});

和模板:

<script id="labs_grid_command_column_template" type="text/x-kendo-template">   
    #if( some condition ){#
        <a class="k-button k-button-icontext k-grid-activate" href="\#" data-bind="click: transitLab"><i class="fa fa-check"></i> Ενεργοποίηση </a>
        <a class="k-button k-button-icontext k-grid-suspend" href="\#" data-bind="click: transitLab"><i class="fa fa-clock-o"></i> Αναστολή </a>
        <a class="k-button k-button-icontext k-grid-abolish" href="\#" data-bind="click: transitLab"><i class="fa fa-ban"></i> Κατάργηση </a>
    #}#
</script>
但它不起作用

我的代码在transitLab处理程序中崩溃,因为它的事件 参数“e”没有像以前那样使用相同的上下文数据填充。 例如,在第一种情况下,e.delegateTarget指向网格,而在第二种情况下,e.delegateTarget指向命令按钮本身

我不明白。这两种实现不应该有相同的效果吗??请帮忙

{ 'command': [{'name':'commands', 'template': $('#labs_grid_command_column_template').html()}], 'title': 'Ενέργειες', 'width':'270px' }
<script id="labs_grid_command_column_template" type="text/x-kendo-template">   
    #if( some condition ){#
        <a class="k-button k-button-icontext k-grid-activate" href="\#" data-bind="click: transitLab"><i class="fa fa-check"></i> Ενεργοποίηση </a>
        <a class="k-button k-button-icontext k-grid-suspend" href="\#" data-bind="click: transitLab"><i class="fa fa-clock-o"></i> Αναστολή </a>
        <a class="k-button k-button-icontext k-grid-abolish" href="\#" data-bind="click: transitLab"><i class="fa fa-ban"></i> Κατάργηση </a>
    #}#
</script>