如何在UI5中为一个事件添加多个事件侦听器?
我们有一个带有下拉列表的主列表,它在其控制器上正确地触发了一个select事件。为了重新加载模型数据,子控制器也需要被告知这个下拉菜单已经改变。
onAllRolesChange: function(oEvent) {
var key = oEvent.getParameter("selectedItem").getProperty("text");
if (this.ScreenId != null) {
this.loadScreenByRole(key);
// I could invoke the controllers directly, but that seems wrong
// controller2.update();
// controller3.update();
}
},
我假设我应该瞄准的是在每个控制器中调用某种registerForEvent()
方法,但我在SDK中没有看到这样的东西。fireEvent()
和attachEvent()
存在,但我看到的例子似乎是创建自定义控件,或响应浏览器事件,SAP还没有实现。
从UI5 1.65开始,在创建ManagedObjects/Controls时可以分配多个事件处理程序:
<标题> 语法在XMLView(…)ManagedObjects现在接受一个事件的多个事件侦听器数组。来将此用例与
[data, listener, this]
已经支持的数组区分开来,具有多个侦听器的数组也必须为每个侦听器使用嵌套数组表示法[在JS中]。在XMLViews中,必须用分号分隔多个侦听器。(源)
<Button press=".myControllerMethod; .mySubController.thatMethod" />
在JS new Button({
press: [
[ listener1 ], // 1st listener
[ data, listener2, thisArg2 ] // 2nd listener
]
});
<标题> 演示
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView"
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%"
displayBlock="true"
>
<Button text="Press" class="sapUiTinyMargin"
press="alert('1st event handler'); alert('2nd event handler')"
/>
</mvc:View>`,
}).then(view => view.placeAt("content"))));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-theme="sap_fiori_3"
></script>
<body id="content" class="sapUiBody"></body>
标题>标题>
您可以使用EventBus来通知更改,并且任何人都可以侦听更改。然而,如果其他控制器还没有加载,它们当然不会得到事件……也许你可以把这个和承诺结合起来……
你也可以使用带有双向绑定的全局模型,并将其用于下拉菜单。当下拉菜单发生变化时,变化会反映在相应的模型中。同时,在你的子控制器中,你可以创建一个sap.ui.model.Binding(…),用于相同的全局模型+路径等,用于你的下拉菜单。此外,您还需要为Binding的更改事件附加一个处理程序…这应该也可以。然而,这与使用EventBus有相同的缺点,但也许thatÄs对你来说不是问题…