SAPUI5 Benutzerdefinierte Steuerelementbindung

Question

Ich versuche herauszufinden, wie ein Datenmodell an ein benutzerdefiniertes Steuerelement gebunden wird. Ich habe eine Reihe ähnlicher Fragen hier durchsucht, aber sie scheinen nicht zu dem zu passen, was ich versuche. Vielleicht ist meine Methode falsch.

Wie auch immer, ich habe eine Plunkr (https://plnkr.co/edit/UghwOObcDn1oRndOpCeJ) zu demonstrieren erstellt. Zwei Eingabefelder werden erstellt, von denen sich eines in einem benutzerdefinierten Steuerelement befindet, das ein sap.m.Panel erweitert. Ich versuche, die Name und aktivierten Eigenschaften an beide Eingabefelder zu binden. Kein Problem mit der einfachen sap.m.Input auf der Seite aber die in der benutzerdefinierten Steuerung MyPanel kein solches Glück. Die Name und aktiviert Eigenschaften für beide Eingabefelder sollte sich ändern, wenn die Taste gedrückt wird.

Für die individuelle Kontrolle Ich versuche, die bind Eigenschaften an den Wert und Eigenschaften des eingebetteten Eingabefeld aktiviert passieren wie in App.view.xml zu sehen.

Wenn ich folgende in MyPanel.js ändern:

value: mSettings.value, 
enabled: mSettings.enabled 

zu

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

alles funktioniert gut.

Jede Hilfe oder Richtung würde geschätzt werden.

Answer 1

Sie müssen die Eigenschaften 'Wert' und 'Aktiviert' in Ihrem benutzerdefinierten Steuerelement definieren. Um die Bindungsfunktion zu erhalten, müssen Sie benutzerdefinierte Setter/Getter-Methoden in Ihrem erweiterten Steuerelement haben. Diese Methoden werden beim Binden von Aktualisierungen aufgerufen.

Hier ist die aktualisierte 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"); 
} 

});