Data binding: How to address single array elements (Use case: Localization)

How-to Discussions
1

Hi,

to localize an app I was thinking about storing the data in a file. Simple example for 2 languages:

var lang = Observable(
{ lang1: "Settings", lang2: "Einstellungen" },
{ lang1: "History", lang2: "Verlauf" },
{ lang1: "Add", lang2: "Addieren" },
{ lang1: "Subtract", lang2: "Subtrahieren" } );

In my .js there is logic to select an operation (e.g. Add or Subtract). In .ux I want to show this operation in the correct language.

For small amount of data of course I can define the operation in the correct language and pass it via data binding to .ux.

But how to do this for many terms? E.g. How to reach ‘Addieren’ if language is lang2 and the term to extract is ‘Add’ ? Is there some generic way?

I’ve seen the thread about localization where all terms are defined in .ux. But that will not do in this case, as the .js shall decide the text.

2

Hi!

One way of doing it is by using Observable.map like so:

var myLanguage = "lang2";
var actualLang = lang.map(function(x){
    return myLanguage === "lang2" ? x.lang2 : x.lang1;
});
module.exports = {
    actualLang: actualLang
};

Then you can databind to actualLang, knowing that it contains the correct language.

Another way is using Match-Case in UX:

<Match Value="{myLanguage}">
    <Case String="lang1">
        <Text Value="{lang1}"/>
    </Case>
    <Case String="lang2">
        <Text Value="{lang2}"/>
    </Case>
</Match>
3

Thanks!

In case one there is the correct language in actualLang. What I do not know: how to address now a specific element out of this? (e.g the one containing the transalation for ‘Add’)

Same question applies also to Match-Case solution.

4

This is an old thread, but I was recently considering localization for a Fuse app. @mbefore305, it seems one alternative for an application-wide scenario of language display would be to use @Kristian’s .map solution, but you would probably want to restructure your data with a key/tag to indicate the ‘use’ of a particular translation. It might look like the following before the map.

{ "addTag": {"lang1": "Add", "lang2": "Addieren"}, "subTag": { "lang1": "Subtract", "lang2": "Subtrahieren" } }

Assuming lang2 chosen, you could then map it to perhaps one of the following examples:

{"addTag": "Addieren"} or…

{"addTag": {"actualLang": "Addieren", "lang1": "Add", "lang2": "Addieren"} }

After the map, you would address it as either (respectively):

<Text Value="{addTag}" />

<Text Value="{addTag.actualLang}" />

5

For localization, we suggest using this approach.

6

Good to know info! Thanks @Uldis.

7

Is there an official list of 3rd-party components – especially the ‘recommended’ ones? :wink:

8

We do have a list of Community Packages, but when it comes to “best practices”, it’s mostly a know-how thing.

Don’t hesitate to ask in separate forum posts, we’ll do our best to steer you in the right direction.