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