Hi,
Is there any way to pass as a class property a JS function to be called when an element within the class is clicked?
I would like to do something like this:
<App Theme="Basic">
<JavaScript>
function testClick(){console.log("Clicked funciona");}
module.exports = {testClick:testClick};
</JavaScript>
<Panel ux:Class="Test">
<Clicked ux:Property="Action"/>
<Rectangle Color="Red" Clicked="{Property this.Action}">
<Text Alignment="Center">Click</Text>
</Rectangle>
</Panel>
<Test Action="{testClick}"/>
</App>
Unfortunately, it doesn’t work.
And I’m getting this warning on Fuse Monitor
Warning: Data binding failed. The string 'Fuse.Scripting.V8.Function' is not a valid Fuse.Gestures.Clicked value
I don’t get what you are trying to do. Could you explain a bit more what your goal is?
@Anders Edzon is trying to be able to specify via the Action Property what the callback handler would be for the Clicked event for the Test class. I too now want to know how to do this, because I’ve tried:
<JavaScript>
function testClick() {console.log("Clicked funciona");} module.exports = {testClick:testClick};
</JavaScript>
<Panel ux:Class="Test">
<string ux:Property="Action" />
<Rectangle Color="Blue">
<Clicked>
<Callback Handler="{Property this.Action}" />
</Clicked>
<Text Alignment="Center">Click</Text>
</Rectangle>
</Panel>
<Test Action="{testClick}" />
It might not be the best way to do it, but it works.
<JavaScript>
function testClick() {console.log("Clicked funciona");} module.exports = {testClick:testClick};
</JavaScript>
<Panel ux:Class="Test">
<object ux:Property="Action" />
<Select Data="{Property this.Action}">
<Rectangle Color="Blue" Clicked="{testClick}">
<Text Alignment="Center">Click</Text>
</Rectangle>
</Select>
</Panel>
<Test Action="{}" />
That’s not the same because then we could just do:
<Panel ux:Class="Test">
<Rectangle Color="Blue" Clicked="{testClick}">
<Text Alignment="Center">Click</Text>
</Rectangle>
</Panel>
<Test />
Without even needing the Action property, that’s keeping the function static instead of dynamically set.
Meaning being able to just pass any function I want to the Action property like so:
<Test Action="{method1}" />
<Test Action="{method2}" />
<Test Action="{method3}" />
... // etc
I think Anders meant we can do something like this:
<App Theme="Basic">
<JavaScript>
function testClick(val) {
val.data();
}
module.exports = {
testClick:testClick,
handlers:{
method1: function(){console.log("first was clicked");},
method2: function(){console.log("second was clicked");}
}
};
</JavaScript>
<Panel ux:Class="Test">
<object ux:Property="Action" />
<Select Data="{Property this.Action}">
<Rectangle Color="Blue" Clicked="{testClick}">
<Text Alignment="Center">Click</Text>
</Rectangle>
</Select>
</Panel>
<StackPanel>
<Test Action="{handlers.method1}" />
<Test Action="{handlers.method2}" />
</StackPanel>
</App>
and it works!!!
Honestly gotta say that seems pretty nasty, would be much cleaner if what you initally showed above was possible, plus you’ll be able to use any method that is exported not just from the handlers object
I totally agree with you.
Fortunately at least there is one way to do it, but I definitely hope this kind of things will be supported on a future release.
By the way, I think this is much cleaner
<App Theme="Basic">
<JavaScript>
function handler(val) {val.data();}
function method1(){console.log("first was clicked");}
function method2(){console.log("second was clicked");}
module.exports = {
handler:handler,
method1:method1,
method2:method2
};
</JavaScript>
<Panel ux:Class="Test">
<object ux:Property="Action" />
<Select Data="{Property this.Action}">
<Rectangle Color="Blue" Clicked="{handler}">
<Text Alignment="Center">Click</Text>
</Rectangle>
</Select>
</Panel>
<StackPanel>
<Test Action="{method1}" />
<Test Action="{method2}" />
</StackPanel>
</App>
As I said, it’s not the best solution, only a workaround. I think we solve this in the upcoming major release. I will ping someone that can verify this.
Hi guys,
I’m not 100% clear on what you guys are trying to do, but it sounds like the feature you are looking for is UserEvent:
https://www.fusetools.com/learn/fuse#user-events
Note, as of 0.12.3, user events are global only. However, in a near future version, the API will be revised to support local/per object events.
@Anders Lassen
You know how Button has a Clicked property that you can pass a function to, if you wanted to do that with your own class how would you do that:
Let’s say I had:
<Panel>
<string ux:Property="Label" />
<WhatShouldThisBe ux:Property="Action" />
<Text Value="{Property this.Label}" />
<Button Value="Click Me!" Clicked="{Property this.Action}" />
</Panel>
There’s a line missing what type of property should Action be what should WhatShouldThisBe be
A new release with what Anders talked about is out now.