Question

我有一个MVVM Grid绑定到＆＃39; LabsViewVM＆＃39; ViewModel，如下所示。列命令＆＃39;激活＆＃39;，＆＃39;暂停＆＃39;，＆＃39;废除＆＃39;通过点击＆＃39;进行绑定。事件到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();
    }   

});

我引用了https://www.packtpub.com/books/content/kendo-mvvm-framework，点击属性的一些信息只是为了强调kendo将其点击事件与传统点击事件区分开来的方式。

＆＃34; click属性将按钮的click事件绑定到View-Model内部的函数。它是事件绑定的快捷方式，我们稍后会看到。与传统的点击事件连线不同， Kendo UI框架会将上下文数据传递给事件处理程序，以提供更丰富的事件处理体验。例如，当一个click事件绑定在一个行模板中时，传递给事件处理程序的事件参数将有权访问源集合中的项。这允许事件处理程序直接对该Model数据进行操作任何进一步的DOM探索并保持所有可观察的功能。＆＃34;

考虑到这一点，我能够通过事件参数＆＃39;来访问transitLab内的父网格。

然后我不得不改变我的实现并使用kendo模板作为列命令，因为我需要在命令按钮的外观中添加一些逻辑。

所以我换了

{ '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() }

与

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

但它没有用。

我的代码在transitLab处理程序内崩溃，因为它的事件参数＆＃39; e＆＃39; 未填充与之前相同的上下文数据。例如，e.delegateTarget在第一种情况下指向网格，而在第二种情况下指向命令按钮本身。

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

如何在kendo mvvm grid column命令中使用模板？

0 个答案: