Knockout.js 바인딩 변경

Question

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 

언어를 변경하려면 바인딩을 어떻게 변경해야합니까?

Answer 1

다음은 간단한 예입니다,하지만 당신은 아마 앱이 더수록 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'는 뷰 모델이 아니기 때문에 다르게 작동하지 않습니다).

데모, 나는 언어의 배열 (단지 두 가지)을 만들었고 우리는 이것을 드롭 다운을 선택하여 언어 선택을 허용하십시오. 값은 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> 

바이올린 : 당신의 언어를 observableArray에 객체를 저장하고 그들 사이를 전환 할 수 계산 사용 할 수 있습니다 녹아웃 사용 http://jsfiddle.net/jiggle/dZ9Em/

Answer 2

다시 적용 할 수 있다고 생각하지 않습니다. 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 3

당신은 밀려 기반이되는 일을 결정하는 주요 모델의 기능을 고려해야합니다

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 
} 

Answer 4

.

바이올린 : 상세한 답변 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()]; 
    }); 
};