Question

我试图弄清楚如何将数据模型绑定到自定义控件。我在这里搜索了许多类似的问题，但它们似乎与我想要做的不相符。也许我的方法是错的。

无论如何，我已经创建了一个Plunkr（https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ）来演示。创建两个输入字段，其中一个输出字段位于自定义控件上，该控件扩展了sap.m.Panel。我正在尝试将名称和启用的属性绑定到两个输入字段。页面上的简单sap.m.Input没有问题，但自定义控件中的那个 MyPanel 没有这样的运气。按下按钮时，两个输入字段的名称和已启用属性都会更改。

对于自定义控件，我尝试将绑定属性传递给嵌入式输入字段的值和已启用属性，如App.view.xml中所示

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

value: mSettings.value,
enabled: mSettings.enabled

到

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

一切正常。

任何帮助或指示都将不胜感激。

Answer 1

您必须在自定义控件中定义“值”和“已启用”属性。要使绑定工作，您需要在扩展控件中使用自定义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自定义控件绑定

1 个答案: