Local component function

How-to Discussions
1

Hi I am new to fuse and was trying to have 5 buttons that when you click on them the clicked button counter would decrease and the others would stay the same. I’ve got it working where all buttons get decremented at the same time, is there a way to achieve this effect? Below is my code of how i have it so far.

<JavaScript>
	var Observable = require('FuseJS/Observable');
	var repCount = Observable(5);

	clicked = function() {
		if (repCount.value > 0){
			repCount.value--;
		} else {
			repCount.value = 5
		}
	};

	module.exports = {
		repCount: repCount,
		clicked: clicked
	}
</JavaScript>
<Circle ux:Class="Reps" Width="50" Color="#f00" Margin="10,0,10,0" Clicked="{clicked}">
	<Text Value="{repCount}" TextColor="#fff" FontSize="20" Alignment="Center" />
</Circle>

<StackPanel Width="100%" Height="80" Orientation="Horizontal" Alignment="Bottom">
	<Reps />
	<Reps />
	<Reps />
	<Reps />
	<Reps />
</StackPanel>

I have tried, according to the creating components docs, to define a local clicked function but when I click the component the function is not being called. Following is the code i have tried.

<Circle ux:Class="Reps" Width="50" Color="#f00" Margin="10,0,10,0" Clicked="{clicked}">
	<JavaScript>
		function clicked() {
			console.log('clicked');
		}
	</JavaScript>
	<Text Value="{repCount}" TextColor="#fff" FontSize="20" Alignment="Center" />
</Circle>

thanks in advance

2

Hi!

You cannot bind {clicked} to a function defined inside the component. You have to create an extra wrapper panel for this to work.

3

Thanks! That’s what I was missing, works like a charm