Я работаю с 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;
}
}
})();