更改Knockout.js结合

我使用Knockout.js允许用户选择我的web应用程序应该显示的语言。更改Knockout.js结合

我已经基本上做出这样的语言：

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

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

来源

2014-02-19 Publicus

这里有一个简单的例子，但你也许想为您的应用程序变得更加使用类似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），然后将可观测量设置为正确的单词。

有关subcribing于一般观测和观测的详细信息看看一个淘汰赛文档，具有很好的例子：

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

我已经捕捉到了“这个”使用VAR自我=这一点;在视图模型的开始部分，以确保我们在调用描述代码时引用了语言文本观察对象（否则它将不起作用，因为'this'不会成为视图模型）

出于演示，我创建了一个语言数组（只是两个），我们将它绑定到选择下拉菜单以允许语言选择;的值被绑定到视图模型的语言可观察到的，这随后触发在订阅函数的代码切换的语言。

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/

来源

2014-02-19 12:03:40

谢谢你详细的解答！我还注意到，这仅适用于用户当前视图 - 我将如何在整个应用程序中应用KO？ – Publicus

这是一个相当复杂的问题，取决于您的应用程序，它是单页应用程序（例如，使用durandal，angular等）？或传统的.net像网页/形式/ mvc？在这里搜索淘汰赛+ i18next。特别是用户'tne'在这个问题中的重要答案非常好，http://stackoverflow.com/questions/16882171/durandal-knockout-app-with-multilanguage-support。在最基本的层面上，您可以将语言选择存储在Cookie或本地存储和每个页面中，获取该值并为该特定页面创建语言viewModel。我肯定会考虑使用i18next。 –

这是一款使用Kendo UI Mobile的单页应用程序。所以将它应用到当前的DOM就足够了。 – Publicus

我不要再认为你可以applyBindings。你可以像这样使用你的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 
    } 
}

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

来源

2014-02-19 11:34:39

你应该考虑主模型的功能来决定按下其中一个和基于：

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（）使它们时会自动改变它们更新。你也应该考虑确保正确设置你的命名空间“这个”保持连接到正确的对象：

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

来源

2014-02-19 11:38:15 Flexicon

使用淘汰赛，你可以存储你的语言在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()]; 
    }); 
};

来源

2014-02-19 14:41:01

更改Knockout.js结合

回答

相关问题