SAPUI5 自定义控件绑定

Question

我正在尝试了解如何将数据模型绑定到自定义控件。我在这里搜索了许多类似的问题，但它们似乎与我正在尝试做的不符。可能是我的方法不对。

无论如何，我创建了一个Plunkr (https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ) 来演示。创建了两个输入字段，其中一个位于扩展 sap.m.Panel 的自定义控件上。我正在尝试将 name 和 enabled 属性绑定到两个输入字段。页面上的简单 sap.m.Input 没问题，但自定义控件 MyPanel 中的那个就没有这样的运气了。当按下按钮时，两个输入字段的 name 和 enabled 属性应该改变。

对于自定义控件，我试图将绑定属性传递给嵌入式输入字段的 value 和 enabled 属性出现在 App.view.xml.

如果我在 MyPanel.js 中更改以下内容：

value: mSettings.value,
enabled: mSettings.enabled

至

value: '{/name}',
enabled: '{/editing}'

一切正常。

如有任何帮助或指导，我们将不胜感激。

Answer 1

您必须在自定义控件中定义 'value' 和 'enabled' 属性。要使绑定正常工作，您需要在扩展控件中使用自定义 setter/getter 方法。这些方法在绑定更新时被调用。

这是更新后的 link

sap.m.Panel.extend('my.App.MyPanel', {
 constructor: function(mSettings) {
 sap.m.Panel.apply(this, arguments);

 this.ef = new sap.m.Input({
   width: '100px',
   value: mSettings.value,
   enabled: mSettings.enabled
 });

 this.setAggregation('_ef', this.ef);
 },

 metadata: {
   properties: {
     enabled: { type: 'boolean', defaultValue: true },
     value: { type: 'String', defaultValue: "" }
  },

   events: {
   },

   aggregations: {
     _ef: { type: 'sap.m.Input', multiple: false, visibility: 'hidden' }
   }
 },

 init: function() {
 },

 renderer: function(oRM, oControl) {
   oRM.renderControl(oControl.getAggregation('_ef'));
 },

 setValue: function (sValue) {
   this.ef.setValue(sValue);
 },

 setEnabled: function (bValue) {
   this.ef.setEnabled(bValue);
 },

 getValue: function(){
   return this.ef.getProperty("value");
 },

 getEnabled: function(){
  return this.ef.getProperty("enabled");
 }

});

SAPUI5 自定义控件绑定

SAPUI5 Custom Control Binding

binding

controls

sapui5