Question

我有一个“locale”observable，它基本上只是一个包含特定于语言环境的字符串的JS对象。我还有一个标签可观察数组，它包含多个属性，其中一个是由区域设置值填充的标题。

e.g。

this.tabs = ko.observableArray([{
    title: this.locale().tabs.one
}, {
    title: this.locale().tabs.two
}]);

这是一个JSFiddle来演示：http://jsfiddle.net/robgallen/v64p2/

我正在尝试找出在更改区域设置可观察时更改标签标题的最佳策略。

我尝试使用淘汰赛映射，但这似乎没有帮助。我还尝试添加ko.observableArray.fn.refresh来更新tabs数组中的数据，但它只是使用原始的tabs数据，而不是返回到语言环境数据。

Answer 1

相反怎么样？ updated fiddle

<ul data-bind="with: locale">
     <li data-bind="text: tabs.one"></li>
    <li data-bind="text: tabs.two"></li>
</ul>

或者这个update对于rwisch45的小提琴也是如此

Answer 2

您最好的选择是使用客户端i18n解决方案，例如i18next。允许用户动态更改区域设置的问题在于它将导致极其复杂的UI。否则将是样板的文本 - 例如，字段标签，制表符等 - 需要是可观察的，以便响应您的语言环境中的可观察的更改（很可能在配置模块中）。必须将可配置的observable注入到每个模块中，以便驱动区域设置中的可观察更改。

我们尝试了你正在采取的方法，并发现它让我们沉重负担。我们选择了一种不引人注目的东西，这种东西并不是为了传达语言变化而在任何地方都不需要可观察的东西。

@ rwisch45建议订阅，这对于一个小解决方案来说也可以正常工作。但订阅不会很好地扩展。

Answer 3

您可以使用subscribe（请参阅explicitly subscribing to observables in the KO docs）了解locale的值何时发生变化。见updated fiddle。每次更改locale的值时，视图模型中的以下可观察订阅都将触发。您可以将自己的自定义逻辑放在函数中。

self.locale.subscribe(function(){
   alert('locale changed');
});

Answer 4

在考虑了这里的答案后，尤其是查克的答案，这是我能想到的最好的答案：

http://jsfiddle.net/robgallen/v64p2/3/

添加重新填充tabs数组的订阅，使用键查找更改的语言环境字符串：

self.locale.subscribe(function (data) {
    var newTabs = [];
    ko.utils.arrayForEach(self.tabs(), function(tab) {
        tab.title = data.tabs[tab.key];
        newTabs.push(tab);
    });
    self.tabs(null);
    self.tabs(newTabs);
});

不太好，我意识到我可能没有以正确的方式思考这个问题。幸运的是，大多数本地化都是在html视图中完成的，这很好。

更改不同的observable时更新可观察的数组属性

4 个答案: