Question

在SAPUI5开发人员指南中，我找到了关于处理事件的说明：

处理XML视图中的事件。事件处理程序用作属性。属性名称是事件名称，例如“按”按钮，属性值作为事件处理程序名称。必须将事件处理程序定义为视图控制器中的函数。要在XML视图中附加事件处理程序，请插入以下声明：... <Button text="Press Me" press="doSomething"/> ...按下按钮时执行方法controller.doSomething()。

在我的XML视图中，我可以将其转换为：

<Select change="doSomething">

当select的值改变时，调用controller.selectOnChange函数，«this参数绑定到控制器本身»。但是，当我在JavaScript视图中绑定此事件处理程序时，«this参数绑定到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绑定的内容。

我添加了an example with a JS view and controller to sapui5bin's SinglePageExamples。

Answer 2

如果通过XML-View或HTML-View调用它，则此Event-Method的上下文是控制器。在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

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

2 个答案: