更改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結合

回答

相關問題