如何为sap.m.ColumnListItem列表项模板绑定事件处理器？

问题描述 #

我尝试使用sap.m.ColumnListItem创建列表项模板。请问该模板是否存在问题？移除press处理器后数据绑定可正常工作，但我需要为列表项绑定事件处理器。以下是相关代码：

var oItemTemplate = new ColumnListItem({ 
  type: "Navigation", 
  press: this.handleItemPress, 
  cells: [/*...*/], 
}); 

问题原因 #

你遇到的问题本质是**函数上下文（this指向）**错误导致的：当你直接把this.handleItemPress赋值给press属性时，这个函数的执行上下文会变成ColumnListItem实例，而不是你的控制器/组件实例。如果handleItemPress方法里用到了this（比如访问this.getView()、组件的属性或其他方法），就会触发报错，进而导致整个模板初始化失败，数据绑定自然无法正常工作。移除press处理器后，模板初始化没有错误，所以数据绑定能正常运行。

解决方法 #

这里有几种可靠的解决方案，任选其一即可：

1. 使用箭头函数绑定上下文
   箭头函数会继承当前作用域的this，确保handleItemPress里的this指向你的控制器/组件实例：

var oItemTemplate = new ColumnListItem({ 
  type: "Navigation", 
  press: () => this.handleItemPress(), 
  cells: [/*...*/], 
}); 

2. 使用bind()显式绑定this
   通过Function.prototype.bind()方法，强制把this绑定到你的控制器/组件实例上：

var oItemTemplate = new ColumnListItem({ 
  type: "Navigation", 
  press: this.handleItemPress.bind(this), 
  cells: [/*...*/], 
}); 

3. 后续通过控制器绑定事件（可选）
   如果更倾向于分离逻辑，也可以先创建不带press的模板，之后通过控制器的事件绑定方法为列表项添加处理器：

// 先创建模板
var oItemTemplate = new ColumnListItem({ 
  type: "Navigation", 
  cells: [/*...*/], 
}); 
// 假设你的列表控件是oTable，后续绑定事件
oTable.attachItemPress(this.handleItemPress.bind(this));

内容的提问来源于stack exchange，提问作者Chethan