KnockoutJS 3.X API 第四章 表单绑定(12) selectedOptions、uniqueName绑定

selectedOptions绑定目的

selectedOptions绑定控制当前选择多选列表中的哪些元素。 这旨在与<select>元素和选项绑定结合使用。

当用户选择或取消选择多选列表中的项目时，这会在视图模型上的数组中添加或删除相应的值。 同样，假设它是您的视图模型上的一个observable数组，那么每当您添加或删除（例如，通过push或splice）项到此数组时，UI中的相应项目将被选中或取消选择。 这是一个双向绑定。

注意：要控制选择单选择下拉列表中的哪个元素，可以改用value绑定。

示例

Choose some countries you'd like to visit:

源码：

<p>
    Choose some countries you'd like to visit:
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
</p>

<script type="text/javascript">
    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),
        chosenCountries : ko.observableArray(['Germany']) // Initially, only Germany is selected
    };

    // ... then later ...
    viewModel.chosenCountries.push('France'); // Now France is selected too
</script>

参数

这应该是一个数组（或一个observable数组）。 KO设置元素的选定选项以匹配数组的内容。 任何先前的选择状态将被覆盖。

如果你的参数是一个observable数组，绑定将更新元素的选择每当数组改变（例如，通过push，pop或其他observable数组方法）。 如果参数不可观察，它将只设置元素的选择状态一次，并且不会在以后再次更新。

无论参数是否是可观察的数组，KO都将检测用户何时选择或取消选择多重选择列表中的项目，并将更新该数组以匹配。 这是您如何读取选择的选项。

备注：让用户从任意JavaScript对象中进行选择

在上面的示例代码中，用户可以从字符串值数组中选择。 如果你愿意 ，你的选项数组可以包含任意的JavaScript对象。 有关如何控制任何对象在列表中的显示方式的详细信息，请参阅options绑定。

在这种情况下，可以使用selectedOptions读取和写入那些对象本身的值，而不是它们的文本表示。  您的视图模型可以想象用户从任意对象的数组中选择，而不必关心这些对象如何映射到屏幕上的。

uniqueName绑定目的

uniqueName绑定确保关联的DOM元素具有非空的名称属性。 如果DOM元素没有name属性，则此绑定将赋予它一个并将其设置为一些唯一的字符串值。

你不需要经常使用这个。 它只在少数情况下有用，例如：

• 其他技术可能取决于某些元素具有名称的假设，即使在使用KO时名称可能不相关。 例如，jQuery Validation目前仅验证具有名称的元素。 要使用Knockout UI，有时需要应用uniqueName绑定以避免混淆jQuery验证。

• 如果他们没有name属性,IE 6不允许检查单选按钮。 大多数时候这是不相关的，因为你的单选按钮元素将具有名称属性，将它们放入互斥组。 但是，为了防止您没有添加名称属性，KO将在这些元素内部使用uniqueName，以确保可以检查。

例如：

<input data-bind="value: someModelProperty, uniqueName: true" />

参数

传递true（或某些值为true）以启用唯一的Name绑定，如前面的示例所示。