javascript - JS Globalize - 加载 json cldr

Question

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

现在我从全局化文档中得到了这个例子:

// 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 文件是异步加载的。这意味着在我的脚本尝试设置当前语言的那一刻，模块尚未加载。

现在我试着变聪明，做了这个:

$.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 中，我在这样的 knockout 绑定(bind)中使用了 globalize:

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

现在“formatNumber”方法抛出一个错误，因为在绑定(bind)发生时并不是所有的模块都被加载。

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

Answer 1

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

1. 使用带有 async: false 选项的 $.ajax 加载您的 json 模块。
2. 使用deferreds对所有 ajax 请求进行一次回调。

<强>1。使用 async: false

您可以使用更通用的方法 $.ajax 而不是 $.get(参见 description)。它有 async 选项:

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.

所以你可以重写你的请求如下:

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

您对所有 3 个请求执行此操作，然后调用:

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

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

<强>2。使用延迟:您可以使用 $.when()函数将所有三个请求的成功回调合并为一个，如下所示:

$.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
});

好处是所有请求现在都是异步完成的。但这仍然不能解决您的 knockout 绑定(bind)问题。为了解决这个问题，当所有数据加载完成时，ko.applyBindings 也应该在成功回调中被调用。