How access JS exported variables and "Each" object properties? What is scope in inline JavaScript?

How-to Discussions
1

Here I’m attempting to access previously JavaScript variables and the value being iterated over. Is this possible?

<App>

    <JavaScript>
	    module.exports = {
	        list: [
		        {phrase: "hello"},
		        {phrase: "team"}
		    ]
    	};
    </JavaScript>
    <WrapPanel Alignment="VerticalCenter">
        <Each Items="{list}">
		    <JavaScript>
                            debug_log "list=" + list;
			    debug_log "phrase=" + phrase;
		    </JavaScript>
            <Text Value="{phrase}" />
        </Each>
    </WrapPanel>
</App>
2

Yes, it’s possible, but in a different way:

<App>
    <JavaScript>
        module.exports = {
            list: [
                {phrase: "hello"},
                {phrase: "team"}
            ]
        };
    </JavaScript>
    
    <WrapPanel Alignment="VerticalCenter">
        <Each Items="{list}">
            <ListItem Phrase="{phrase}" />
        </Each>
    </WrapPanel>

    <Panel ux:Class="ListItem">
        <string ux:Property="Phrase" />
        <JavaScript>
        this.Phrase.onValueChanged(module, function(x) {
            console.log("phrase: '" + x + "'");
        });
        </JavaScript>
        <Text Value="{ReadProperty Phrase}" />
    </Panel>
</App>

Read more about Properties.