如何处理 knockout.js 中的本地化？答案

【问题标题】：How to handle localization in knockout.js?如何处理 knockout.js 中的本地化？
【发布时间】：2012-07-11 07:25:01
【问题描述】：

您如何使用 knockout.js 处理本地化？

看起来 knockback.js 有一个漂亮的实用程序来处理本地化，我想知道是否有任何第三方库可以与 knockout.js 一起使用来处理本地化，而不必实际切换到 knocback.js获得这些功能（因为我真的不需要这个简单应用程序的主干模型或路由）。像 Mapping 插件这样简单易用的东西是理想的。

谢谢！！

【问题讨论】：

如果您从服务器获取本地化字符串，那么您所要做的就是使用text 绑定来设置所有字符串。你有什么具体问题？
@Tyrsius，好吧，我没有从服务器获取本地化字符串，所以这可能是一种解决方案。我得想一个好办法来设置它。关于这个问题，我特别寻找的是一种在 knockout.js 中切换本地化字符串的方法，类似于 knockback.js 处理它们的方式（例如，see.），所以我不会必须修改服务器端 API。感谢您的建议！
你刚刚链接到一个回答你自己问题的教程。击退使用击倒。 阅读链接。
虽然 Knockback.js 使用 knockout.js（和骨干.js），但我对链接的阅读是，knockback.js 的本地化功能，本地化管理器和本地化的 observables，都是添加而不是是 knockout.js 的一部分，对吗？
好吧。有点。我对敲击不太熟悉，但它看起来像是敲除绑定的薄包装，以使本地化步骤更容易。但实际上，正如我的回答所证明的那样，淘汰赛很容易做到这一点。

标签： javascript knockout.js single-page-application

【解决方案1】：

这是一个simple fiddle，演示了两种语言之间的 Knockout 切换。它非常初级，但您的问题缺乏任何细节，无法让您更加复杂。

HTML

<div data-bind="with: selectedLanguage">
    <h1 data-bind="text: header"></h1>
    <h2 data-bind="text: subHeader"></h2>
    <p data-bind="text: body"></p>
</div>
<select data-bind="options: languages, optionsText: 'name', value: selectedLanguage"></select>

视图模型

var Language = function(language) {
    this.name = ko.observable(language.name);
    this.header = ko.observable(language.header);
    this.subHeader = ko.observable(language.subHeader);
    this.body = ko.observable(language.body);
};

var ViewModel = function(data) {
    var self = this;
    self.languages = ko.observableArray(
    ko.utils.arrayMap(data, function(i) {
        return new Language(i);
    }));
    self.selectedLanguage = ko.observable();
};

【讨论】：

无需将 Language 的每个属性都设为可观察的！如果你有很多标签，它会减慢页面速度。我编辑了你的小提琴：jsfiddle.net/runjep/KRS2A/63
但是如果它们是可观察到的，那么您可以更改语言并且页面会更新，不是吗？
@NeilBarnwell 请看小提琴。更改语言确实会更新页面。
在语言函数中，只需创建一个循环：for (var key in language) { this[key] = language[key]; }
@Sintyche 实际上，它需要是this[key] = ko.observable(langauage[key])，但我仍然不建议这样做。首先，我经常在构造函数中重命名属性，因为它们的源可能有不同的约定。其次，我可能不想要消息来源给我的所有属性。

【解决方案2】：

我认为没有必要进行映射，也不需要为每个标签使用 observables。

var ViewModel = function () {  
    this.l = ko.observable(spanish);
    this.chooseenglish = function () {
        this.l(english);
    };
  this.choosespanish = function () {
        this.l(spanish);
    };
};
var spanish = {
    header: "Bienvenidos",    
    body: "Esta es la demostración de idioma"
};
var english = {
    header: "Welcome",
     body: "This is the language demo"
}
    ko.applyBindings(new ViewModel());

在 html 代码中你只需要调用 observable 和标签名称：

<h1 data-bind='text: l().header'></h1> 
<button data-bind='click: chooseenglish'>English</button>
<button data-bind='click:choosespanish'>Spanish</button>
<p data-bind='text: l().body'></p>

http://jsfiddle.net/runjep/3Lqsx/2094/

【讨论】：

【解决方案3】：

有一个很棒的i18next-ko 项目，它在后台使用i18next。

定义你的翻译：

var resourceStore = {
    en: {
      translation: {
        'testTranslation': 'Test translation',
        'testTranslation2': 'Test translation __param__'
      }
    },

    de: {
      translation: {
        'testTranslation': 'Test-Übersetzung',
        'testTranslation2': 'Test-Übersetzung __param__'
      }
    }
  }

初始化 i18next-ko：

i18nextko.init(resourceStore, 'en', ko);

随意切换语言：

i18nextko.setLanguage('de');

并绑定：

data-bind="i18n: 'testTranslation'"

或者：

data-bind="i18n: { key: 'testTranslation2', options: { param: paramObservable } }"

【讨论】：