入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

高级应用

插件

更多信息

"selectedOptions" 绑定

目的

selectedOptions 绑定用于控制multi-select列表已经被选择的元素，用在使用 options 绑定的 元素上。

The selectedOptions binding controls which elements in a multi-select list are currently selected. This is intended to be used in conjunction with a element and the options binding.

当用户在multi-select列表选择或反选一个项的时候，会将view model的数组进行相应的添加或者删除。同样，如果view model上的这个数组是observable数组的话，你添加或者删除任何item（通过 push 或者 splice）的时候，相应的UI界面里的option项也会被选择上或者反选。这种方式是2-way绑定。

When the user selects or de-selects an item in the multi-select list, this adds or removes the corresponding value to an array on your view model. Likewise, assuming it’s an observable array on your view model, then whenever you add or remove (e.g., via push or splice) items to this array, the corresponding items in the UI become selected or deselected. It’s a 2-way binding.

注：控制single-select下拉菜单选择项，你可以使用 value 绑定 。

Note: To control which element in a single-select drop-down list is selected, you can use the value binding instead.

例子

  1. <p>
  2.     Choose some countries you'd like to visit: 
  3.     <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true"></select>
  4. </p>
  6. <script type="text/javascript">
  7.     var viewModel = {
  8.         availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),
  9.         chosenCountries : ko.observableArray(['Germany']) // Initially, only Germany is selected
  10.     };
  12.     // ... then later ...
  13.     viewModel.chosenCountries.push('France'); // Now France is selected too
  14. </script>

参数

  • 主参数

该参数是数组（或observable数组）。KO设置元素的已选项为和数组里match的项，之前的已选择项将被覆盖。

This should be an array (or an observable array). KO sets the element’s selected options to match the contents of the array. Any previous selection state will be overwritten.

如果参数是依赖监控属性observable数组，那元素的已选择项selected options项将根据参数值的变化（通过 push，pop 或或其它observable数组方法）而更新，如果不是，那元素的已选择项selected options将只设置一次并且以后不在更新。

If your parameter is an observable array, the binding will update the element’s selection whenever the array changes (e.g., via push, pop or other observable array methods). If the parameter isn’t observable, it will only set the element’s selection state once and will not update it again later.

不管该参数是不是observable数组，用户在multi-select列表里选择或者反选的时候，KO都会探测到，并且更新数组里的对象以达到同步的结果。这样你就可以获取options已选项。

Whether or not the parameter is an observable array, KO will detect when the user selects or deselects an item in the multi-select list, and will update the array to match. This is how you can read which of the options is selected.

  • 其它参数

无

注：支持让用户选择任意JavaScript对象

在上面的例子里，用户可以选择数组里的字符串值，但是选择不限于字符串，如果你愿意你可以声明包含任意JavaScript对象的数组，查看 options绑定如何显示JavaScript对象到列表里。

In the example code above, the user can choose from an array of string values. You’re not limited to providing strings - your options array can contain arbitrary JavaScript objects if you wish. See the options binding for details on how to control how arbitrary objects should be displayed in the list.

这种场景，你可以用 selectedOptions 来读取或设置这些对象本身，而不是页面上显示的option表示形式，这样做在大部分情况下都非常清晰。view model就可以探测到你从数组对象里选择的项了，而不必关注每个项和页面上展示的option项是如何map的。

In this scenario, the values you can read and write using selectedOptions are those objects themselves, not their textual representations. This leads to much cleaner and more elegant code in most cases. Your view model can imagine that the user chooses from an array of arbitrary objects, without having to care how those objects are mapped to an on-screen representation.

依赖性

除KO核心类库外，无依赖。

(c) knockoutjs.com