在Javascript视图中纠正事件绑定？与XML视图绑定不同

Question

在SAP UI5开发人员指南中,我找到了关于处理事件的说明:

1.6.2.5处理XML视图中的事件事件处理程序用作属性.属性名称是事件名称,例如"按"表示>按钮,属性值表示事件处理程序名称.必须将事件处理程序定义为视图控制器中的函数.要在XML视图中附加事件处理程序,请插入以下声明:... ...按下按钮时执行方法controller.doSomething().

在我的XML视图中,我可以将其转换为:

<Select change="doSomething">

当Select的值发生更改时,将调用controller.selectOnChange函数,并将此参数绑定到控制器本身.但是,当我在JavaScript视图中绑定此事件处理程序时,此参数将绑定到Select元素.

我假设这转换为我的JavaScript视图的以下代码:

new sap.m.Select({ change : oController.doSomething })

我以错误的方式绑定事件处理程序吗？

Answer 1

在JS视图中,当您指定这样的处理程序时:

new sap.m.Button({
    text: "Press Me",
    press: oController.myHandler
})

然后this绑定到处理程序中的控件本身.

但是还有另一种指定处理程序的方法,如下所示:

new sap.m.Button({
    text: "Press Me",
    press: [oController.myHandler, oController]
})

数组中的第二个元素成为this绑定的元素.

我添加了一个带有JS视图和控制器的示例到sapui5bin的SinglePageExamples.

Answer 2

如果您通过 XML-View 或 HTML-View 调用它，则此事件方法的上下文就是控制器。在 JS-View 中，上下文就是控件本身。这意味着你必须jQuery.proxy()这样调用它：

new sap.m.Select({ change : jQuery.proxy(oController.doSomething, oController) })

这样，这oController就是您的方法上下文。但我想，你也可以用这个方法addEventDelegate()。有关详细信息，请参阅 SAPUI5-doc：https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.Element.html#addEventDelegate