javascript - Kendo UI 与 Javascript 模块化模式

Question

我正在使用 kendo ui 创建一个大型业务应用程序。由于应用程序很大。我们已经开始在 javascript 代码中遵循模块化模式。

在 kendo ui 中使用模块化模式时。我遇到了一些错误。

我已经创建了层次结构网格。每个网格代码将是模块化对象。如下所示:

但我遇到以下错误:(我已经评论了这样的错误行//error。请参阅下文)

SCRIPT5007:无法获取未定义或空引用的“查找”属性。

错误的原因是“this”对象引用了 window 对象。但它应该引用剑道网格对象..如何解决这个问题

   var Customer = (function ($,window) {
var gridCustomer = null;
var dataSource = null;
var createColumns = function () {
    return [
                {
                    field: "FirstName",
                    title: "First Name",
                    width: "110px"
                },
                {
                    field: "LastName",
                    title: "Last Name",
                    width: "110px"
                },
                {
                    field: "Country",
                    width: "110px"
                },
                {
                    field: "City",
                    width: "110px"
                },
                {
                    field: "Title"
                }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        CustomerID: { editable: false, nullable: false, type: "int" },
                        FirstName: { editable: true, nullable: false, type: "string" },
                        LastName: { editable: true, nullable: true, type: "string" },
                        Country: { editable: true, nullable: true, type: "string" },
                        City: { editable: true, nullable: true, type: "string" },
                        Title: { editable: true, nullable: true, type: "string" }
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};
var onDataBound = function () {        
    this.expandRow(this.tbody.find("tr.k-master-row").first());//error
};
var init = function () {
    gridCustomer = $("#gridCustomer").kendoGrid({
        sortable: true,
        filterable: true,
        pageable: {
            pageSize: 5,
            pageSizes: true
        },
        columns: createColumns(),
        dataSource: setDataSource(),
        dataBound: onDataBound(),
        detailInit: Order.Init()
    });
};

return {
    Init: function () {
        init();
    }
}
})(jQuery,window);

var Order = (function ($,window) {
var gridOrder = null;
var dataSource = null;
var createColumns = function () {
    return [
            { field: "OrderID", width: "70px" },
            { field: "ShipCountry", title: "Ship Country", width: "110px" },
            { field: "ShipAddress", title: "Ship Address" },
            { field: "ShipName", title: "Ship Name", width: "200px" }
    ]
};
var setDataSource = function () {
    if (customerGridDataSource != undefined) {
        return dataSource = new kendo.data.DataSource({
            data: customerGridDataSource,
            schema: {
                data: function (response) {
                    return response;
                },
                total: function (response) {
                    return response.length;
                },
                model: {
                    id: "CustomerID",
                    fields: {
                        OrderID: { editable: false, nullable: false, type: "int" },
                        ShipCountry: { editable: true, nullable: false, type: "string" },
                        ShipAddress: { editable: true, nullable: true, type: "string" },
                        ShipName: { editable: true, nullable: true, type: "string" }                            
                    }
                }
            },
            pageSize: 5,
            serverPaging: false,
            serverSorting: false,
            serverFiltering: false,
            filter: { field: "CustomerID", operator: "eq", value: e.data.CustomerID }
        });
    }
    else {
        alert("Data Source undefined. Please Contact Administrator.")
    }
};    
var init = function (e) {
    gridOrder = $("<div/>").appendTo(e.detailCell).kendoGrid({            
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: createColumns(),
        dataSource: setDataSource()
    });
};

return {
    Init: function (e) {
        init(e);
    }
}
})(jQuery,window);

 $(function () {
    Customer.Init();
 });

Answer 1

Kendo ui 为dataBound 事件提供了一个名为e 的参数。 e.sender 是网格。所以你的代码应该是这样的:

var onDataBound = function (e) {
    var grid = e.sender;
    grid.expandRow(grid.tbody.find("tr.k-master-row").first());
};

正如我在评论中提到的:问题似乎出在 dataBound:onDataBound() 上，因为您应该将函数 onDataBound 设置为 dataBound 事件而不是结果onDataBound() 的执行。e 是未定义的，因为 kendo 执行 onDataBound() 时要设置 dataBound 事件的初始值，而不是 dataBound 事件具有的时间发生。将 dataBound: onDataBound() 替换为 dataBound: onDataBound 并重试:

var init = function () {
gridCustomer = $("#gridCustomer").kendoGrid({
    sortable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        pageSizes: true
    },
    columns: createColumns(),
    dataSource: setDataSource(),
    dataBound: onDataBound, //Not immediately execution
    detailInit: Order.Init //Not immediately execution
});

};