为什么 Kendo 使用 Typescript 编写的自定义读取方法的 TreeList DataSourceTransport 会变得疯狂？

Question

我正在使用带有 Typescript 的 Angular 1.4.9，我想显示一个树列表，其中数据来自 Restangular 调用的服务器。因此，我在 Kendo DataSource 中有自定义传输方法，如下所示。

很遗憾，我对 Typescript 还不是很熟悉。

问题:

加载页面后 Kendo TreeList 会触发 readRepository 方法以从服务器获取数据，当数据或部分数据（我的意思是一行）被加载时，它会触发对服务器，对我来说，当它获得一行数据时，它会使用它并不必要地再次调用服务器。我不明白为什么。

请查收相关代码！

到目前为止我做了什么:

我创建了用 javascript 编写的同一个控制器，它运行得非常棒
我已经尝试根据答案更改 DataSourceTransport.read 调用 this.readRepository 的方式，但结果是一样的。

用 Typescript 编写的 ShowTestSuitTreeController：

module sayusiando.gonogo.web.spa.mainpage.showtestsuittree.controllers {
    import IGeneralTestSuitTestCaseContract = sayusiando.gonogo.web.spa.common.contracts.IGeneralTestSuitTestCaseContract;
    import DataSourceTransport = kendo.data.DataSourceTransport;
    import DataSourceSchema = kendo.data.DataSourceSchema;
    import DataSourceSchemaModelFields = kendo.data.DataSourceSchemaModelFields;
    import TestManagementService = sayusiando.gonogo.web.spa.service.ITestManagementService;
    "use strict";

    export interface IShowTestSuitTreeController {
        activate: () => void;
    }

    class ShowTestSuitTreeController implements IShowTestSuitTreeController {

        //#region Variables
        testSuiteTree = [];
        testSuiteTreeKendoTreeListOptions: kendo.ui.TreeListOptions = {};
        //#endregion

        //#region Inject and ctor
        static $inject: string[] = ['testManagementService'];

        constructor(
            private testManagementService: gonogo.web.spa.service.ITestManagementService
        ) {

            this.activate();

        }
        //#endregion

        activate(): void {

            var dataSourceTransport = <DataSourceTransport>{
                //read: this.readRepository.bind(this)
                read: (e) => this.readRepository(e)
            };

            var schema: DataSourceSchema = <DataSourceSchema>{
                model: {
                    id: "id",
                    parentId: "parentId",
                    fields: <DataSourceSchemaModelFields>{

                        id: { type: "number", editable: false, nullable: true },
                        name: { type: "string", editable: false, nullable: true }

                    }

                }

            };

            var dataSource = new kendo.data.TreeListDataSource({
                transport: dataSourceTransport,
                schema: schema,
                batch: true
            });


            var idColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
                field: "id",
                width: "100px"
            };
            var nameColumn: kendo.ui.TreeListColumn = <kendo.ui.TreeListColumn>{
                field: "name",
                width: "400px"
            };

            this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
            this.testSuiteTreeKendoTreeListOptions.sortable = false;
            this.testSuiteTreeKendoTreeListOptions.editable = false;
            this.testSuiteTreeKendoTreeListOptions.columns = [
                idColumn,
                nameColumn
            ];

        }

        readRepository(e): any {

            this.testManagementService.getTestSuitTree().then((result: Array<IGeneralTestSuitTestCaseContract>): void => {
                e.success(result);
            }, (reason: any): void => {
                e.error(reason);
            });

            console.log('e', e);

            return e;
        }

    }

    angular
        .module("goNoGo")
        .controller("showTestSuitTreeController", ShowTestSuitTreeController);
}

生成的javascript:

