隐藏聚合的自定义复合控件绑定问题

Question

我在聚合绑定自定义控件时遇到问题。我无法使用自定义控件内部元素进行双向数据绑定。

自定义控件：

(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;

请帮助我。 当我只是实例化控件并绑定属性时，双向绑定可以正常工作。只是当我进行聚合绑定时它停止工作。

Answer 1

首先，您根本没有设置自定义控件的属性，而只是设置了内部输入的属性。试试看。对所有 setter 都像这样并删除 getter：

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 Composite Controls。

BR 克里斯