HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

KnockoutJS - 选项绑定

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

语法

options: <binding-array>

参数

  • 此处要传递的参数是一个数组。对于数组中的每个条目，将为相应的选择节点添加选项。先前的选项将被删除。

  • 如果参数是可观察值，则元素的可用选项将在底层可观察值发生变化时更新。如果未使用可观察对象，则元素仅被处理一次。

  • 附加参数

    • optionsCaption − 这只是一个默认的虚拟值，读作"从下面选择项目"或"从下面选择"。

    • optionsText − 此参数允许您指定要在下拉列表中设置为文本的对象属性。此参数还可以包含一个函数，该函数返回要使用的属性。

    • optionsValue − 与 optionsText 类似。此参数允许指定可以使用哪个对象属性来设置选项元素的值属性。

    • optionsIncludeDestroyed −如果您想要查看标记为已销毁但实际上并未从可观察数组中删除的数组项，请指定此参数。

    • optionsAfterRender − 使用此参数在现有选项元素上运行一些自定义逻辑。

    • selectedOptions − 这用于从多选列表中读取和写入选定的选项。

    • valueAllowUnset − 使用此参数，可以使用选择元素中实际不存在的值设置模型属性。这样，当用户第一次查看下拉列表时，可以将默认选项保留为空白。

示例

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

<!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 文件。

  • 请注意，值绑定用于从下拉列表中读取当前选定的项目。

观察

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

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

对生成的选项进行后处理

借助 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.html

❮ 上一节 下一节 ❯