2017-04-23 5 views
0

전자 메일 주소를 입력 할 때 사용자는 미리 정의 된 목록 (예 : 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(); 
    } 

I 출력 아래 얻을 : 옵션 successfuly 렌더링하지만 그들은 표시되지 않더라도, 그것은 당신의 select 요소처럼 보인다 output

답변

1

availableEmailDomains에 바인딩되어 있지만 viewmodel에 정의 된 객체가 표시되지 않습니다. 따라서 사용자가 t emailDeliveryDomains. 이 경우, 당신은 다음에 선택 요소를 변경할 수 있습니다

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

난 당신이 (당신이 knockout documentation 읽을 수 있음) value, optionsTextoptionsValue 바인딩의 작동 방식을 오해 할 수있다 생각합니다. value은 드롭 다운에서 선택한 값을 저장할 관찰 가능해야합니다. optionsTextoptionsValueoptions 바인딩에 전달 된 배열이 객체 배열 일 때 사용됩니다. 예를 들어 [{ color: 'blue', id: 1 }, { color: 'red', id: 2}]과 같은 배열을 options 바인딩에 전달한 경우 optionsText: 'color'optionsValue: 'id'도 설정하는 것이 좋습니다.

예에서 emailDeliveryDomains은 문자열 배열이므로 optionsValue 또는 optionsText을 설정할 필요가 없습니다.

관련 문제