"foreach" 绑定

foreach 绑定将array中项目绑定到每个重复的节点中，并且将节点的副本绑定到对应的数组项中。在呈现列表或表格的这尤其有用。

假设你的数组是一个 observable array，每当你添加或删除数组条目时，绑定可以自动更新对应的UI元素 - 插入或删除更多的副本，而不会影响到其他的DOM元素。

当然你也是随意嵌套任何流程控制绑定 foreach， if 和 with。

例子1：遍历数组

这个例子使用 foreach 遍历绑定一个只读表格。

Html代码

<table data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
</table>

ko.applyBindings({
        people: [
            { firstName: 'Bert', lastName: 'Bertington' },
            { firstName: 'Charles', lastName: 'Charlesforth' },
            { firstName: 'Denise', lastName: 'Dentiste' }
        ]
    });

例子2：演示Foreach绑定到监控数组

例子1演示的是绑定的静态数组，如果我们使用ko强大的observable array，就可以实现动态双向绑定：

Html代码

<h4>People</h4>
<ul data-bind="foreach: people">
    <li>
        Name: <span data-bind="text: name"> </span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
    </li>
</ul>
<button data-bind="click: addPerson">Add</button>

function AppViewModel() {
    var self = this;
     
    self.people = ko.observableArray([
        { name: 'Bert' },
        { name: 'Charles' },
        { name: 'Denise' }
    ]);
     
    self.addPerson = function() {
        self.people.push({ name: "New at " + new Date() });
    };
     
    self.removePerson = function() {
        self.people.remove(this);
    }
}
 
ko.applyBindings(new AppViewModel());

例子中使用了$parent关键字，这个涉及到“绑定上下文的概念”，将在下一篇中专门介绍。