Изменение привязки 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

Вот простой пример, но вы, возможно, захотите использовать что-то вроде i18next как ваше приложение получает больше сложный.

Fiddle: 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

Я захватил «это» с помощью вара самостоятельно = это; в начале viewmodel, чтобы убедиться, что мы ссылаемся на текстовый текст, наблюдаемый при вызове кода подписи (он не будет работать иначе, поскольку «это» не будет viewmodel).

Для целей demo, я создал массив языков (только два), и мы привязываем это к выберите раскрывающийся список, чтобы разрешить выбор языка; значение привязывается к видимому языку viewmodel, который затем запускает код в функции подписки для переключения языка.

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> 

Fiddle: http://jsfiddle.net/jiggle/dZ9Em/

Answer 2

Я не думаю, что вы можете снова применить Bindings. Вы можете использовать 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 
    } 
} 

Есть много способов, вы можете добавить событие в связывании для изменения LANGAUGE.

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

Использование Нокаут вы можете хранить ваши языки объекты в observableArray и использовать вычисленный для переключения между ними.

Вот простой пример:

Fiddle: 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()]; 
    }); 
};