KnockoutJS - selectedOptions 绑定

上一个
下一个

该绑定用于处理当前在多列表选择表单控件中选定的元素。该绑定只能与 option 绑定和 <select> 表单控件一起使用。

当用户在多选列表中选择或取消选择一个项目时，这会向视图模型中的数组添加或删除相应的值。如果它是可观察数组，则从 UI 选择或取消选择的项目也会在 ViewModel 中的数组中更新，使其成为双向绑定方法。

语法

selectedOptions: <binding-array>

参数

  • 此处的参数将是一个数组（也可以是可观察数组）。select 元素中的活动项存储在此数组中。以前的项目将被覆盖。

  • 如果参数是可观察数组，那么选定的项目将在基础可观察项发生更改时更新。如果未使用可观察数组，则该元素只处理一次。

示例

让我们看一个示例，演示如何使用 selectedOptions 绑定。

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

   <body>
      <p>Tutorials Library:<br><br>
      <select size = 10 multiple = 'true' data-bind = "
         options: availableTutorials,
         selectedOptions: selectedTutorials
      "></select></p>
         
      <p>(Press control and select for multiple options.)</p>
      <p>You have chosen below Tutorials:</p>
      <ul data-bind = "foreach: selectedTutorials">
         <li>
            <span data-bind = "text: $data"> </span>
         </li>
      </ul>

      <script type = "text/javascript">
         function ViewModel() {
            self = this;
            self.availableTutorials = ko.observableArray ([
               'Academic','Big Data','Databases',
               'Java Technologies','Mainframe',
               'Management','Microsoft Technologies',
               'Mobile Development','Programming','Software Quality'
            ]);

            self.selectedTutorials = ko.observableArray();
         };
         
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤，看看上面的代码如何工作 -

  • 将上述代码保存在 selectedoptions-bind.htm 文件中。

  • 在浏览器中打开此 HTML 文件。

  • selectedTutorials 是一个用于存储所选选项的数组。

knockoutjs_declarative_bindings.htm
打印页面
上一个
下一个
广告