14

knockout.jsを使用してローカリゼーションをどのように処理しますか？

knockback.jsにはローカリゼーションを処理するための見栄えの良いユーティリティがあるようですが、実際にknocback.jsに切り替えてローカリゼーションを処理することなく、knockout.jsで使用できるサードパーティのライブラリがあるかどうか疑問に思っています。機能（この単純なアプリのバックボーンモデルやルーティングは実際には必要ないため）。マッピングプラグインと同じくらい簡単に使用できるものが理想的です。

ありがとう！！

4

3 に答える 3

12

これは、2つの言語間のノックアウト切り替えを示す簡単なフィドルです。それは非常に初歩的なものですが、あなたの質問には、より複雑なものを与えるための詳細が欠けています。

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();
};
于 2012-07-11T19:55:20.717 に答える
6

マッピングを行う必要はないと思います。また、ラベルごとにオブザーバブルを使用する必要もありません。

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/

于 2013-09-24T10:48:08.790 に答える
3

内部でi18nextを使用する素晴らしいi18next-koプロジェクトがあります。

翻訳を定義します。

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 } }"
于 2017-04-13T18:02:23.040 に答える