UI5 navigation logic

SAP UI5 专栏收录该内容
1155 篇文章 11 订阅

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

  • crossroads
  • crossroads-dbg.js
  • route
  • _getMatchedRoutes
  • thirdparty
  • router
  • navTo
  • match

clipboard1

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框架

clipboard2

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

clipboard3

clipboard4

 
问题3: route framework里匹配的三条记录从哪里来的
 
answer: 在project的component.js里:

clipboard5

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

clipboard6

第三条匹配生效了:

clipboard7


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

clipboard8

clipboard9

 
如果将application code里的detail也改成mydetail之后,仍然不work:
 
原因是this._oRoutes object里没有名为mydetail的attribute:

clipboard10

改成如下之后:

clipboard11

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

clipboard12

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

clipboard13

clipboard14

clipboard15



  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值