Original Example form Docs not working

How-to Discussions
1

Hello Fuse Community,
i copied these code from these page https://fuseopen.com/docs/componentization.html
It does not work and shows the following error:
“Error : There is nothing named ‘status’ in this scope, and no global resources with that alias”

Has anyone an idear why?

<App>
	<Grid ux:Class="OnOffButtons" ColumnCount="2">
		<bool ux:Property="Value" />

		<Panel HitTestMode="LocalBounds">
			<Text Value="On" />
			<Clicked>
				<Set this.Value="true" />
			</Clicked>
		</Panel>
		<Panel>
			<Text Value="Off" />
			<Clicked>
				<Set this.Value="false" />
			</Clicked>
		</Panel>
	</Grid>

	<Circle ux:Class="StatusCircle" Width="40" Height="40" Color="Gray">
		<bool ux:Property="Status" />
		
		<WhileTrue Value="{ReadProperty Status}">
			<Change status.Color="Green" />
		</WhileTrue>
		
		<WhileFalse Value="{ReadProperty Status}">
			<Change status.Color="Red" />
		</WhileFalse>
	</Circle>

	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var status = Observable(false);

		module.exports = {
			status: status
		};
	</JavaScript>

	<StackPanel Margin="10" Padding="10" Color="#eee" ItemSpacing="8">
		<StatusCircle Status="{status}" />
		<OnOffButtons Value="{status}" />
	</StackPanel>

</App>

UPDATE:

Now i got this Example to work but i have struggle to set my property via javascript.
I need help why ist this this.Status.value = "true";working outside a function and not working inside a function?

function setProperty(arg) {
    //This is not working
   this.Status.value = "true"; 
}

Here is the full code please help me.

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var status = Observable('initial');

		module.exports = {
			status: status
		};
	</JavaScript>

	<StackPanel Margin="10" Padding="10" Color="#eee" ItemSpacing="8">
		<StatusCircle Status="{status}" />
		<OnOffButtons Status="{status}" />
	</StackPanel>

	<Grid ux:Class="OnOffButtons" ColumnCount="2">
		<string ux:Property="Status" />

		<JavaScript>
			//This is working
			//this.Status.value = "true"; 

			function setProperty(arg) {
				console.log('setProperty');
				//This is not working
				this.Status.value = "true"; 
			}

			module.exports = {
				setProperty: setProperty
			};
		</JavaScript>

		<Panel>
			<Text Value="On"/>
			<Clicked>
				<Callback Handler="{setProperty}"/>
			</Clicked>
			<!-- This is working -->
			<!--<Text Value="On" />
			<Clicked>
				<Set this.Status="true" />
				<DebugAction Message="{Property Status}" />
			</Clicked>-->
		</Panel>

		<Panel>
			<Text Value="Off" />
			<Clicked>
				<Set this.Status="false" />
				<DebugAction Message="{Property Status}" />
			</Clicked>
		</Panel>
	</Grid>

	<Circle ux:Class="StatusCircle" Width="40" Height="40" Color="Gray">
		<string ux:Property="Status" />

		<Stroke ux:Name="stroke" Width="10" Color="Yellow" />
		
		<WhileString Value="{ReadProperty Status}" Equals="true" CaseSensitive="false">
			<Change this.Color="Green" />
			<Change stroke.Color="Black" />
		</WhileString>
		
		<WhileString Value="{ReadProperty Status}" Equals="false" CaseSensitive="false">
			<Change this.Color="Red" />
			<Change stroke.Color="Blue" />
		</WhileString>
	</Circle>
</App>
2

i think because this when inside function refer to different class / object (a global module class) but this outside function refer to current class. to make it works you have to create new variable outside function, and then call variable in your function, something like this :

var status = this.Status
function setProperty(args) {
    status.value = "true";
}
3

Nice thank you Ichan_mb now it’s working.
I think this topic can now be closed. It’s all working Thank you.