|
原文：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 生命周期钩子之外，还有 onInit 和 onExit 钩子。 另一方面，对于每个视图实例，onBeforeRendering 和 onAfterRendering 钩子只调用一次：在实例化和销毁视图之后。 下面是如何在控制器中使用 onBeforeRendering 和 onAfterRendering 钩子的示例： // in your controller...// hook gets invoked before the view gets renderedonBeforeRendering: 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 时，都会触发路由器事件。 为了更清楚地说明：
下面是 routeMatched 和 routePatternMatched 事件之间的区别：
设置路由器事件需要两个步骤：
1 Set Up Routing in the manifest.jsonSAPUI5 应用程序的路由及其视图的路由和模式在 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 ControllerrouteMatched 和 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 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 事件的例子： // 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
}
});}); |
|
|
