Question

我正在使用Knockout.js来允许用户选择我的webapp应该显示的语言。

我基本上都是这样的语言：

function AppViewModelNorwegian() {
this.Username = "Brukernavn";
this.Password = "Passord";
this.Rememberpassword = "Husk passord";
}
function AppViewModelEnglish() {
this.Username = "Username";
this.Password = "Password";
this.Rememberpassword = "Remember password";
}

然后我应用这样的语言：

ko.applyBindings(new AppViewModelNorwegian());

它适用于第一种语言选择，但如何允许更改语言？

再次使用ko.applyBindings不起作用，因为我不允许多次将绑定应用于同一个元素。

ko.applyBindings(new AppViewModelEnglish()); //Does not work

如何更改绑定以更改语言？

Answer 1

使用knockout，您可以将您的语言对象存储在observableArray中，并使用computed来在它们之间切换。

这是一个简单的例子：

小提琴：http://jsfiddle.net/RapTorS/xWVw2/

var vm = function (languages) {
    var self = this;
    self.index = ko.observable(0);
    self.languages = ko.observableArray(languages);
    self.resources = ko.computed(function () {
        return self.languages()[self.index()];
    });
};

Answer 2

这是一个简单的示例，但您可能希望使用类似i18next的内容，因为您的应用变得更加复杂。

小提琴：http://jsfiddle.net/jiggle/dZ9Em/

function AppViewModel() {
    var self = this;
    self.Username = ko.observable("Username");
    self.Password = ko.observable("Password");
    self.Rememberpassword = ko.observable("Remember Password");
    self.Language =ko.observable("english");
    self.Language.subscribe(function(lang){

          if (lang=="norwegian"){
               self.Username("Brukernavn");
               self.Password("Passord");
               self.Rememberpassword("Husk passord");
          };

          if (lang=="english"){
               self.Username("Username");
               self.Password("Password");
               self.Rememberpassword("Remember Password");

          };
    });
    self.Languagelist=['english','norwegian'];
    return self;
}

var vm = new AppViewModel();
ko.applyBindings(vm);

代码将您的语言文本设置为knockout observables，以及当前语言，然后我们订阅语言observable，这样当它更新时（用户选择不同的语言），我们检查新值是什么（ lang）然后将observable设置为正确的单词。

有关对可观察对象和可观察对象的描述的更多信息，请查看淘汰文档，其中有很好的示例：

http://knockoutjs.com/documentation/observables.html

我使用var self = this捕获了'this';在viewmodel的开头，以确保在调用描述代码时我们有一个对语言文本observable的引用（否则它将不起作为'this'不会是viewmodel）。

出于演示的目的，我创建了一个语言数组（只有两个），我们将其绑定到选择下拉列表以允许语言选择;该值绑定到viewmodel的Language observable，然后触发subscribe函数中的代码来切换语言。

HTML：

<select data-bind="options: Languagelist,value:Language"></select>


<div>
    <div data-bind="text:Username"></div>
    <div data-bind="text:Password"></div>
    <div data-bind="text:Rememberpassword"></div>
</div>

小提琴：http://jsfiddle.net/jiggle/dZ9Em/

Answer 3

我认为你不能再次申请绑定。您可以像这样使用viewModel，

function AppViewModel() {
    this.Username = "Username";
    this.Password = "Password";
    this.Rememberpassword = "Remember password";
    this.Language ="English";
    this.ChangeLanguage = function(languge){
         //you can add here, what you want to do after langauge change
    }
}

有很多方法，你可以在绑定中添加一个事件来改变语言。

Answer 4

您应该考虑制作一个主模型函数来决定按哪一个并基于：

function MainViewModel() {
    var self = this;
    // Check which language is selected and then create an instance of that model such as
    self.language = ko.observable(new AppViewModelNorwegian());
    // OR
    self.language = ko.observable(new AppViewModelEnglish());
}

ko.applyBindings(new MainViewModel());

使所有变量ko.observable（）在它们自动更改时使它们更新。此外，您应该考虑正确设置命名空间，并确保“this”保持与正确的对象相连：

function AppViewModelNorwegian() {
    var self = this;
    self.Username = // ..... etc
}

更改Knockout.js绑定

4 个答案: