How to handle localization in knockout.js?

Question

How do you handle localization using knockout.js?

It seems like knockback.js has a nice looking utilities to handle localization, and I'm wondering if there are any third party libraries which can be used with knockout.js to handle localization without having to actually switch to knocback.js to get those features (since I don't really need the backbone models or routing for this simple app). Something as simple to use as the Mapping plugin would be ideal.

Thanks!!

Answer 1

Here is a simple fiddle demonstrating Knockout switching between two languages. Its very rudimentary, but your question lacks any specifics to give you any more complex.

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

I don't think it's necessary to do the mapping, nor use observables for each label.

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

In the html code you just need to call the observable and the label name:

<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

There is amazing i18next-ko project, which uses i18next under the hood.

Define you translations:

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

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

Initialize i18next-ko:

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

Switch languages at will:

i18nextko.setLanguage('de');

And bind:

data-bind="i18n: 'testTranslation'"

Or:

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