Как обращаться с локализацией в knockout.js?

Как вы обрабатываете локализацию с помощью knockout.js?

Кажется, что knockback.js имеет приятные утилиты для обработки локализации, и мне интересно, есть ли какие-либо сторонние библиотеки, которые можно использовать с knockout.js для обработки локализации без фактического перехода на knocback.js чтобы получить эти функции (поскольку мне действительно не нужны мостовые модели или маршрутизация для этого простого приложения). То, что было просто использовать как плагин Mapping, было бы идеальным.

Спасибо!!

Ответ 1

Вот простая скрипка, демонстрирующая переключение нокаутов между двумя языками. Его очень рудиментарно, но на ваш вопрос не хватает каких-либо специфических особенностей, чтобы дать вам более сложную задачу.

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

Ответ 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/

Ответ 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 } }"