UI5 navigation logic

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

crossroads

crossroads-dbg.js

route

_getMatchedRoutes

thirdparty

router

navTo

match

UI5 navigation logic

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 具体的匹配逻辑

UI5 navigation logic


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

answer: 在project的component.js里:

UI5 navigation logic

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

UI5 navigation logic

第三条匹配生效了:


UI5 navigation logic

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

UI5 navigation logic


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

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

UI5 navigation logic

改成如下之后:

UI5 navigation logic

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

UI5 navigation logic

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

UI5 navigation logic


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


上一篇:How to find root cause of creation navigation failur


下一篇:Component Configuration.js - 所有支持属性列表 - configuration priority