KnockoutJS - Foreach 绑定

在此绑定中，每个数组项都在 HTML 标记中循环引用。这在填充列表或表格数据时非常有用。foreach 可以与其他控制流绑定一起嵌套。

语法

foreach: <binding-array>

参数

• 数组名称作为参数传递。 HTML 标记在循环中针对每个项目进行处理。

• JavaScript 对象文字可以作为参数传递，并且可以使用名为 data 的属性进行迭代。

• 如果参数是可观察的，则只要底层可观察对象发生变化，所做的任何修改都会反映在 UI 中。

示例

让我们看一下以下示例，该示例演示了 foreach 绑定的用法。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>List of courses available:</p>
      <div data-bind = "foreach: courseArray ">
         <li data-bind = "text: $data"><span data-bind="text: $index"></span></li>
      </div>

      <script type="text/javascript">
         function AppViewModel() {
            this.courseArray = (['JavaScript','KnockoutJS','BackboneJS','EmberJS']);
            this.courseArray.push('HTML');
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

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

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

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

您可以使用 as 关键字重写上述代码。只需更改绑定行，如以下代码所示。

<div data-bind = "foreach: {data: courseArray, as :'cA' }">

示例

让我们看另一个使用 Observable Array 填充列表详细信息的示例。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS foreach binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>List of product details:</p>
      <ul data-bind = "foreach: productArray ">
         <li>
            <span data-bind = "text: productName"></span>  
            <a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
         </li>
      </ul>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray ([
               {productName: 'Milk'},
               {productName: 'Oil'},
               {productName: 'Shampoo'}
            ]);

            self.removeProduct = function() {
               self.productArray.remove(this);
            }
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

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

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

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

• 单击"删除"链接时，列表中的项目将动态删除。

观察

使用没有容器的 foreach

在某些情况下，可能无法使用容器包括 foreach。在这种情况下，可以使用无容器格式来调用绑定。

<ul>
   <!-- ko foreach: productArray -->
   
   <li>
      <span data-bind="text: productName"></span>
      <a href="#" data-bind="click: $parent.removeProduct">Remove </a>
      <!-- /ko  -->
   </li>
   
</ul>

<!--ko--> 和 <!--/ko--> 用作开始和结束标记，使其成为虚拟语法，并像真实容器一样绑定数据。

处理数组中被销毁的项目

可以使用 KO 提供的 destroy 数组函数销毁数组项目(当前隐藏并在稍后删除)。这些项目不会显示在 foreach 中，并且会自动隐藏。为了查看这些隐藏的项目，KO 提供了一种名为 includeDestroyed 的方法。如果此参数设置为布尔值 true，则会显示隐藏的项目。

<div data-bind = "foreach: {data: courseArray, includeDestroyed: true  }">
   ...
   ...
   ...
</div>

knockoutjs_declarative_bindings.html