Нокаут с двумя моделями просмотра на одном экране

Question

Я пытаюсь создать форму входа и регистрационную форму на той же странице. Для этого мне нужны две модели. Я создаю их, как показано ниже.

На моей странице у меня есть два отдельных divs с именем «login-form» и «register-form».

Я пытаюсь применить каждую модель представления к соответствующему DIV.

Примечание. Я связываю несколько полей с тем же именем, потому что данные получены из модели MVC.

@Html.TextBoxFor(x => x.EmailAddress, new { @class = "form-control", @placeholder = "Your Email Address", @type = "email", data_bind = "value: EmailAddress" }) 

Эта строка отображается в обоих DIVs, но каждый div имеет отдельную модель представления, назначенную (или так я полагаю).

<script type="text/javascript"> 

    var loginViewModel = function() { 

     var self = this; 

     EmailAddress = ko.observable(""); 
     Password = ko.observable(""); 

     EnableLogin = ko.computed(function() { 
      if (self.EmailAddress() != "" && self.Password() != "") 
       return true; 
      return false; 
     }) 
    } 

    var registerViewModel = function() { 

     var self = this; 

     EmailAddress = ko.observable(""); 
     Password = ko.observable(""); 
     PasswordRetype = ko.observable(""); 
     TimeZoneID = ko.observable(0); 

     EnableRegister = ko.computed(function() { 
      if (
        self.EmailAddress() != "" 
        && self.Password() != "" 
        && self.PasswordRetype() != "" 
        && self.Password() == self.PasswordRetype() 
        && self.TimeZoneID() > 0 
       ) 
       return true; 
      return false; 
     }) 
    } 

    ko.applyBindings(loginViewModel, $("#login-form")); 
    ko.applyBindings(registerViewModel, $("#register-form")); 

</script> 

Однако, когда я обновляю адрес электронной почты в текстовом поле электронной почты Логина-форме, в значении получает назначение в текстовом поле логина-форме, а также. Таким образом, оба элемента управления связаны каким-то образом.

Однако, когда я редактирую адрес электронной почты в регистрационной форме, он не обновляется в форме входа. Таким образом, это похоже на одностороннюю связь.

Является ли это возможным? Как я могу привязать два отдельных div к их правильной модели просмотра?

Answer 1

Второй параметр в ko.applyBindings должен быть фактическим узлом DOM, к которому вы привязываетесь. В настоящее время вы пытаетесь привязать к селектору jQuery, который не будет работать.

Из documentation:

При желании можно передать второй параметр, чтобы определить, какая часть документа, который вы хотите найти атрибуты данных связывания. Например, ko.applyBindings (myViewModel, document.getElementById ('someElementId')). Это ограничивает активацию элемента с идентификатором someElementId и его потомками, что полезно, если вы хотите иметь несколько моделей просмотра и связывать их с другой областью страницы.

Чтобы получить эту работу, либо изменить селектор ванильного JS один, или использовать фактический DOM элемент из селектора JQuery:

ko.applyBindings(loginViewModel, document.getElementById('login-form')); 
ko.applyBindings(registerViewModel, $("#register-form")[0]); 

Answer 2

Вы можете использовать второй параметр ko.applyBindings. второй параметр указывает нокауту, где привязать ваш viewModel. Проверьте это here для получения дополнительной информации.

Первый параметр говорит, что вид модели объект, который вы хотите использовать с декларативные привязок Активизирует

При желании можно передать второй параметр, чтобы определить, какая часть документ, который вы хотите найти атрибуты привязки данных. Например, ko.applyBindings (myViewModel, document.getElementById ('someElementId')). Это ограничивает активацию элемента с идентификатором someElementId и его потомками , что полезно, если вы хотите иметь несколько моделей просмотра и ассоциировать , каждый с другой областью страницы.

Так что в этом случае у вас будет 2 вызова вызова.

Другой способ состоит в том, чтобы содержать оба видаModels для более высокого видаModel. как:

var mainViewModel = function(){ 
    this.loginModel = new loginViewModel(); 
    this.registerModel = new registerViewModel(); 
} 

И тогда вы можете просто использовать with связывания для каждого конкретного divs для доступа loginModel и registerModel.