Beobachtbares Array wird nicht in Knockout angezeigt, obwohl es gerendert wurde

Question

Bei der Eingabe einer E-Mail-Adresse muss der Benutzer die E-Mail-Domäne aus der vordefinierten Liste auswählen (z. B. gmail.com; outlook.com; hotmail.com).

HTML:

<!-- Mulitple array of emails --> 
<div> 
    <table class="table table-bordered"> 
     <tbody data-bind='foreach: billDeliveryEmails'> 
     <tr> 
      <td><input class='required' data-bind='value: userName' /></td> 
      <td><select data-bind="options: $root.availableEmailDomains(), value: domainName, optionsText: 'domainName', optionsValue: 'domainName'"></select></td> 
      <td><a data-bind="click:'removeDeliveryEmailAddress'">Delete</a></td> 
     </tr> 
     </tbody> 
    </table> 
    <a class="atm-bloque-link" data-bind="click:'addDeliveryEmailAddress'">Agregue otra direccion de email</a> 
</div> 

VM:

billDeliveryEmails : [], 
availableEmailDomains: ko.observableArray(['gmail.com','yahoo.com','hotmail.com','outlook.com','hotmail.es','yahoo.es']) 


addDeliveryEmailAddress: function ($element, data, context, bindingContext, event) { 

     bindingContext.$root.billDeliveryEmails.push({ 
      userName: "", 
      domainName: this.viewModel.get('availableEmailDomains')[0] 
     }); 

     event.preventDefault(); 
    }, 

    removeDeliveryEmailAddress: function ($element, data, context, bindingContext, event) { 

     bindingContext.$root.billDeliveryEmails.splice(0, 1) 
     event.preventDefault(); 
    } 

ich unten Ausgabe: obwohl Optionen successfuly gemacht werden, aber sie werden nicht angezeigt, output

Answer 1

Es ist wie Ihr select Element sieht ist verbindlich an availableEmailDomains, aber ich sehe kein solches Objekt in Ihrem Viewmodel definiert, also gehe ich davon aus, dass Sie meinen t emailDeliveryDomains. Wenn dies der Fall ist, können Sie einfach das Auswahlelement wie folgt ändern:

<td><select data-bind="options: $root.emailDeliveryDomains()"></select></td> 

Ich glaube, du Missverständnis sein kann, wie die value, optionsText und optionsValue Bindungen arbeiten (Sie können die knockout documentation lesen wollen). value sollte eine Observable sein, um den ausgewählten Wert aus dem Dropdown zu speichern. optionsText und optionsValue werden verwendet, wenn das an die options-Bindung übergebene Array ein Array von Objekten ist. Wenn Sie beispielsweise ein Array wie [{ color: 'blue', id: 1 }, { color: 'red', id: 2}] an die options Bindung übergeben haben, wäre es sinnvoll, auch optionsText: 'color' und optionsValue: 'id' zu setzen.

In Ihrem Beispiel ist emailDeliveryDomains nur ein Array von Strings, so dass Sie optionsValue oder optionsText nicht festlegen müssen.