foreach: <binding-array>
优质
小牛编辑
130浏览
2023-12-01
在此绑定中，每个数组项都在循环中的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>