Блог

Я сталкиваюсь с проблемой при выполнении привязки пользовательского элемента управления к агрегации. Я не могу выполнить двустороннюю привязку данных с внутренним элементом пользовательского элемента управления.

Пользовательский элемент управления:

 (function(){
    "use strict";

    var PriceRangeComponent = sap.ui.core.Control.extend('PriceRangeComponent', {
        constructor: function(mSettings) {
            sap.ui.core.Control.apply(this, arguments);

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

            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");
        }

    });

    PriceRangeComponent.prototype.clone = function(){
        var clone = sap.ui.core.Control.prototype.clone.apply(this, arguments),
            bindingInfo;

        clone.ef.bindProperty("value",this.getBindingInfo("value"));

        return clone;
    };

    return PriceRangeComponent;
})();
  

В элементе управления я хочу выполнить двустороннюю привязку данных к внешней модели.

использование пользовательского элемента управления:

 var priceGridwindowShade = new sap.ui.commons.windowshade.WindowShade({
            openFirstSection:false,
            sections:[],
            //layoutData: new sap.ui.layout.GridData({span: "L9 M9"}),
            width: "800px",

        });

        var oTemplateSection = new sap.ui.commons.windowshade.WindowShadeSection({
            title: {
                parts: [
                    {path: "startRange"},{path: "endRange"}
                ],
                formatter: function(startRange, endRange){
                    //console.log(val);
                    return startRange   " to "   endRange;
                }
            },
            content: [
                new PriceRangeComponent({
                    value: "{startRange}"
                }),

                new sap.m.Input({ // this input is for checking the 2 way data binding
                    width: "80px",
                    value: "{startRange}"
                })
            ]
        });

        priceGridwindowShade.bindAggregation("sections", {
            path: "/items",
            template: oTemplateSection,
            templateShareable: true});

        return priceGridwindowShade;
  

Пожалуйста, помогите мне.
Когда я просто создаю экземпляр элемента управления и привязываю свойства, двусторонняя привязка работает должным образом. Просто он перестает работать, когда я выполняю привязку агрегации.

прежде всего, вы вообще не устанавливаете свойства вашего пользовательского элемента управления, а только свойства внутреннего ввода. Попробуйте sth. выполните подобное для всех установщиков и удалите получатели:

 setValue: function (sValue) {
  this.setProperty('value', sValue, true /* bSupressInvalidate */);
  this.ef.setValue(sValue);
},
  

И вам нужно заполнить значение вашего ввода в обратном порядке (сделайте это в init ):

 init: function() {
  this.ef = new sap.m.Input({
    width: '100px'
  }).attachChange(function(oEv) {
    this.setValue(oEv.getParameters("value"));
  }.bind(this));

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

Еще несколько замечаний:

• Для инициализации используйте init вместо переопределения constructor
• Используйте AMD

Если вы используете более новую версию SAPUI5 (я думаю, 1.58 ), вы также можете ознакомиться с составными элементами управления XML.

Крис