Question

输入电子邮件地址时，用户必须选择电子邮件来自预定义列表的域（例如，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();
    }

我得到以下输出：即使选项成功呈现但未显示，output

Answer 1

您的select元素似乎与availableEmailDomains绑定，但我看不到您的视图模型中定义的此类对象，因此我将假设您的意思是{{ 1}}。如果是这种情况，您只需将select元素更改为以下内容：

emailDeliveryDomains

我认为您可能会误解<td><select data-bind="options: $root.emailDeliveryDomains()"></select></td>，value和optionsText绑定的工作原理（您可能希望阅读knockout documentation）。 optionsValue应该是一个可观察的，用于存储下拉列表中的选定值。传递给value绑定的数组是一个对象数组时，使用optionsText和optionsValue。例如，如果您将options之类的数组传递给[{ color: 'blue', id: 1 }, { color: 'red', id: 2}]绑定，那么设置options和optionsText: 'color'也是有意义的。

在您的示例中，optionsValue: 'id'只是一个字符串数组，因此您不需要设置emailDeliveryDomains或optionsValue。

即使渲染，可观察数组也不会在挖空中显示

1 个答案: