Knockout: Comment afficher et stocker de manière conditionnelle une valeur dépendante d'une liste déroulante?

Question

J'essaye de mettre à jour conditionnellement quelques champs de contact quand je change un contact d'un menu, mais ai du mal à le faire fonctionner. J'ai essayé plusieurs approches, dont aucune ne fonctionne assez bien pour afficher un exemple de code.

Voici mes règles métier:

Initialiser:

• charge une liste de contacts. Chaque contact a un identifiant, un nom, un email et un téléphone.
• Chargez l'ID de contact actuellement sélectionné. Faites le menu de contact sélectionnez le contact correspondant.
• Chargez la valeur initiale de l'e-mail: elle peut être différente de l'adresse e-mail du contact sélectionné, car elle a peut-être été remplacée et enregistrée.
• Chargez la valeur initiale du téléphone - elle peut être différente du téléphone du contact sélectionné, car elle a peut-être été remplacée et enregistrée.

processus:

• Permettre à l'utilisateur de modifier l'e-mail ou par téléphone du contact actuellement sélectionné. Cela ne modifie pas l'e-mail ou le téléphone sous-jacent sur l'objet de contact; à la place, c'est une valeur de remplacement.
• Si l'utilisateur sélectionne un contact différent dans le menu, affichez l'e-mail et le téléphone de cet objet de contact en remplaçant les valeurs précédentes. La règle précédente s'applique toujours: l'utilisateur peut alors remplacer la valeur de l'e-mail ou du téléphone du contact nouvellement sélectionné, et cette valeur de remplacement doit rester à moins que l'utilisateur ne sélectionne un autre contact dans le menu.

persist:

• Lors de l'enregistrement, envoyez l'ID de contact actuellement sélectionné, la valeur actuelle du courrier électronique, et la valeur actuelle des contacts.

est ici un peu de mon code:

Voir modèle:

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" /> 

Il semble que je besoin d'un observable ou deux calculées sur le ContactEmail et ContactPhone qui vérifie si le SelectedContactId a changé, et si c'est le cas, charger l'email et le téléphone du nouveau contact sélectionné. Mais je suis allé en rond en essayant d'obtenir le SelectedHomeownerId pour enregistrer l'identifiant sélectionné précédent, et en essayant d'obtenir le ContactEmail pour vérifier si l'ID de contact actuel est différent de l'ID précédent, puis afficher l'email du contact actuel. A quoi ressembleraient ces fonctions?

Answer 1

Abonnez-vous aux propriétés de changement SelectedContactId et mise à jour que vous souhaitez:

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