selectedOptions: <binding-array>

优质
小牛编辑
149浏览
2023-12-01

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

当用户选择或取消选择多选列表中的项时,这会将相应的值添加或移除到视图模型上的数组。 如果它是一个Observable数组,那么从UI中选择或取消选择的项目也会在ViewModel的数组中更新,使其成为双向绑定方法。

语法 (Syntax)

selectedOptions: <binding-array>

参数 (Parameters)

  • 这里的参数将是一个数组(也可以是一个Observable)。 select元素中的活动项存储在此数组中。 之前的项目将被覆盖。

  • 如果参数是Observable数组,则选择的项目将在更改基础observable时更新。 如果没有使用Observable数组,则只处理一次元素。

例子 (Example)

让我们看一下下面的示例,该示例演示了selectOptions绑定的用法。

<!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>

输出 (Output)

让我们执行以下步骤来查看上述代码的工作原理 -

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

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

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