JS Globalize - download json cldr

Question

I have a problem with the latest version of globalize.js . To work with it, I had to download the definitions of cldr modules and language.

Now I had this example from the globalize docs docs:

 // loading needed modules $.get('/Scripts/cldr/supplemental/likelySubtags.json', Globalize.load); $.get('/Scripts/cldr/main/en/numbers.json', Globalize.load); $.get('/Scripts/cldr/main/de/numbers.json', Globalize.load); // set current language lobalize.locale('de-de'); 

Now my problem is that local json files are loaded async. This means that the moment my script tries to set the current language, the modules are not loaded yet.

Now I tried to be smart and did this:

 $.get('/Scripts/cldr/supplemental/likelySubtags.json', function (data) { Globalize.load(data); Globalize.locale('de-de'); }); $.get('/Scripts/cldr/main/en/numbers.json', Globalize.load); $.get('/Scripts/cldr/main/de/numbers.json', Globalize.load); 

This will work until I use the globalize format method. Inside my HTML, I use globalize inside a knockout binding as follows:

 <span data-bind="text: Globalize.formatNumber(SomeNumber, { maximumFractionDigits: 0 })"></span> 

Now the "formatNumber" method throws an error, because not the whole module is loaded at the moment when the binding occurs.

Now my question is: how can I sync my JavaScript?

Answer 1

There are actually 2 ways to solve the problem:

• Use $.ajax with the async: false option to load your json modules.
• Use deferred to have one callback for all your ajax requests.

1. Using async: false

You can use the more general $.ajax method instead of $.get (see description ). It has an async option:

By default, all requests are sent asynchronously (i.e., by default, this value is true). If you need synchronous requests, set this parameter to false.

So, you can rewrite your queries as follows:

 $.ajax({ url: '/Scripts/cldr/supplemental/likelySubtags.json', type: 'GET', async: false, success: function(data) { Globalize.load(data); } }); 

You do this for all three of your queries, and then call:

 // set current language lobalize.locale('de-de'); 

As before. But now, since all requests are executed synchronously, this code should work properly. The disadvantage of this solution is that it has synchronous requests, which can cause some delays. This is why I offer you the second option:

2. Using pending events: You can use the $.when() function to combine successful callbacks of all three queries to this:

 $.when($.get('/Scripts/cldr/supplemental/likelySubtags.json'), $.get('/Scripts/cldr/main/en/numbers.json'), $.get('/Scripts/cldr/main/de/numbers.json')) .done(function(result1, result2, result3) { Globalize.load(result1[0]); //contains data of first executed request Globalize.load(result2[0]); //contains data of second executed request Globalize.load(result3[0]); //contains data of third executed request // set current language lobalize.locale('de-de'); // here you should fire your knockout binding }); 

It’s good that all requests are now executed asynchronously. But that still won’t solve your knockout problem. To solve this problem, ko.applyBindings should also be called on a successful callback when all the data is loaded.