SAPUI5 - 属性范围

时间:2014-07-02 17:48:48

标签: sapui5

我有两个控件,一个从Control扩展,另一个从我的自定义控件扩展。

控件有一个数组属性,我希望每个实例都是唯一的:

/* parent control */
sap.ui.core.Control.extend("foo.MyControl", {
    metadata: {
        properties: {
            name: { type: 'string' },
            myArray: { type: 'array', defaultValue: [] }
        }
    },
    renderer: {
        render: function( oRenderManager, oControl ) {
            oRenderManager.write('<div>My name is: ' + oControl.getName() + '</div>');
        }
    }
});

/* child control */
foo.MyControl.extend("foo.MyChildControl", {
    renderer: {
        render: foo.MyControl.prototype.render
    }
});

然后我创建它们的实例并将它们放在dom中:

/* create and place instances */
var oMyControl = new foo.MyControl({
        name: 'parent control'
    }),
    oMyChildControl = new foo.MyChildControl({
        name: 'child control'
    });
oMyControl.placeAt('uiArea');
oMyChildControl.placeAt('uiArea');

为什么2个数组实例相等?

alert(oMyControl.getMyArray() === oMyChildControl.getMyArray()); // true

我希望每个实例都能获得它自己的数组。

**

TL; DR为了定义控制元数据,将数组属性声明为类型&#34; object&#34;

**

1 个答案:

答案 0 :(得分:2)

我在尝试运行代码时遇到异常

键入:&#39;数组&#39;不正确

  

JavaScript中的typeof运算符返回&#34; object&#34;对于数组。

这对我有用

sap.ui.core.Control.extend("foo.MyControl", {
    metadata: {
        properties: {
            name: {
                type: 'string'
            },
            myArray: {
                type: 'object',
                defaultValue: []
            }
        }
    },
    renderer: {
        render: function(oRenderManager, oControl) {
            oRenderManager.write('<div>' + oControl.getMyArray().toString() + '</div>');
        }
    }
});

/* child control */
foo.MyControl.extend("foo.MyChildControl", {
    renderer: {
        render: foo.MyControl.prototype.render
    }
});

/* create and place instances */
var oMyControl = new foo.MyControl({
    name: 'parent control'
}).placeAt('content');

var oMyChildControl = new foo.MyChildControl({
        name: 'child control'
}).placeAt('content');

var aFruits = ["Banana", "Orange", "Apple", "Mango"];
var aColors = ["Red", "Blue", "Green"];
oMyControl.setMyArray(aFruits);
oMyChildControl.setMyArray(aColors);