目录

foreach: <binding-array>

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

语法 (Syntax)

foreach: <binding-array>

参数 (Parameters)

  • 数组名称作为参数传递。 为循环中的每个项处理HTML标记。

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

  • 如果参数是可观察的参数,那么一旦底层的observable发生变化,所做的任何修改都会反映在UI中。

例子 (Example)

让我们看一下下面的例子,它演示了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>

输出 (Output)

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

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

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

新页面打开

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

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

例子 (Example)

让我们看一下使用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>

输出 (Output)

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

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

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

  • 单击“删除链接”时,将动态删除列表中的项目。

新页面打开

观察 (Observations)

利用没有容器的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数组函数destroy数组项(当前隐藏并稍后删除)。 这些项目未在foreach中显示,并自动隐藏。 要查看这些隐藏的项目,KO提供了一个名为includeDestroyed的方法。 如果此参数设置为布尔值true,则显示隐藏项。

<div data-bind = "foreach: {data: courseArray, includeDestroyed: true  }">
   ...
   ...
   ...
</div>
↑回到顶部↑
WIKI教程 @2018