KnockoutJS 3.X 教程：foreach绑定详解

"本文主要探讨了KnockoutJS 3.X API中的数据控制流绑定，特别是`foreach`绑定，它是用来动态地在DOM中循环显示数组数据的关键特性。通过使用`foreach`，开发者可以在UI上实时反映出数组内容的变化，包括添加、删除和重新排序等操作。文中还给出了两个示例，一个是遍历并显示监控属性数组，另一个是展示如何在用户界面上添加和删除项目。" 在KnockoutJS中，`foreach`绑定是用于处理数组数据的强大工具。它允许你在HTML元素内部迭代一个数组，并为每个数组项创建一个新的子元素。当数组内容发生变化时，`foreach`绑定会自动更新UI，无需手动操作DOM。 **示例1** 展示了如何遍历并显示数组内容。在这个例子中，我们有一个名为`people`的监控属性数组，包含多个对象，每个对象有两个属性：`firstName`和`lastName`。`foreach`绑定被应用到`tbody`元素上，对于数组中的每一项，它都会创建一个新的`tr`元素，并在`td`元素中分别显示`firstName`和`lastName`的值。 ```html <table> <thead> <tr><th>Firstname</th><th>Lastname</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody> </table> ``` **示例2** 进一步扩展了`foreach`的用法，展示了如何在用户界面上添加和删除项目。在这个例子中，每个列表项不仅显示了姓名，还包括了一个关联的索引和一个“Remove”链接。当用户点击“Remove”链接时，调用`$parent.removePerson`方法移除对应的数组项。同时，有一个“Add”按钮用于向数组中添加新项目。 ```html <h4>People</h4> <ul data-bind="foreach: people"> <li> Name at position <span data-bind="text: $index"></span>: <span data-bind="text: name"></span> <a href="#" data-bind="click: $parent.removePerson">Remove</a> </li> </ul> <button data-bind="click: addPerson">Add</button> ``` 这个示例中，`$index`绑定用于显示数组项的索引，`$parent`引用了外层的数据上下文，使得我们可以调用`removePerson`方法来删除当前项。`addPerson`方法则用于向`people`数组添加新的对象。 `foreach`绑定还可以与其他控制流绑定如`if`和`with`结合使用，提供更复杂的逻辑控制。`if`绑定用于条件性地显示或隐藏元素，而`with`绑定则用于根据给定的观察者值改变其内部元素的上下文。 `foreach`绑定是KnockoutJS中实现数据绑定循环迭代的重要方式，它极大地简化了与数组相关的UI更新，使得动态数据呈现变得更加简单和高效。