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?