Globalization 1.x with DevExtreme library

805 Views Asked by At

I have a question with the DevExtreme v.16.1 in combination with Globalize 1.x. They upgraded from 0.x to 1.x and I cannot make it work since the update.

I put the loading of the librries in an external file, and loaded the rest of the application after the promise is resolved.

This is tje importatn part of my localize.js

$(function () {
    MK.localisation.init = $.when(
        // CLDR libraries for NL-nl
        $.getJSON("js/localization/nl/ca-gregorian.json"),
        $.getJSON("js/localization/nl/numbers.json"),
        $.getJSON("js/localization/nl/currencies.json"),

        // CLDR libraries for DE-de
        $.getJSON("js/localization/de/ca-gregorian.json"),
        $.getJSON("js/localization/de/numbers.json"),
        $.getJSON("js/localization/de/currencies.json"),

        // CLDR libraries for EN-uk
        $.getJSON("js/localization/en/ca-gregorian.json"),
        $.getJSON("js/localization/en/numbers.json"),
        $.getJSON("js/localization/en/currencies.json"),

        //additional CLDR libraries
        $.getJSON("js/cldr/supplemental/likelySubtags.json"),
        $.getJSON("js/cldr/supplemental/timeData.json"),
        $.getJSON("js/cldr/supplemental/weekData.json"),
        $.getJSON("js/cldr/supplemental/currencyData.json"),
        $.getJSON("js/cldr/supplemental/numberingSystems.json")
    ).then(function () {
        // Normalize $.get results, we only need the JSON, not the request statuses.
        return [].slice.apply(arguments, [0]).map(function (result) {
            return result[0];
        });
    }).then(
        Globalize.load
    ).then(function () {
        return $.when(
            $.getJSON("js/localization/nl/dx.all.nl.json"),
            $.getJSON("js/localization/nl/localization.nl.json"),
            $.getJSON("js/localization/de/dx.all.de.json"),
            $.getJSON("js/localization/de/localization.de.json"),
            $.getJSON("js/localization/en/dx.all.en.json"),
            $.getJSON("js/localization/en/localization.en.json")
        ).done(function (r1,r2,r3,r4,r5,r6) {
            Globalize.loadMessages(r1[0]);
            Globalize.loadMessages(r2[0]);
            Globalize.loadMessages(r3[0]);
            Globalize.loadMessages(r4[0]);
            Globalize.loadMessages(r5[0]);
            Globalize.loadMessages(r6[0]);
            Globalize.locale("nl");
            $.each(MK.config.navigation, function () {
                if (this.title.indexOf('@') === 0) {
                    this.title = Globalize.formatMessage(this.title.substring(1));
                }
            });           
        });
    });

If i put a breakpoint at Globalize.locale("nl"), I see that all messages are loaded inside the Globalize object.

I call this function at the top of my index.js the following way:

$(function () {

    //setup localisation
    MK.localisation.init.done(function () {
        Globalize.locale("de");
        //rest of the app decalration follows here
    })

I can also use the translation within JavaScript without problem

Globalize.formatMessage("someString")

However, the DevExtreme modules are not translated. They remain in english. It is also possible to let strings be translated directly inside the view with the @someString syntax. This does not work with strings i declared either. It does work with the build in strings though, so the parsing does work.

I suspect timing problems, maybe the views are parsed before the strings are loaded? Cannot solve the problem though, followed the manual of devextreme to the point i think...

http://js.devexpress.com/Documentation/Guide/SPA_Framework/Localization/?version=16_1&approach=Knockout

0

There are 0 best solutions below