Почему Kendo TreeList DataSourceTransport с настраиваемым методом чтения, написанным на Typescript, сходит с ума?

Я работаю с Angular 1.4.9 с Typescript, и я хотел бы отобразить древовидный список, в котором данные поступают с сервера, вызываемого Restangular. Итак, у меня есть собственный метод транспортировки в Kendo DataSource, как вы можете видеть ниже.

К сожалению, я еще не очень хорошо разбираюсь в Typescript.

Проблема:

Когда страница загружается, Kendo TreeList запускает метод readRepository для получения данных с сервера, когда данные или частичные данные — я имею в виду строку — загружаются, тогда он запускает множество вызовов на сервер, для меня это кажется, когда он получает строка данных, которую он использует, и снова вызывает сервер без необходимости. Я не понимаю, почему.

введите здесь описание изображения

Пожалуйста, найдите соответствующий код в приложении!

Что я сделал на данный момент:

  • Я создал тот же контроллер, написанный на javascript, и он работает как шарм.
  • Я попытался изменить то, как DataSourceTransport.read вызывает this.readRepository в соответствии с этом ответе, но результат тот же.

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

Контроллер javascript, который отлично работает:

(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;
        }
    }
})();

person AndrasCsanyi    schedule 28.02.2016    source источник


Ответы (1)


Решение состоит в том, что должен быть вызван метод plain() результата. Результат предоставлен Restangular.

person AndrasCsanyi    schedule 28.03.2016