Some way to figure out what element was clicked from the clickHandler?

Feature Suggestions
1

Hi!

As I have mentioned in a previous post, I’m creating an application for voting, and I’ve run into some problems:

I have elements representing score from 1 through 5. But Right now it seems I need 5 clickhandlers - one for each element. So this leaves me with 5 functions doing pretty much the same. In HTML there’s functionality for adding custom data using the data-attribute, could it be possible to do the same here and have them as a part of the parameters in the clickhandler?

To me this would look something like this:

<JavaScript>
function voteHandler(args) {
    console.log(args.data.score);
}

module.exports = {
    voteHandler: voteHandler
}
</JavaScript>
<StackPanel>
    <Panel data-score="5" Click="{voteHandler}">
        <Text Value="Vote 5!" />
    </Panel>
    <Panel data-score="4" Click="{voteHandler}">
        <Text Value="Vote 4!" />
    </Panel>
    <Panel data-score="3" Click="{voteHandler}">
        <Text Value="Vote 3!" />
    </Panel>
    <Panel data-score="2" Click="{voteHandler}">
        <Text Value="Vote 2!" />
    </Panel>
    <Panel data-score="2" Click="{voteHandler}">
        <Text Value="Vote 2!" />
    </Panel>
    <Panel data-score="1" Click="{voteHandler}">
        <Text Value="Vote 1!" />
    </Panel>
</StackPanel>

Really open for other ways to solve it, but to me this feels a lot better than having multiple event-handlers for basicly the same thing.

Also, is there possible for the UI to know if a callback returns true or false? Let’s consider the function from above that would do an ajax-call to a backend storing the vote. If the vote is saved, it returns true, anything else it returns false. Let’s say I’d like the vote-button become red if it fails, and green if it’s successful. How would I go ahead and do this?
As the elements people would use to vote is generated dynamicly, I guess an observable would make the whole UI react the same, as I would need each element to react separatly.

Regards JoMs

2

This is how I would solve that:

<App Theme="Basic">
    <JavaScript>

    var votelist = [
        {'data_score': 5, 'text': 'Vote 5!'},
        {'data_score': 4, 'text': 'Vote 4!'},
        {'data_score': 3, 'text': 'Vote 3!'},
        {'data_score': 2, 'text': 'Vote 2!'},
        {'data_score': 1, 'text': 'Vote 1!'}
    ];

    function voteHandler(args) {
      console.log(args.data.data_score);
    }

    module.exports = {
      voteHandler: voteHandler,
      votelist: votelist
    }
    </JavaScript>
    <StackPanel>
        <Each Items="{votelist}">
            <Panel>
                <Clicked><Callback Handler="{voteHandler}" /></Clicked>
              <Text Value="{text}" />
            </Panel>
        </Each>
    </StackPanel>
</App>

It doesn’t look like Fuse supports two-way databinding on colors yet, so I don’t know how you would do that from JavaScript, without making custom Uno elements.

3

How would you do this if the javascript is in a seperate .js file? I’m trying to do something similar, and I’ve made it the same as your solution, but the javascript is in a seperate file, and I keep getting args undefined.

4

You would do it in exactly the same way. If you take Bolav’s above example, move the JS out in a separate file and then use <JavaScript File="myNewScriptFile.js"/> then everything else works just as before.

I suspect your issue is elsewhere. If you can share the relevant bit of code we can probably work it out. :slight_smile: