如何在knockout.js中處理本地化？

Question

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

看起來knockback.js有一個很好看的工具來處理本地化，我想知道是否有任何第三方庫可以與knockout.js一起使用來處理本地化而無需切換到knocback。 js來獲得這些功能（因爲我不需要這個簡單的應用程序的骨幹模型或路由）。像Mapping插件一樣簡單的使用會很理想。

謝謝！

Answer 1

這裏是一個simple fiddle展示淘汰賽兩種語言之間進行切換。它非常基本，但你的問題缺乏任何細節給你更復雜。

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

Answer 2

我不認爲這是必要做的映射，也沒有爲每個標籤使用觀測。

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代碼：

<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/

Answer 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閣：

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

切換語言的意願：

i18nextko.setLanguage('de'); 

和綁定：

data-bind="i18n: 'testTranslation'" 

或者：

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