JS Globalize - 加载json cldr [英] JS Globalize - load json cldr

问题描述

我对最新版本的 globalize.js 有疑问。
要使用它，我必须加载 cldr模块和语言定义。

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

现在我有了来自globalize docs的这个例子：

Now I had this example from the globalize 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');

我现在的问题是本地json文件被加载为异步。这意味着在我的脚本尝试设置当前语言的时刻，模块尚未加载。

My problem now is that the local json files are loaded async. That means at the moment where my script is try to set the current language, the modules are not yet loaded.

现在我试图变得聪明并做到了这一点：

Now I tried to be smart and made 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);

这将一直有效，直到我真正使用全球化格式方法。
在我的HTML中，我在这样的淘汰绑定中使用globalize：

This will work until I really used globalize format methode. Inside my HTML I use globalize inside a knockout binding like this:

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

现在formatNumber方法抛出错误，因为绑定时并非所有模块都被加载发生了。

Now the "formatNumber" method is throwing an error because not all module are loaded at the moment the binding is happend.

我现在的问题是，如何同步我的JavaScript？

My question is now, how can I sync up my JavaScript?

推荐答案

实际上有两种方法可以解决这个问题：

There are actually 2 ways to solve the issue:

1. 使用 $。ajax with async：false 加载json模块的选项。


2. 使用 deferreds 对你的所有ajax请求进行一次回调。

1. Use $.ajax with async: false option to load your json modules.
2. Use deferreds to have a single callback on all your ajax requests.

1。使用 async：false

1. Using async: false

您可以使用更通用的方法 $。 ajax 而不是 $。get （参见描述）。它有 async 选项：

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

默认情况下，所有请求都是异步发送的（即默认设置为true）。如果您需要同步请求，请将此选项设置为false。

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

因此您可以按如下方式重写请求：

So you can rewrite your requests as follows:

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

您为所有3个请求执行此操作，然后致电：

You do this for all 3 of your requests and then call:

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

就像你之前做的那样。但是现在，由于所有请求都是同步完成的，因此该代码应该按预期工作。该解决方案的缺点是它具有同步请求，这将导致一些延迟。这就是为什么我建议你第二个选择：

Just like you did before. But now, since all requests are done synchronously, this code should work as expected. The downside of this solution is that it has synchronous requests which will cause some delays. That is why I suggest you the second option:

2。使用延迟：
您可以使用 $。when（ ） 函数将所有三个请求的成功回调组合成如下：

2. Using deferreds: You can use $.when() function to combine success callbacks of all three requests to one like 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
});

好处是所有请求现在都是异步完成的。但这仍然无法解决你的淘汰赛绑定问题。要解决此问题，在加载所有数据时，还应在成功回调中调用 ko.applyBindings 。

The good thing is that all requests are now done asynchronously. But this would still not solve your knockout binding issue. To resolve it, ko.applyBindings should also be called in success callback, when all data is loaded.

这篇关于JS Globalize - 加载json cldr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！