Need Help to Set Observable value from own ux:Class


#1

Hello Everyone,
i need your help. I have made new TextInput Class called EmailInput.
In this EmailInput ux:Class i will set the status Observable in Context.js or the error Observable in RegisterPage.js but it don’t work.
I expected the output is Error: test in RegisterPage.ux but it shows only the static Text Error and no Observable value.
Now the question: How can i set the Observable value from my EmailInput ux:Class?

I have the following code:

RegisterPage.ux

<Page ux:Class="RegisterPage">
  <Router ux:Dependency="router" />
	
    <JavaScript File="RegisterPage.js" />

	<ScrollView Padding="20">
		<StackPanel>
		    <Text>RegisterPage</Text>

		    <Text Margin="0, 20, 0, 0">Mail:</Text>
		    <EmailInput />

		    <Text Margin="0, 20, 0, 0">Error:</Text>
		    <Text Value="{error}" />
		</StackPanel>
	</ScrollView>

	<TextInput ux:Class="EmailInput" Height="30" Padding="5" Value="{Property Text}">
	    <string ux:Property="Text" />
	    <bool ux:Property="IsValid" />

	     <JavaScript>
	      	  let RegisterPage = require("Pages/RegisterPage");
  	          let text = this.Text.value;
  	          
  	          //Not working
  	          RegisterPage.error.value = 'test';
  	          //Not working
  	          //RegisterPage.error.value = {error: 'test'};

  	          console.dir(RegisterPage.error.value);
	      </JavaScript>

	    <Rectangle CornerRadius="4" Layer="Background">
	        <Stroke ux:Name="stroke" Width="1" Color="#BBB" />
	    </Rectangle>

    	<WhileNotFocused>

	     <WhileContainsText>
	      	<WhileFalse Value="{Property IsValid}">
		     <Change stroke.Color="Red" />
		 </WhileFalse>

		  <WhileTrue Value="{Property IsValid}">
		      <Change stroke.Color="Green" />
		   </WhileTrue>
	      </WhileContainsText>

	    </WhileNotFocused>
	</TextInput>
</Page>

RegisterPage.js

let Context = require("Modules/Context");

let email = Context.user.map(function(x) { return x.email; }).inner();
let error = Context.status.map(function(x) { return x.error; }).inner();

module.exports = {
	email: email,
	error: error
};

Context.js

let Observable = require("FuseJS/Observable");
let Backend = require("./Backend");

let user = Observable();
let status = Observable();

module.exports = {
	Observable: Observable,

	user: user,
	status: status
};

#2

You must create a function that sets the value of the Observable:

function setStatusValue() {
    status.value = true;
};

and then call the function in UX:

<Callback Handler="{setStatusValue}" />