How can I get a Property from JS when I click the Class?

How-to Discussions
1

In this example I’m trying to get the ux:Property from Javascript when I click an object. But I get null.
How can I get a Property from JS when I click the Class?

<App>
	<Panel>
		<Panel ux:Class="MyClass">
		    <string ux:Property="Var" />
		    <JavaScript>
		    	        function MyClassClicked(args) {
					console.log(this.Var);
					console.log(JSON.stringify(args));
				}

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

		    <Text Value="Click me and see debug!" TextColor="#000" TextAlignment="Center" Alignment="VerticalCenter">
		    	<Clicked Handler="{MyClassClicked}" />
		    </Text>
		</Panel>

		<MyClass Var="My Text" />
	</Panel>
</App>

Thanks!

2

Almost there, mate!

The problem in your example is that this inside of the callback function refers to the function scope itself, not the component model. And there is no this.Var inside of the function.

This works as you’d expect it to:

<App>
    <Panel>
        <Panel ux:Class="MyClass">
            <string ux:Property="Var" />
            <JavaScript>
               var localVar = this.Var;

               function MyClassClicked(args) {
                    console.log(localVar.value);
                }

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

            <Text Value="Click me and see debug!" TextColor="#000" TextAlignment="Center" Alignment="VerticalCenter">
                <Clicked Handler="{MyClassClicked}" />
            </Text>
        </Panel>

        <MyClass Var="My Text" />
    </Panel>
</App>