foreach

與其他語言中使用的中繼器類似。此繫結將允許你為陣列中的每個項複製一個 html 塊。

<div data-bind="foreach:contacts">
    <div class="contact">
        <h2 data-bind="text:name">
        <p data-bind="text:info">
    </div>
</div>
 
<script type="text/javascript">
    var contactViewModel = function (data) {
        this.name = ko.observable(data.name);
        this.info = ko.observable(data.info);
    };

    ko.applyBindings({
        contacts: [
            new contactViewModel({name:'Erik', info:'Erik@gmail.com'}),
            new contactViewModel({name:'Audrey', info:'Audrey@gmail.com'})
        ]
    });
</script>

請注意，當我們迴圈遍歷上下文時，將成為陣列中的項，在本例中為 contactViewModel 的例項。在 foreach 中我們也可以訪問

• $parent - 建立此繫結的檢視模型
• $root - 根檢視模型（也可以是父模型）
• $data - 陣列索引處的資料
• $index - 渲染項的（可觀察的）從零開始的索引