Fuse.Reactive.Property must specify required attribute Accessor when using ux:Property object


#1

I have the following scenario and for you to understand what’s going on, I’ll show you my folder structure:

/_root_
    /components
        MatTextInput.ux
    /pages
        /product
            Product.js
            Product.ux

Ok, so inside my Product.ux I have mapped the MatTextInput.ux component as follows:

<MatTextInput Margin="10" Padding="2" Alignment="VerticalCenter" Quantity="{quantity}" Data="{data}" />;

Inside My Product.js file, is an API endpoint call which returns an object stored in data.
Data is first defined as data = observable(); and then, it’s value is assigned:

this.Parameter.onValueChanged(module, function(param) {
var marketParam = param.market;
var productParam = param.product;
console.log(JSON.stringify(marketParam));
data.value = marketParam;
product.value = productParam;
});

module.exports = {
    data: data,
    ...
};

Then back in the component, it is defined as follows:

<Panel Alignment="{ Property Alignment }" Margin="{ Property Margin }" Padding="{ Property Padding }" ux:Class="MatTextInput">
    <string ux:Property="Alignment" />
    <int ux:Property="Margin" />
    <int ux:Property="Padding" />
    <int ux:Property="Quantity" />
    <string ux:Property="LabelName" />
    <object ux:Property="Data" />
    <JavaScript>
        var _data = this.Data.inner();
    </JavaScript>
    <Text Value="{ Property LabelName }" Font="Gotham" Color="#757575" FontSize="20" HitTestMode="None" ux:Name="label" />
    <TextInput Value="{ Property Quantity }" TextColor="#000" FontSize="20" Font="Gotham">
        <WhileFocused>
            <Move Target="label" Y="-20" Duration="0.15" Easing="CubicOut" />
            <Change label.FontSize="14" Duration="0.15" />
            <Change label.Color="{ Property _data.theme }" Duration="0.15" />
            <Change label.Color="{ Property _data.theme }" Duration="0.15" />
            <Change inputLine.Color="{ Property _data.theme }" Duration="0.15" />
        </WhileFocused>
        <WhileNotEmpty>
            <Move Target="label" Y="-20" Duration="0.15" Easing="CubicOut" />
        </WhileNotEmpty>
    </TextInput>
    <Rectangle Layer="Background" Color="#444" Height="1" Alignment="Bottom" ux:Name="inputLine" />
</Panel>

The error thrown is the following:

`C:\www\sm_saas\kiwik-app\components\MatTextInput.ux(18,1): Error E8001: 'Fuse.Reactive.Property' must specify required attribute 'Object'C:\www\sm_saas\kiwik-app\components\MatTextInput.ux(18): E8001: 'Fuse.Reactive.Property' must specify required attribute 'Accessor'

Any idea what I might be doing wrong?