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
