Can you put expressions in attribute tags? attr="{2*pi}"

How-to Discussions
1

Example: I’m trying to programmatically output a phrase and show the red word in red. Notice the bang (!) in the second Visibility=“{!red}”. Is this legal?

JS:

partList = [
 	{part: 'This word is ', 	red: 0},
 	{part: 'red', 	red: 1},
 	{part: '!' ,	red: 0} ]

UX:

<Each Items=“{partList}">
	<Text Value=“{part}” Visibility=“{red}” TextColor=“#f00" />
	<Text Value=“{part}” Visibility=“{!red}” TextColor=“#000" />
</Each>
2

A lot of things are legal in UX expressions, but your question isn’t actually about them. You seem to have assumed that the best solution to achieve what you needed was to render two text elements on top of each other, hiding one that doesn’t match a particular criteria.

Well, that is definitely not the way to do it, and Fuse offers a far better alternative. I present you, MatchKey (see the second example there)!

Here’s a working complete, minimal example:

<App>
    <JavaScript>
    var list = [
        {part: "one", style: "notRed"},
        {part: "two", style: "red"},
        {part: "three", style: "notRed"}
    ];
    module.exports = {
        list: list
    };
    </JavaScript>
    <WrapPanel Alignment="VerticalCenter">
        <Each Items="{list}" MatchKey="style">
            <Text ux:Template="red" Value="{part}" TextColor="#f00" />
            <Text ux:Template="notRed" Value="{part}" TextColor="#000" />
        </Each>
    </WrapPanel>
</App>
3

Thank you!!!