Pass name of function from an array to <Callback Handler

How-to Discussions
1

Hello There,

I am keeping the name of functions to call from the UX in an array and want to use Callback Handler to initiate the functions.

It is something like this;

{ title: ‘Manuel Entry’, imaget: “Assets/map.png”, hyper: “loadqr”}

and I want to call the loadqr() function from the UX.

I know that I can call the function using <Callback Handler, but what would the notation be ?

Thanks in advance,

2

There are several approaches you could take to achieve what you’re after.

Approach one, in-line the functions in your objects:

<App>
    <JavaScript>
    var data = [
        {
            title: "One",
            color: "#18f",
            handler: function() {
                console.log("handler One");
            }
        },
        {
            title: "Two",
            color: "#f81",
            handler: function() {
                console.log("handler Two");
            }
        }
    ];
    module.exports = {
        data: data
    };
    </JavaScript>
    <StackPanel Alignment="VerticalCenter" ItemSpacing="4">
        <Each Items="{data}">
            <Panel Width="128" Height="48">
                <Clicked>
                    <Callback Handler="{handler}" />
                </Clicked>
                <Text Value="{title}" Alignment="Center" TextColor="#fff" />
                <Rectangle Color="{color}" CornerRadius="2" />
            </Panel>
        </Each>
    </StackPanel>
</App>

Approach two, use a global callback and switch on the parameters:

<App>
    <JavaScript>
    var data = [
        {
            title: "One",
            color: "#18f",
            handler: "one"
        },
        {
            title: "Two",
            color: "#f81",
            handler: "two"
        }
    ];

    function proxy(args) {
        switch (args.data.handler) {
            case "one":
                execOne();
                break;
            case "two":
                execTwo();
                break;
            default:
                console.log("Unknown handler: " + args.data.handler)
                break;
        }
    }

    function execOne() {
        console.log("handler One");
    }

    function execTwo() {
        console.log("handler Two");
    }

    module.exports = {
        data: data,
        proxy: proxy
    };
    </JavaScript>
    <StackPanel Alignment="VerticalCenter" ItemSpacing="4">
        <Each Items="{data}">
            <Panel Width="128" Height="48">
                <Clicked>
                    <Callback Handler="{proxy}" />
                </Clicked>
                <Text Value="{title}" Alignment="Center" TextColor="#fff" />
                <Rectangle Color="{color}" CornerRadius="2" />
            </Panel>
        </Each>
    </StackPanel>
</App>

Which one you choose depends on your use case, which you haven’t explained. Hope this helps though.

3

Hello Eren,

If I got you right, you should use something like that:
For UX:

<Each Items="{items}">
   <Panel>
      <Clicked>
         <Callback handler="{loadqr}"/>
      </Clicked>
   </Panel>
</Each>

For .js:

function loadqr(arg){
var item = arg.data;
router.push("addItem", item);
// To move somewhere for example
//or add some other logic in loadqr working with "item"
}

and then in AddItemPage.js

var item = this.Parameter;
var title = item.map(function(x) {return x.title});
var imaget = item.map(function(x) {return x.imaget});
var hyper = item.map(function(x) {return x.hyper});
//To do something with them afterwards

It is if I got you right, may be you could share some code, to see where are you and get on the same page?
P.S> The similar topic has been covered earlier here: https://www.fusetools.com/community/forums/howto_discussions/callback_with_arguments