foreach绑定

目的

foreach可以将一个数组中的实体循环的进行绑定。这在将一个list显示成table时非常有用。

假设数组是observable的，当在绑定后做了add, remove,或者重新排序后，绑定会找到相应的元素做新增、删除或者排序，而不会影响其他不相关的DOM元素。这比重新生成整个foreach的输出要高效的多。

当然，你也可以任意的使用其他控制语句如if和with来嵌套foreach绑定。

例1：遍历数组

示例使用foreach循环一个数组实体展示成一个只读的table

<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
    ko.applyBindings({
        people: [
            { firstName: ‘Bert‘, lastName: ‘Bertington‘ },
            { firstName: ‘Charles‘, lastName: ‘Charlesforth‘ },
            { firstName: ‘Denise‘, lastName: ‘Dentiste‘ }
        ]
    });
</script>

例2：使用新增、删除功能

如果数组是observable的，界面会和数组保持同步的。

运行效果：http://knockoutjs.com/documentation/foreach-binding.html  Example 2:Live example with add/remove

<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>

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());

参数

传递你想遍历的数组，绑定会循环每一个实体进行输出。

另外，也可以传递一个叫做data的属性的名称，只要它是一个要遍历的数组。这个对象还可能有其他属性，如afterAdd或includeDestroyed -- 参见下面的说明及例子。

如果传递的数组是observable的，通过foreach绑定的元素会在数组改变后做相应的更新。

注1：使用$data指向数组每一项

像上面的例子中说明的那样，使用foreach绑定可以指向一个数组项的每一个属性。如上面的”例1“指向的是firstName和lastName属性。

如果你不想引用属性，而是要使用数组本身，要怎么办？你可以使用特殊的上下文属性$data。在foreach中，它的意思是”当前项“。例如：

<ul data-bind="foreach: months">
    <li>
        The current item is: <b data-bind="text: $data"></b>
    </li>
</ul>

<script type="text/javascript">
    ko.applyBindings({
        months: [ ‘Jan‘, ‘Feb‘, ‘Mar‘, ‘etc‘ ]
    });
</script>

如果你原因，也可以使用$data做为属性的前缀，如例1可以这样写：

<td data-bind="text: $data.firstName"></td>

但这不是必须的，因为firstName会默认使用$data的。

注2：使用$index, $parent,和其他上下文属性

和你在例2中看到的一样，也可以使用$index，它表示一个从0开始的当前数组索引。$index是observable的，并且当item的index改变时会做更新（如：做了新增、删除项）。

相似的，也可以使用$parent来指向foreach引用数组所在的上一级对象，例如：

<h1 data-bind="text: blogPostTitle"></h1>
<ul data-bind="foreach: likes">
    <li>
        <b data-bind="text: name"></b> likes the blog post <b data-bind="text: $parent.blogPostTitle"></b>
    </li>
</ul>

更多信息请参见binding context properties.

注3：使用“as”给foreach项别名

如注1中，可以使用$data来遍历数组。在某些情况下，给当前项一个别名是非常有用的，如：

<ul data-bind="foreach: { data: people, as: ‘person‘ }"></ul>

现在，在foreach内，都可以使用person来访问当前数组项，它就是people数组。这在使用嵌套的foreach时非常有用，如：

<ul data-bind="foreach: { data: categories, as: ‘category‘ }">
    <li>
        <ul data-bind="foreach: { data: items, as: ‘item‘ }">
            <li>
                <span data-bind="text: category.name"></span>:
                <span data-bind="text: item"></span>
            </li>
        </ul>
    </li>
</ul>

<script>
    var viewModel = {
        categories: ko.observableArray([
            { name: ‘Fruit‘, items: [ ‘Apple‘, ‘Orange‘, ‘Banana‘ ] },
            { name: ‘Vegetables‘, items: [ ‘Celery‘, ‘Corn‘, ‘Spinach‘ ] }
        ])
    };
    ko.applyBindings(viewModel);
</script>

提示：as后面传递的是一个字符串类型，因为你是要重命名一个变量。