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' }">

示例

让我们来看另一个示例，使用可观察数组填充列表详细信息。

在线演示

<!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 提供的 destroy 数组函数销毁数组项（当前隐藏，稍后删除）。这些项不会显示在 foreach 中，并且会自动隐藏。要查看这些隐藏的项，KO 提供了一种名为 includeDestroyed 的方法。如果将此参数设置为布尔值 true，则会显示隐藏的项。

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

knockoutjs_declarative_bindings.htm

打印页面