How to passing parameter on click event?

How-to Discussions
1

Say I have 3x3 number pad represented by 9 buttons from 1 to 9, so how can I bind them to the same btnClicked function and then tells which button did the user pressed?

2

Hey there, a quick answer to your question would be “you don’t pass params on click event”. Fuse is so awesome that it handles this for you and passes the data context to the callback function when you use a Clicked trigger.

Having said that, one should note that this mostly is useful when your data context is being set by either an Each iterator in UX, or by a Select control, otherwise the context becomes the whole page you’re on.

I see at least two ways how to solve your exercise.

Approach one: use a JS data source to generate the clickable items, and receive the whole clicked object in callback function. Code:

<App>
    <JavaScript>
    var numpad = [
        {'num':1,'fill':'#faa'},
        {'num':2,'fill':'#aaf'},
        {'num':3,'fill':'#afa'},
        {'num':4,'fill':'#faf'},
        {'num':5,'fill':'#ffa'},
        {'num':6,'fill':'#aff'},
        {'num':7,'fill':'#abc'},
        {'num':8,'fill':'#cba'},
        {'num':9,'fill':'#bac'}
    ];

    function numClicked(args) {
        console.log('registered a click on item with num=' + args.data.num + ' and fill=' + args.data.fill);
    };

    module.exports = {
        'numpad': numpad,
        'numClicked': numClicked
    };
    </JavaScript>
    <WrapPanel Width="300" Height="300" Alignment="Center">
        <Each Items="{numpad}">
            <Panel Width="100" Height="100" Background="{fill}" HitTestMode="LocalBoundsAndChildren">
                <Text Alignment="Center" Value="{num}" />
                <Clicked>
                    <Callback Handler="{numClicked}" />
                </Clicked>
            </Panel>
        </Each>
    </WrapPanel>
</App>

Approach two: make the UX static (instead of generating it as in example one), assign distinct ux:Names to all clickable elements, and catch the sender in callback function. It’s important to note that sender in the callback function arguments is only available when the clicked element was assigned a ux:Name.

<App>
    <JavaScript>
    function numClicked(args) {
        console.log('registered a click on item with num=' + args.sender);
    };

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

    <Panel ux:Class="NumItem" Width="90" Height="90" Margin="3" Background="#faa" HitTestMode="LocalBoundsAndChildren">
        <string ux:Property="Label" />
        <Text Alignment="Center" Value="{Property this.Label}" />
        <Clicked>
            <Callback Handler="{numClicked}" />
        </Clicked>
    </Panel>

    <WrapPanel Width="300" Height="300" Alignment="Center">
        <NumItem ux:Name="num1" Label="1" />
        <NumItem ux:Name="num2" Label="2" />
        <NumItem ux:Name="num3" Label="3" />
        <NumItem ux:Name="num4" Label="4" />
        <NumItem ux:Name="num5" Label="5" />
        <NumItem ux:Name="num6" Label="6" />
        <NumItem ux:Name="num7" Label="7" />
        <NumItem ux:Name="num8" Label="8" />
        <NumItem ux:Name="num9" Label="9" />
    </WrapPanel>
</App>
3

Thanks so much for detailed solution. Learned a few tricks from you. thanks again.