SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用

简介: SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用
+关注继续查看

如下图所示:

image.png

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m, sap.ui.comp"
    data-sap-ui-bindingSyntax="complex" 
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async"
    data-sap-ui-resourceroots='{
  "sap.ui.demo.CombineLatest": "./"
    }'>
</script>


我刚学习 SAP UI5 时,对 data-sap-ui-resourceroots 的作用很是费解。


浏览我们开发的整个 SAP UI5 项目资源,无论是 Component.js:


image.png



还是视图的控制器:

image.png


还是视图的 id 本身,都包含了 sap.ui.demo.CombineLatest 的前缀:

image.png


如果我们把 index.html 里的 data-sap-ui-resourceroots 指令去掉:


image.png


会发现应用根本无法加载了,Chrome 开发者工具里报了很多资源文件无法加载的错误。


image.png


摘取其中一条错误消息出来分析。现在 Component.js 的加载路径为:


https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Component.js


显然,这个路径是继承自 index.html 里 id 为 sap-ui-bootstrap 里的 src 属性定义的 SAP UI5 库文件:


image.png


我们工程文件里的 Component.js, 其 id 为 sap.ui.demo.CombineLatest.Component:


image.png


SAP UI5 框架在加载时,将 id 转换成 url:


sap/ui/demo/CombineLatest/Component.js,


然后在其头部,拼接上来自 id 为 sap-ui-bootstrap 里的 src 属性定义的 SAP UI5 库文件的前缀:


https://sapui5.hana.ondemand.com/resources/


最后得到的路径:


https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Component.js


显然,这个路径是错误的。因为 Component.js 仅仅存在于我们工程自身。


因此需要使用 data-sap-ui-resourceroots 告诉 SAP UI5 加载器,如果遇到前缀为 sap.ui.demo.CombineLatest 的本地资源文件,**不要使用 sap-ui-core.js **的前缀即 https://sapui5.hana.ondemand.com/resources,而是使用本地路径./


image.png


修改之后,资源加载成功,正确的路径应该是:http://localhost:3002/combine/Component.js


这个路径是怎么来的呢?


(1) Component.js 的 id 为 sap.ui.demo.CombineLatest.Component,因为 data-sap-ui-resourceroots 生效,将 sap.ui.demo.CombineLatest.Component 替换成 ./Component


(2) ./Component 替换成 URL:/Component.js


(3) ./之前的 url 为 localhost:3002/combine


得到最后的绝对路径去加载 Component.js:


http://localhost:3002/combine/Component.js


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7238 0
OData metadata 定义中,entity type key 的作用是什么
OData metadata 定义中,entity type key 的作用是什么
8 0
【DATAGUARD 学习】测试standby应用REDO
环境:数据库版本11g!主库 ORCL,备库 TESTDG -- 查看主库的最大归档序列号ORCL>select max(sequence#) from v$archived_log;MAX(SEQUENCE#)                        ...
472 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8920 0
+关注
2627
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载