1

我有一个绑定到“LabsViewVM”视图模型的 MVVM 网格，如下所示。列命令'activate'、'suspend'、'abolish'通过'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();
    }   

});

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

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

考虑到这一点，我能够通过事件参数“e”访问transitLab内部的父网格。

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

所以我换了

{ '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 处理程序中崩溃，因为它的事件参数 'e'没有填充与以前相同的上下文数据。例如，第一种情况下的 e.delegateTarget 指向网格，而第二种情况下指向命令按钮本身。

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

4

0 回答 0