Match Case Error

How-to Discussions
1

Hi,

I get stuck with this simple case below. In the Match I want to compare Observable Language with shortName as part of langSelection. When replacing the hard-coded string ‘en’ in the first case with the wanted comparison {shortName} the whole thing crashes. What am I doing wrong?

<App Theme="Basic" Background="#aaa">
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var language = Observable('en');
    var langSelection = Observable()
    langSelection.add({name:'English',shortName: 'en',});
    langSelection.add({name:'Deutsch',shortName: 'de',});

    module.exports = {
        langSelection: langSelection,
        language: language,
    };
    </JavaScript>
    <StackPanel>
        <Each Items="{langSelection}"> 
            <StackPanel Orientation="Horizontal" >
                <Text Value="language:" />
                <Text Value="{language}" />
                <Text Value=":shortName:" /> 
                <Text Value="{shortName}" />
                <Text Value=":" /> 
            </StackPanel>

            <Panel>
                <Match Value="{language}">
                    <Case String="en" >  <!-- Replace en with {shortName} will lead to crash. -->
                        <Text Value="case en" />                
                    </Case>
                    <Case IsDefault="true" String="default_language" >
                        <Text Value="Default case" />
                    </Case>
                </Match>
            </Panel>
        </Each>
    </StackPanel>
</App>
2

I think is because you want to match a string with an object? Why do you want that? There’s no point in comparing something that is not set, you already have {language} as a variable. Or I’m missing something here?

Can you explain exactly what you’re trying to achieve?

3

The code is narrowed down to the problem and is part of something larger. In the project I like to have settings where the user can select the language. The possible options are in the object langSelection and when the user selects one option a User Event is triggered which sets the language in JS. I am happy to learn a better way to achieve this. My plan was to have it generic in .ux, so if languages are added the only place to do this would be in JS without touching Settings.ux.

4

Then you shouldn’t be using Match. I imagine you could do it all in JS and the UI can return an Observable to trigger something in JS. Or you can use a User event with an argument: https://www.fusetools.com/learn/fuse#user-events

5

Under OSX above example works, under Windows it crashes.

So is this a bug?

A simple work-around is to add a boolean to langSelection and Match against that one.