原文：SAPUI5: How to Call a Method Every Time a View Is Displayed?

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

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

SAPUI5 提供了兩種每次調用視圖時執行代碼的方法：

• 視圖控制器中的生命周期鉤子
• 路由匹配事件等路由機制

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

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

• onBeforeRendering：每次重新渲染視圖之前執行代碼。
• onAfterRendering：每次渲染視圖時執行代碼。

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

另一方面，對于每個視圖實例，onBeforeRendering 和 onAfterRendering 鉤子只調用一次：在實例化和銷毀視圖之后。

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

// 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 中設置。

例如：

// 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 中定義了三個有效的路由和模式：

<your_app># (Home) <your_app>#/products (Products) <your_app>#/products/product/<productId> (Product)

澄清 routeMatched 和 routePatternMatched 事件之間的區別，當路由或模式成功匹配時將觸發以下事件：

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

products/{productId}： 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 的路由是：

<your_app>#/products/product/<productId>

URL 哈希是：

#/products/product/<productId>。

首先，以 routeMatched 事件為例：

// 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 eventoRouter.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 事件的例子：

// 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 eventoRouter.getRoute("product").attachRoutePatternMatched(this._onRoutePatternMatched, this);},_onRoutePatternMatched: function(oEvent) {// gets called for ...#/products/Product/<productId>// for example: ...#/products/Product/1// or ...#/products/Product/123}});}); 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的SAP UI5 里如何让每次视图显示时都执行某方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。