UI5 navigation logic

简介: Created by Jerry Wang, last modified on Jan 29, 2015

Created by Jerry Wang, last modified on Jan 29, 2015

crossroads

crossroads-dbg.js

route

_getMatchedRoutes

thirdparty

router

navTo

match

image.png

UI5 view之间navigation的核心代码在folder resources/sap/ui/thirdparty里的js实现。

如上图所示,router framework试图根据传入的route request "detail/AccountCollection('4039331')" 来获取一条匹配的route path.

问题1: 这个request是怎么传到route framework的?

answer:在我们自己的application view里传递的。当我们点击navigation list时,框架自动调用我们注册的事件处理函数setListItem, 在line 124将当前待显示的detail page的上下文,所谓的contextPath,即 "detail/AccountCollection('4039331')"通过调用route框架的方法navTo传入route框架


问题2: route framework 具体的匹配逻辑

image.png


问题3: route framework里匹配的三条记录从哪里来的

answer: 在project的component.js里:

image.png

注意上面有两个hard code的detail,其含义不一样。先把第二个detail改成mydetail:

image.png

第三条匹配生效了:


image.png

此时由于application code里调用navTo时仍然传的是detail,因此找不到匹配的route,点击list里每个item后将没有任何效果-浏览器里地址栏没有发生变化,表明没有发生navigation。

image.png


如果将application code里的detail也改成mydetail之后,仍然不work:

原因是this._oRoutes object里没有名为mydetail的attribute:

image.png

改成如下之后:

image.png

之后就能找到名为mydetail的route:

image.png

从地址栏观察到navigation重新起作用了

image.png


<img src="https://user-images.githubusercontent.com/5669954/27390923-d4015d22-56a2-11e7-8a92-63a55da646f8.png)


相关文章
|
7月前
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
47 0
|
7月前
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
41 0
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(2)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(1)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现(2)
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现(1)
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
109 0
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
如何找到 SAP 电商云 Spartacus UI 导航 navigation 的驱动器 - NavigationEntryItemEffects
如何找到 SAP 电商云 Spartacus UI 导航 navigation 的驱动器 - NavigationEntryItemEffects
如何找到 SAP 电商云 Spartacus UI 导航 navigation 的驱动器 - NavigationEntryItemEffects
Fiori Launchpad etag retrieve logic - UI5 Repository
Created by Wang, Jerry, last modified on Jan 15, 2015
94 0
Fiori Launchpad etag retrieve logic - UI5 Repository
Fiori Launchpad etag retrieve logic - UI5 Repository
Fiori Launchpad etag retrieve logic - UI5 Repository
108 0
Fiori Launchpad etag retrieve logic - UI5 Repository