Pass through parameter to JavaScript

How-to Discussions
1

Hi,

I have a StackPanel layout with a loop of Card elements, and I’ve got a click event attached to them, how do I go around passing through a parameter to my JS click handler?

        <Clicked Handler="{cardClicked}" />

function cardClicked(this) { debug_log(“test”); debug_log(this.data); }

    It returns an object, but how do: onClick="cardClicked(i)";?

Another thing I was wondering is how to get the current position of the Each loop?

Cheers

2

I don’t know if its possible to add parameters since I have just started with Fuse today but you could use something like:

function cardClicked(sender) {
   var index = cards.indexOf(sender.data);
}
3

Rob: All events have a .data parameter on the argument which contains the data context for the object the event relates to, e.g.

function cardClicked(e)
{
    e.data  // <-- this is the data for the card
}
4

What would be in .data? And how could I access it?

<Image Url="{imageUrl}" Clicked="{pressItem}"/>

I have a List of NewsItem (same as in the SocialMediaMock Sample) - and I want to switch to a “Detail Page” of the clicked item… so I would need to get the Information of which Item got clicked, so that I could load a new page with the details of this item.

5

.data contains your NewsItem. You can use Utilites > Build & Debug log to see what it contains like in this example:

function pressItem(e) {
    console.log(JSON.stringify(e));
}

module.exports = {
    pressItem: pressItem
}
6

.data on an event contains the data context for the object on which the event originated.

For example:

<App>
    <JavaScript>
        module.exports = {
            items: ["B", "C", "D"],

            foo: function (e) { ... / use e.data / }
        }
    </JavaScript>

    <StackPanel>
      <Button Text="A" Clicked="{foo}" />
      <Each Items="{items}">
          <Button Text="{}" Clicked="{foo}" />
      </Each>
    </StackPanel>
</App>

In this case, if you click the A-button, e.data will be the entire module.exports object.

If you click B, C or D, e.data will be the strings "A", "B" and "C" respectively.

7

“B”, “C” and “D” :wink: