Нокаут: как условно отображать и сохранять значение, зависящее от выпадающего списка?

Question

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

Вот мои бизнес-правила:

Initialize:

• Загрузить список контактов. Каждый контакт имеет идентификатор, имя, адрес электронной почты и телефон.
• Загрузите выбранный в настоящий момент контактный идентификатор. В меню контакта выберите соответствующий контакт.
• Загрузите начальное значение электронной почты - это может отличаться от адреса электронной почты выбранного контакта, поскольку оно, возможно, было переопределено и сохранено.
• Загрузите исходное значение телефона - это может отличаться от телефона выбранного контакта, поскольку он, возможно, был переопределен и сохранен.

процесса:

• Разрешить пользователю изменить адрес электронной почты или телефон в данный момент выбранного контакта. Это не изменяет базовую электронную почту или телефон на контактном объекте; вместо этого это значение переопределения.
• Если пользователь выбирает другой контакт из меню, отобразите его адрес электронной почты и телефон, заменив предыдущие значения. Предыдущее правило по-прежнему применяется: пользователь может затем переопределить значение электронной почты или телефона вновь выбранного контакта, и это значение переопределения должно придерживаться, если пользователь не выбирает другой контакт из меню.

Упорство:

• При сохранении отправки выбранного в настоящий момент идентификатор контакта, текущее значение электронной почты, а также текущее значение контакта.

Вот немного моего кода:

Вид модели:

function ContactViewModel(initialData) { 
    var self = this; 

    // not sure I need Contacts to be an observable; I think I can use a plain array 
    self.Contacts   = ko.observableArray([]); 
    self.SelectedContactId = ko.observable(null); 

    self.ContactEmail  = ko.observable(null); 
    self.ContactPhone  = ko.observable(null); 

    // ... 

    self.init() { 
     // load the contacts list 
     ko.utils.arrayForEach(initialData.Contacts, function(item) { 
      self.Contacts.push({ item.Id, item.Name, item.Email, item.Phone }); 
     }); 

     // load the selected contact, email and phone 
     if (initialData.ContactInfo != null) { 
      self.SelectedContactId(initialData.ContactInfo.Id); 

      if (initialData.ContactInfo.Email != null 
       && initialData.ContactInfo.Email.length > 0) { 
       self.ContactEmail(initialData.ContactInfo.Email); 
      } 

      if (initialData.ContactInfo.Phone != null 
       && initialData.ContactInfo.Phone.length > 0) { 
       self.ContactPhone(initialData.ContactInfo.Phone); 
      } 
     } 
    } 

    self.init(); // initialize! 
} 

Markup:

<select id="homeowner" data-bind=" 
    options:  Contacts, 
    optionsText: 'Name', 
    optionsValue: 'Id', 
    optionsCaption: '-- Select a Contact --', 
    value:   SelectedContactId 
"> 
</select> 

<input id="email" type="text" data-bind="value: ContactEmail" /> 
<input id="phone" type="text" data-bind="value: ContactPhone" /> 

Похоже, мне нужно вычислить наблюдаемое или два на ContactEmail и ContactPhone, которые проверяют, изменился ли номер SelectedContactId, и если он есть, загрузить электронную почту и телефон из вновь выбранного контакта. Но я собирался по кругу, пытаясь получить SelectedHomeownerId, чтобы сохранить предыдущий выбранный идентификатор и попытаться получить ContactEmail, чтобы проверить, отличается ли текущий идентификатор контакта, чем предыдущий Идентификатор, а затем отобразить электронную почту текущего контакта. Как выглядят эти функции?

Answer 1

Подписаться на изменение свойств и обновления SelectedContactId, как вы хотите:

self.SelectedContactId.subscribe(function (contactId){ 
    // find contact in your lookup: 
    // then: 
    self.ContactEmail('new value'); 
    self.ContactPhone('new value'); 
});