更改 Knockout.js 绑定

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

使用敲除，您可以将语言对象存储在 observableArray 中，并使用计算在它们之间切换。

这是一个简单的例子：

小提琴：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);

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

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

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

我在视图模型的开头使用 var self=this; 捕获了“this”，以确保我们在调用订阅代码时引用了语言文本 observables（否则它不会像 'this'不会是视图模型）。

出于演示的目的，我创建了一个语言数组（只有两种），我们将其绑定到选择下拉菜单以允许选择语言；该值绑定到 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
}