如何在knockout.js中处理本地化?

Bob*_*ith 13 javascript knockout.js single-page-application

你如何使用knockout.js处理本地化?

似乎knockback.js有一个很好看的实用程序来处理本地化,我想知道是否有任何第三方库可以与knockout.js一起使用来处理本地化而无需实际切换到knocback.js来获取这些功能(因为我真的不需要骨干模型或路由这个简单的应用程序).像Mapping插件一样简单易用的东西是理想的.

谢谢!!

Kye*_*ica 12

这是一个简单的小提琴演示两种语言之间的Knockout切换.它非常简陋,但你的问题没有任何细节可以让你更复杂.

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>?
Run Code Online (Sandbox Code Playgroud)

的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();
};
Run Code Online (Sandbox Code Playgroud)

  • 没有必要使语言的每个属性都是可观察的!如果您有许多标签,它将减慢页面速度.我编辑了你的好小提琴:http://jsfiddle.net/runjep/KRS2A/63/ (6认同)

Run*_*sen 5

我不认为有必要进行映射,也不要为每个标签使用observable.

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());
Run Code Online (Sandbox Code Playgroud)

在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> 
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/runjep/3Lqsx/2094/