Question

をレンダリングしていても、ユーザーが事前に定義されたリスト（例えば、gmail.comからのEメール ドメインを選択する必要があります。 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(); 
    } 

私は出力の下に取得する：オプションがsuccessfulyレンダリングされますが、彼らが表示されていない場合でも、それはあなたのselect要素のように見えるoutput

Answer 1

availableEmailDomainsに拘束されていますが、あなたのビューモデルで定義されているそのようなオブジェクトは表示されないので、私はあなたがt emailDeliveryDomains。このような場合は、あなただけの次にselect要素を変更することができます。

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

私はあなたが（あなたがknockout documentation読むことをお勧めします）value、optionsText、およびoptionsValueバインディングがどのように機能するかを誤解することができると思います。 valueは、ドロップダウンから選択した値を保存するために観測可能にする必要があります。 とoptionsValueは、optionsバインディングに渡された配列がオブジェクトの配列である場合に使用されます。たとえば、[{ color: 'blue', id: 1 }, { color: 'red', id: 2}]のような配列をoptionsバインディングに渡した場合は、optionsText: 'color'とoptionsValue: 'id'と設定することも意味があります。

例では、emailDeliveryDomainsは文字列の配列なので、optionsValueまたはoptionsTextを設定する必要はありません。