剑道UI：如何使用MVVM（数据属性）绑定剑道UI分层datagrid detailInit事件

我正在使用KendoUI构建分层数据网格，并使用MVVM方法进行小部件绑定。 下面是我想要制作的那种层次化网格的。但是这里的示例使用jQuery而不是MVVM

如何使用

MVVM

使用

data

属性将事件绑定到我的

viewModel

我想使用以下代码绑定事件，但它不起作用：

JS:

var viewModel = kendo.observable({
    ......
    ..........
    dataGridDetailInit: function (e) {
        //Here I want to catch the detailInit event of the dataGrid
    },
    ..........
    ......
});

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
        {'field':'Contact_Type', 'title':'Contact Type'},

    ]" 
    data-bind ="source: address_book_datagrid_observable.datasource,
                events: { 
                    detailInit: dataGridDetailInit 
                }" 
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    >
</div>

HTML（剑道模板）：

var viewModel = kendo.observable({
    ......
    ..........
    dataGridDetailInit: function (e) {
        //Here I want to catch the detailInit event of the dataGrid
    },
    ..........
    ......
});

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
        {'field':'Contact_Type', 'title':'Contact Type'},

    ]" 
    data-bind ="source: address_book_datagrid_observable.datasource,
                events: { 
                    detailInit: dataGridDetailInit 
                }" 
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    >
</div>

---

好的，所以在研究时我遇到了

关于这个问题，Telerik的一名工程师断言：

所有剑道小部件都可以通过配置。建筑 也支持声明式分层网格，但请 请记住：detailInit事件不应通过事件绑定 绑定，但通过数据属性

事件绑定是如何完成的

使用

MVVM

将

detailInit

事件绑定到

viewModel

的正确方法是使用

data detailInit

，如下所示：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
        {'field':'Contact_Type', 'title':'Contact Type'},

    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.dataGridDetailInit"
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    >
</div>