如何使用类型记录与SapUI5解析两个模块系统
如何使用类型记录与SapUI5解析两个模块系统
提问于 2018-05-17 11:20:12
我正在尝试在SAPUI5中使用类型记录，我看到了一些创建类型记录类的示例，然后将其传递给SAPUI5控制器中的Controller.extend。
我遇到的问题是，当我尝试在类型记录中使用模块时，比如"import * as $ from“jquery。Typescript为模块生成定义()包装器，并注入'require‘、'export’和'jquery‘。当我尝试加载这些模块时，我会得到'define’，当我包含‘require’时，我会得到'export‘。
这是我所得到的最接近的，但它使模块系统保持独立，并且需要大量的接口代码：
index.html：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test App</title>
<!--Loads from sapui5.hana.ondemand.com-->
<script src="/resources/sap/ui/thirdparty/require.js"></script>
<script src="/resources/sap-ui-core.js"
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.commons,sap.ui.table'
data-sap-ui-bindingSyntax='complex'
data-sap-ui-resourceroots='{"TestApp": "/testApp"}'>
</script>
<script>
require(["/testApp/controller/tsclasses/Home.js"], function (contHome) {
window.tsclasses = {
controller: {
Home: contHome.default
}
};
sap.ui.getCore().attachInit(function () {
sap.m.Shell({
title: "Test App",
showLogout: true,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
height: "100%",
name: "TestApp"
})
}).placeAt("content");
});
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>Component.js
sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
"use strict";
return UIComponent.extend("TestApp", {
metadata: {
rootView: "TestApp.view.App",
routing: {
config: {
routerClass: "sap.m.routing.Router",
viewPath: "TestApp.view",
controlId: "rootControl",
controlAggregation: "pages",
viewType: "XML"
},
routes: [
{
name: "home",
// empty hash - normally the start page
pattern: "",
target: "home"
}],
targets: {
"home": {
viewName: "Home",
viewLevel: 0
}
}
}
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
var AppComponent = this;
AppComponent.getRouter().initialize();
}
});
}, /* bExport= */ true);Home.controller.js
sap.ui.define(
["sap/ui/core/mvc/Controller"],
function (Controller) {
"use strict";
return Controller.extend("TestApp.controller.Home", new tsclasses.controller.Home());
}
);Home.ts
import * as $ from "jquery";
declare var sap: any;
namespace tsclasses.controller {
export class Home extends sap.ui.core.mvc.Controller {
public onInit(): void {
alert('here');
var x = $(window).width();
}
}
}
export default tsclasses.controller.Home;App.view.xml
<View xmlns="sap.m">
<App id="rootControl">
</App>
</View>Home.view.xml
<View
xmlns="sap.m"
controllerName="TestApp.controller.Home">
<Page class="sapUiContentPadding"
title="App Test Home">
<content>
<Text text="text" />
</content>
</Page>
</View>这个解决方案对我来说很有价值，因为我真的想使用类型检查和intellisense，但我还是想让我的类型记录模块加载程序和SAPUI5模块加载程序共享状态等等，这样它才能正常工作。
回答 1
Stack Overflow用户
发布于 2018-05-21 09:28:57
我还没有找到一个合适的解决方案来解决我的问题，但我已经确定了我认为最整洁的解决方案，它使用了更少的文件。
由于VS 2017自动对引用类型进行类型检查，因此不需要导入目标模块，例如，如果您想要为jquery进行类型检查，就不必从'jquery‘作为$导入*。不需要导入模块意味着您可以在没有任何模块加载程序或模块类型功能的情况下转换类型记录。您还必须切换到ES5输出，因为ES6输出仍然使用'exports‘变量输出一行。
我的测试文件现在看起来如下：
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test App</title>
<script src="/resources/sap-ui-core.js"
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.commons,sap.ui.table'
data-sap-ui-bindingSyntax='complex'
data-sap-ui-resourceroots='{"TestApp": "/testApp"}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.m.Shell({
title: "Test App",
showLogout: true,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
height: "100%",
name: "TestApp"
})
}).placeAt("content");
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>Component.js
sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
"use strict";
return UIComponent.extend("TestApp", {
metadata: {
rootView: "TestApp.view.App",
routing: {
config: {
routerClass: "sap.m.routing.Router",
viewPath: "TestApp.view",
controlId: "rootControl",
controlAggregation: "pages",
viewType: "XML"
},
routes: [
{
name: "home",
// empty hash - normally the start page
pattern: "",
target: "home"
}],
targets: {
"home": {
viewName: "Home",
viewLevel: 0
}
}
}
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
var AppComponent = this;
AppComponent.getRouter().initialize();
}
});
}, /* bExport= */ true);Home.controller.js
在SAPUI5 5的模型中，类型' TestApp.controller.Home‘被导出到全局范围，因此在定义替换它之后立即重新定义类型，这允许我们使用用类型记录编写的类来定义TestApp.controller.Home。此外，SAPUI5可以在不需要模块的情况下将原始Javascript文件加载到全局范围内，因此我们可以在这里加载所需的类--这两个技巧使我们能够将所有内容很好地放到单个控制器文件中。
declare var sap: any;
sap.ui.define(
["sap/ui/core/mvc/Controller", "/TestApp/controller/tsclasses/DataClass"],
function (Controller: any, jsDataClass: any) {
"use strict";
return Controller.extend("TestApp.controller.Home", {});
}
);
namespace TestApp.controller {
export class Home extends sap.ui.core.mvc.Controller {
public onInit() {
var data = new tsclasses.controller.DataClass();
alert(data.message);
alert('width = ' + $(window).width());
}
}
}Home.ts -移除-不再需要
App.view.xml
<View xmlns="sap.m">
<App id="rootControl">
</App>
</View>Home.view.xml
<View
xmlns="sap.m"
controllerName="TestApp.controller.Home">
<Page class="sapUiContentPadding"
title="App Test Home">
<content>
<Text text="text" />
</content>
</Page>
</View>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50390153
复制相关文章
相似问题
腾讯云开发者
