JavaScript 视图中的正确事件绑定？与 XML 视图不同的 this 绑定答案

【问题标题】：Correct event binding in JavaScript view? Different this binding with XML viewsJavaScript 视图中的正确事件绑定？与 XML 视图不同的 this 绑定
【发布时间】：2014-02-03 13:32:16
【问题描述】：

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

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

在我的 XML 视图中，我可以将其翻译成：

<Select change="doSomething">

当 select 的值改变时，controller.selectOnChange 函数被调用，«this 参数绑定到控制器本身»。但是，当我在 JavaScript 视图中绑定此事件处理程序时，«this 参数已绑定到选择元素»。

我假设这会转化为我的 JavaScript 视图的以下代码：

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

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

【问题讨论】：

标签： sapui5

【解决方案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。

【讨论】：

【解决方案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

【讨论】：