[原文：SAPUI5: How to Call a Method Every Time a View Is Displayed?](https://inui.io/sapui5-view-loaded-execute/)

本文介紹每次在 SAPUI5 中顯示檢視時如何執行方法。

有兩種方法可以實現這一點。

SAPUI5 提供了兩種每次呼叫檢視時執行程式碼的方法：

* 檢視控制器中的生命週期鉤子
* 路由匹配事件等路由機制

例如，呼叫自定義方法，或執行 CRUD 請求（建立、讀取、更新、刪除）。

#1. SAPUI5 Life Cycle Hooks in a View’s Controller

* onBeforeRendering：每次重新渲染檢視之前執行程式碼。
* onAfterRendering：每次渲染檢視時執行程式碼。

除了 onBeforeRendering 和 onAfterRendering 生命週期鉤子之外，還有 onInit 和 onExit 鉤子。

另一方面，對於每個檢視例項，onBeforeRendering 和 onAfterRendering 鉤子只呼叫一次：在例項化和銷燬檢視之後。

下面是如何在控制器中使用 onBeforeRendering 和 onAfterRendering 鉤子的示例：

```javascript
// in your controller
...
 
// hook gets invoked before the view gets rendered
onBeforeRendering: function() {
  
  this.log("view gets rendered);
  
},
 
// hook gets invoked after the view is rendered  
onAfterRendering: function() {
  
      this.log("view is rendered);
  
},
  
log: function(sMessage) {
  
  sap.base.Log.info(sStatus);
     
}
...
```

#2. SAPUI5 Routing Mechanisms: Route Matched and Route Pattern Matched Events

如果您的應用程式使用 SAPUI5 路由框架，您可以利用其機制在每次呼叫檢視時呼叫您自己的程式碼。

SAPUI5 URL 具有 URL 雜湊。

例如，如果 URL 是 webapp/index.html#/products/3，則 URL 雜湊是 #/products/3。

routeMatched 和 routePatternMatched 事件根據 manifest.json 中的路由設定檢查 URL 雜湊。

每次 URL 雜湊匹配時，該事件都會被觸發。

每次導航到檢視及其 URL 時，都會觸發路由器事件。

為了更清楚地說明：

* 一方面，路由器事件檢查檢視的正確 URL 是否被呼叫，並且包括例如一個有效的引數，如物件 ID。

* 另一方面，只要透過有效的路由 URL 呼叫檢視，就會觸發路由器事件。

下面是 routeMatched 和 routePatternMatched 事件之間的區別：

* routeMatched：每次 URL 的雜湊匹配當前檢視的路由模式的任何路由、子路由或巢狀路由時呼叫。

* routePatternMatched：每次 URL 的雜湊與當前檢視的路由模式的路由匹配時呼叫。

設定路由器事件需要兩個步驟：

* 在 SAPUI5 應用程式 manifest.json 中設定路由。
* 在 XML 檢視控制器中設定事件。

#1 Set Up Routing in the manifest.json

SAPUI5 應用程式的路由及其檢視的路由和模式在 manifest.json 中設定。

例如：

```json
// in your manifest.json
...
     
"sap.ui5": {
     
  ...
 
  "routing": {
       
    "config": {
 
      ...
       
    },
       
    "routes": [{
       
      "pattern": "",
      "name": "Home",
      "target": "home"
      
    }, 
 
    {
     
      "pattern": "products",
      "name": "Products",
      "target": "products"
    
    }, 
 
    {
     
       "pattern": "products/{productId}",
       "name": "Product",
       "target": "product"
 
    }],
 
    "targets": {
     
      "home": {
     
        "viewId": "home",
        "viewName": "Home"
 
      },
         
      "employees": {
                     
        "viewId": "products",
        "viewName": "Products"
                 
      },
     
      "employee": {
                     
         "viewId": "product",
         "viewName": "Product"
 
       }
             
    }
         
  }
 
}
```

在上面的 manifest.json 中定義了三個有效的路由和模式：

```typescript
<your_app># (Home)
<your_app>#/products (Products)
<your_app>#/products/product/<productid> (Product)
```
澄清 routeMatched 和 routePatternMatched 事件之間的區別，當路由或模式成功匹配時將觸發以下事件：

例如，事件附加到 Product.view.xml 控制器中的路由器，其模式為：

```javascript
products/{productId}：
```

```typescript
routeMatched fires for:
<your_app>#
<your_app>#/products
<your_app>#/products/product/<productid>
routePatternMatch fires for:
<your_app>#/products/product/<productid>
```
#2 Set up the Events in the XML View’s Controller

routeMatched 和 RoutePatternMatched 在控制器的 onInit 方法中。

例如，上面在 manifest.json 中設定了路由和模式的產品檢視的控制器。

Product.view.xml 的路由是：

```typescript
<your_app>#/products/product/<productid>
```

URL 雜湊是：

```typescript
#/products/product/<productid>。
```

首先，以 routeMatched 事件為例：

```javascript
// in the Product controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productid>
// URL hash: #/products/product/<productid>
 
sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  
  return Controller.extend("my.app.controller.products.Product", function() {
  
    onInit: function() {
 
      var oRouter = this.getRouter();
 
      // attach routeMatched event
      oRouter.getRoute("product").attachRouteMatched(this._onRouteMatched, this);
 
    },
 
    _onRouteMatched: function(oEvent) {
 
      // gets called for ...#/
      // gets called for ...#/products/
      // gets called for ...#/products/Product/<productid>
      // for example: ...#/products/Product/1
 
    }
  
  });
 
});
```

二、routePatternMatch 事件的例子：

```javascript
// in the Product controller
// manifest.json routing pattern: products/{productId}
// URL: <your_app>#/products/product/<productid>
// URL hash: #/products/product/<productid>
 
sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";
  
  return Controller.extend("my.app.controller.products.Product", function() {
  
    onInit: function() {
 
      var oRouter = this.getRouter();
 
      // attach routePatternMatched event
      oRouter.getRoute("product").attachRoutePatternMatched(this._onRoutePatternMatched, this);
 
    },
 
    _onRoutePatternMatched: function(oEvent) {
 
      // gets called for ...#/products/Product/<productid>
      // for example: ...#/products/Product/1
      // or ...#/products/Product/123
 
    }
  
  });
 
});
```</productid></productid></productid></your_app></productid></productid></productid></your_app></productid></productid></your_app></productid></your_app></productid></your_app></your_app></your_app></productid></your_app></your_app></your_app>

SAP UI5 裡如何讓每次檢視顯示時都執行某方法

相關文章