녹아웃 : 드롭 다운에 따라 값을 조건부로 표시하고 저장하는 방법?

Question

메뉴에서 연락처를 변경할 때 조건부로 몇 개의 연락처 필드를 업데이트하려고하는데 문제가 발생합니다. 몇 가지 접근 방식을 시도했는데 어떤 것도 코드 예제를 보여주기에 충분하지 않습니다.

초기화 : 연락처

• 로드 목록 여기
  내 비즈니스 규칙입니다. 각 연락처에는 ID, 이름, 이메일 및 전화 번호가 있습니다.
• 현재 선택된 연락처 ID를로드하십시오. 연락처 메뉴에서 해당 연락처를 선택하십시오.
• 초기 전자 메일 값로드 - 선택한 연락처의 전자 메일과 다를 수 있습니다.이 전자 메일은 재정의되고 저장되었을 수 있습니다.
• 초기 전화 값로드 - 선택한 연락처의 전화와 다를 수 있습니다. 이는 무시되고 저장되었을 수 있습니다.

프로세스 :

• 사용자가 현재 선택한 연락처의 이메일이나 전화를 변경할 수 있습니다. 이렇게하면 연락처 개체의 기본 전자 메일이나 전화가 변경되지 않습니다. 대신 재정의 값입니다.
• 사용자가 메뉴에서 다른 연락처를 선택하면 해당 연락처 개체의 전자 메일 및 전화를 표시하고 이전 값을 바꾸십시오. 이전 규칙이 계속 적용됩니다. 사용자는 새로 선택한 연락처의 전자 메일 또는 전화 값을 무시할 수 있으며 사용자가 메뉴에서 다른 연락처를 선택하지 않는 한 재정의 값을 유지해야합니다.

은 지속 :

• 절약, 현재 선택된 연락처 ID, 이메일의 현재 값 및 연락처의 현재 값을 보낼 수 있습니다. 여기

내 코드의 비트입니다 :

보기 모델 :

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! 
} 

마크 업 : 나는 계산 관찰 또는 두 개의 필요 같은

<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 및에 SelectedContactId이 변경되었는지 확인하고 업데이트가있는 경우 새로 선택한 연락처에서 전자 메일과 전화를로드하는하지만 나는 이전에 선택한 ID를 저장하고 현재 연락처 ID가 이전 ID와 다른지 확인한 다음 ContactEmail을 얻고 현재 연락처의 전자 메일을 표시하려고 시도하는 서클에갔습니다. 이 함수들은 어떻게 생겼을까요?

Answer 1

당신이 원하는대로 SelectedContactId 변화와 갱신 특성 구독하기 :

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