實現效果如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/9155bbb34b115ff3839fcda6f855d561.png)

app view 的實現程式碼：

```javascript
// @ts-nocheck
sap.ui.jsview("jerrylist.view.App", {

getControllerName: function () {
		return "jerrylist.view.App";
	},
	
	createContent: function (oController) {
		
		// to avoid scroll bars on desktop the root view must be set to block display
		this.setDisplayBlock(true);
		
		this.app = new sap.m.SplitApp();
		
		// load the master page
		var master = sap.ui.xmlview("Master", "jerrylist.view.Master");
		master.getController().nav = this.getController();
		this.app.addPage(master, true);
		
		// load the empty page
		var empty = sap.ui.xmlview("Empty", "jerrylist.view.Empty");
		this.app.addPage(empty, false);
		
		return this.app;
	}
});
```

程式碼第 13 行建立的 sap.m.SplitApp, 實際上是 SplitContainer：

![](https://img-blog.csdnimg.cn/img_convert/11759ddf0a702a8091bbd721be848134.png)

這個 addPage 方法內部，分別呼叫 addMasterPage 或者 addDetailPage：
![](https://img-blog.csdnimg.cn/img_convert/69794f78581a8d5967af822120ad0ddd.png)

此時 detail 頁面是空的：
![](https://img-blog.csdnimg.cn/img_convert/093fd11a76b35be7de2bb424d457227d.png)

Master List 點選事件，註冊在 Master.view.xml 裡：handleListSelect

![](https://img-blog.csdnimg.cn/img_convert/190bf939276edde755670ad2b14f3346.png)

點選之後，從 event 事件物件裡，獲得 binding context：

![](https://img-blog.csdnimg.cn/img_convert/190e95a0cf1c87d11cabc8d84ee8b86a.png)

透過 path 能拿到具體的模型資料：

![](https://img-blog.csdnimg.cn/img_convert/c3a6c1151c1221900becd18725fb18d7.png)

使用 this.nav.to("Detail", context) 跳轉到 detail 頁面：

![](https://img-blog.csdnimg.cn/img_convert/215bd0a801ae3bf985e1063bc7f3ae4d.png)

Master view controller 的 nav 屬性，在 View controller 裡被賦值：

![](https://img-blog.csdnimg.cn/img_convert/72441789d084cb49f913818d2cd2333d.png)

在 to 實現裡：動態建立一個新的 id 為 Detail 的檢視，然後呼叫 splitContainer.addPage, 將其加到 Split App 裡：

![](https://img-blog.csdnimg.cn/img_convert/55ffa9d519a4cf60c87c60985607103e.png)

呼叫 app.to 方法，顯示頁面：
![](https://img-blog.csdnimg.cn/img_convert/9e7cee47e325f77518c676b785edf532.png)

SplitApp to 方法的註釋：

![](https://img-blog.csdnimg.cn/img_convert/55e2030ebd624f5ba97def40d85c50d3.png)

```javascript
/**
	 * Navigates to the given page inside the SplitContainer.
	 * The navigation is done inside the master area if the page has been added,
	 * otherwise, it tries to do the page navigation in the detail area.
	 *
	 * @param {string} sPageId
	 *         The screen to which we are navigating to. The ID or the control itself can be given.
     * @param {string} [transitionName=slide]
     *         The type of the transition/animation to apply. Options are "slide" (horizontal movement from the right), "baseSlide", "fade", "flip", and "show"
	 *         and the names of any registered custom transitions.
	 *
	 *         None of the standard transitions is currently making use of any given transition parameters.
	 * @param {object} oData
	 *         This optional object can carry any payload data which should be made available to the target page. The BeforeShow event on the target page will contain this data object as data property.
	 *
	 *         Use case: in scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.
	 *
	 *         When the transitionParameters object is used, this "data" object must also be given (either as object or as null) in order to have a proper parameter order.
	 * @param {object} oTransitionParameters
	 *         This optional object can contain additional information for the transition function, like the DOM element which triggered the transition or the desired transition duration.
	 *
	 *         For a proper parameter order, the "data" parameter must be given when the transitionParameters parameter is used (it can be given as "null").
	 *
	 *         NOTE: It depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.
	 *         The "show", "slide" and "fade" transitions do not use any parameter.
	 * @type this
	 * @public
	 * @since 1.10.0
	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
	 */
```

![](https://img-blog.csdnimg.cn/img_convert/15090b5636e29a18e02d31ce0dd67a88.png)

一種簡單地實現 SAP UI5 Master detail 頁面的方法

相關文章