¿Cómo manejar la localización en knockout.js?

Question

¿Cómo manejas la localización usando knockout.js?

Parece que knockback.js tiene unas utilidades atractivas para manejar la localización, y me pregunto si hay bibliotecas de terceros que se puedan usar con knockout.js para manejar la localización sin tener que cambiar realmente a knocback. js para obtener esas características (ya que realmente no necesito los modelos de red troncal ni el enrutamiento para esta sencilla aplicación). Algo tan simple de usar como el plugin Mapeo sería ideal.

Gracias!

Answer 1

Aquí hay un simple fiddle demostrando que Knockout cambia entre dos idiomas. Es muy rudimentario, pero su pregunta carece de detalles que le proporcionen algo más complejo.

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

creo que no es necesario hacer el mapeo, ni el uso de observables para cada etiqueta.

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

En el código HTML sólo tiene que llamar a la observable y el nombre de etiqueta:

<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

No es sorprendente i18next-ko proyecto, que utiliza i18next bajo el capó.

definirías traducciones:

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

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

Inicializar i18next-ko:

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

idiomas de conmutación a voluntad:

i18nextko.setLanguage('de'); 

y se unen:

data-bind="i18n: 'testTranslation'" 

O:

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