KnockoutJS - 选项绑定

此绑定用于定义 select 元素的选项。这可用于下拉列表或多选列表。此绑定不能与 <select> 元素以外的任何其他元素一起使用。

语法

options: <binding-array>

参数

此处传递的参数是一个数组。对于数组中的每个条目，都会为相应的 select 节点添加选项。之前的选项将被删除。
如果参数是一个可观察值，则当底层可观察值发生更改时，元素的可用选项将随之更新。如果未使用可观察对象，则元素只处理一次。
附加参数
- optionsCaption − 这只是一个默认的虚拟值，显示为“从下面选择项目”或“从下面选择”。
- optionsText − 此参数允许您指定要设置为下拉列表中文本的对象属性。此参数还可以包含一个函数，该函数返回要使用的属性。
- optionsValue − 与 optionsText 类似。此参数允许指定可用于设置选项元素 value 属性的对象属性。
- optionsIncludeDestroyed − 如果您想查看标记为已销毁但实际上未从可观察数组中删除的数组项，请指定此参数。
- optionsAfterRender − 用于对现有选项元素运行一些自定义逻辑。
- selectedOptions − 用于从多选列表读取和写入选定的选项。
- valueAllowUnset − 使用此参数，可以将模型属性设置为 select 元素中实际上不存在的值。这样，当用户第一次查看下拉列表时，可以将默认选项保留为空白。

示例

让我们来看下面的示例，该示例演示了选项绑定的用法。

在线演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Options Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <p>Tutorials Library:
      <select data-bind = "
         options: availableTutorials,
         value: selectedTutorial,
         optionsCaption: 'Choose tutuorial...',
      "></select></p>
      
      <p>You have selected <b><span 
         data-bind = "text:selectedTutorial"></span></b></p>

      <script type = "text/javascript">
         function ViewModel() {
            this.selectedTutorial = ko.observable();
         
            this.availableTutorials = ko.observableArray ([
               'Academic','Big Data',
               'Databases','Java Technologies',
               'Mainframe','Management',
               'Microsoft Technologies','Mobile Development',
               'Programming','Software Quality'
            ]);
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来了解上述代码的工作原理：

将上述代码保存到 options-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
请注意，值绑定用于读取下拉列表中当前选择的项目。

观察结果

设置/更改选项时保留选择

在选项绑定更新<select>元素中的选项集时，KO 会尽可能保留用户的选择。对于下拉列表中的单选，先前选择的值仍将保留。对于多选列表，所有先前选择的选项都将保留。

生成的选项的后处理

可以使用optionsAfterRender回调对生成的选项进行后处理以进行一些进一步的自定义逻辑。此函数在将每个元素插入列表后执行，并具有以下参数：

插入的选项元素。
与其绑定的数据项；对于标题元素，这将未定义。

示例

让我们来看下面的示例，该示例使用 optionsAfterRender 为每个选项添加禁用绑定。

在线演示

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Options Binding - using optionsAfterRender </title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <select size = 3 data-bind = "
         options: myItems,
         optionsText: 'name',
         optionsValue: 'id',
         optionsAfterRender: setOptionDisable">
      </select>

      <script type = "text/javascript">
         function ViewModel() {
            myItems = [
               { name: 'First Class', id: 1, disable: ko.observable(false)},
               { name: 'Executive Class', id: 2, disable: ko.observable(true)},
               { name: 'Second Class', id: 3, disable: ko.observable(false)}
            ];
            
            setOptionDisable = function(option, item) {
               ko.applyBindingsToNode(option, {disable: item.disable}, item);
            }
         };
      
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来了解上述代码的工作原理：

将上述代码保存到 options-bind-optionsafterrender.htm 文件中。
在浏览器中打开此 HTML 文件。
使用 optionsAfterRender 回调禁用 ID 为 2 的选项。

knockoutjs_declarative_bindings.htm

打印页面