var sayusiando;
(function (sayusiando) {
    var gonogo;
    (function (gonogo) {
        var web;
        (function (web) {
            var spa;
            (function (spa) {
                var mainpage;
                (function (mainpage) {
                    var showtestsuittree;
                    (function (showtestsuittree) {
                        var controllers;
                        (function (controllers) {
                            "use strict";
                            var ShowTestSuitTreeController = (function () {
                                function ShowTestSuitTreeController(testManagementService) {
                                    this.testManagementService = testManagementService;
                                    //#region Variables
                                    this.testSuiteTree = [];
                                    this.testSuiteTreeKendoTreeListOptions = {};
                                    this.activate();
                                }
                                //#endregion
                                ShowTestSuitTreeController.prototype.activate = function () {
                                    var _this = this;
                                    var dataSourceTransport = {
                                        //read: this.readRepository.bind(this)
                                        read: function (e) { return _this.readRepository(e); }
                                    };
                                    var schema = {
                                        model: {
                                            id: "id",
                                            parentId: "parentId",
                                            fields: {
                                                id: { type: "number", editable: false, nullable: true },
                                                name: { type: "string", editable: false, nullable: true }
                                            }
                                        }
                                    };
                                    var dataSource = new kendo.data.TreeListDataSource({
                                        transport: dataSourceTransport,
                                        schema: schema,
                                        batch: true
                                    });
                                    var idColumn = {
                                        field: "id",
                                        width: "100px"
                                    };
                                    var nameColumn = {
                                        field: "name",
                                        width: "400px"
                                    };
                                    this.testSuiteTreeKendoTreeListOptions.dataSource = dataSource;
                                    this.testSuiteTreeKendoTreeListOptions.sortable = false;
                                    this.testSuiteTreeKendoTreeListOptions.editable = false;
                                    this.testSuiteTreeKendoTreeListOptions.columns = [
                                        idColumn,
                                        nameColumn
                                    ];
                                };
                                ShowTestSuitTreeController.prototype.readRepository = function (e) {
                                    this.testManagementService.getTestSuitTree().then(function (result) {
                                        e.success(result);
                                    }, function (reason) {
                                        e.error(reason);
                                    });
                                    console.log('e', e);
                                    return e;
                                };
                                //#endregion
                                //#region Inject and ctor
                                ShowTestSuitTreeController.$inject = ['testManagementService'];
                                return ShowTestSuitTreeController;
                            }());
                            angular
                                .module("goNoGo")
                                .controller("showTestSuitTreeController", ShowTestSuitTreeController);
                        })(controllers = showtestsuittree.controllers || (showtestsuittree.controllers = {}));
                    })(showtestsuittree = mainpage.showtestsuittree || (mainpage.showtestsuittree = {}));
                })(mainpage = spa.mainpage || (spa.mainpage = {}));
            })(spa = web.spa || (web.spa = {}));
        })(web = gonogo.web || (gonogo.web = {}));
    })(gonogo = sayusiando.gonogo || (sayusiando.gonogo = {}));
})(sayusiando || (sayusiando = {}));
//# sourceMappingURL=showTestSuitTreeController.js.map

工作正常的 javscript 控制器：

(function () {
    'use strict';

    angular
        .module('goNoGo')
        .controller('showTestSuitTreeController2', showTestSuitTreeController2);

    showTestSuitTreeController2.$inject = ['testManagementService'];

    function showTestSuitTreeController2(testManagementService) {
        /* jshint validthis:true */
        var vm = this;



        activate();

        function activate() {

            vm.testSuiteTreeKendoTreeListOptions = {
                dataSource: {
                    transport: {
                        read: getTestSuiteTree
                    },
                    schema: {
                        model: {
                            id: "id",
                            parentId: "parentId",
                            fields: {
                                Id: { type: "number", editable: false, nullable: false },
                                ParentId: { type: "number", editable: false, nullable: false },
                                Name: { type: "string", editable: false, nullable: false }
                            }
                        }
                    }
                },
                sortable: false,
                editable: false,
                columns: [
                    { field: "id", width: "30px" },
                    { field: "name", width: "300px" }
                ]
            };

        }

        function getTestSuiteTree(e) {

            testManagementService.getTestSuitTree().then(function (result) {
                e.success(result.plain());
            }, function (error) {
                e.error(error);
            });

            console.log('e', e);

            return e;
        }
    }
})();

Answer 1

解决方法是必须调用result的plain()方法。结果由Restangular提供。

为什么 Kendo 使用 Typescript 编写的自定义读取方法的 TreeList DataSourceTransport 会变得疯狂？

Why Kendo TreeList DataSourceTransport with custom read method written in Typescript does go wild?

javascript

angularjs

kendo-ui

typescript

kendo-datasource