如何在knockout.js中处理本地化

How to handle localization in knockout.js?

本文关键字：处理 本地化 js knockout      更新时间：2023-09-26

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

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

谢谢！！

这里有一个简单的小提琴，演示两种语言之间的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>​

ViewModels

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();
};

我认为没有必要进行映射，也没有必要为每个标签使用可观察性。

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/

有一个惊人的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 } }"
相关文章：