knockoutjs数据绑定如何工作

Question

首先看代码 这里是jsfiddle链接 http://jsfiddle.net/crtp0nzg/

HTML

<button id="button" data-bind="click: addRow">click</button>
<div id="dash" data-bind="foreach: rows">
    <div data-bind="text:$data"></div>
</div>

js code

function TableModel() {
    var self = this;
    self.Counter=1;
    self.rows = ko.observableArray([]),
    self.addRow = function() {
        self.rows.push( self.Counter+' '+ new Date() );
        self.Counter++;
        setTimeout(function()
        { 
            self.rows.shift(); 
            self.Counter--;
        }, 3000 + self.rows().length*1000 );
    }
}
ko.applyBindings(new TableModel());

我想知道 knockoutjs数据绑定是如何工作的

当用户第一次点击按钮时，单个元素被推入数组并生成一个div但是当用户第二次单击按钮时，再次将一个元素推入数组，然后生成一个div而不是2.所以我的问题是为什么总是产生一个div？

当我们点击按钮然后一个div渲染，当第二次点击时，然后渲染另一个div。因此，无论何时单击按钮，总是在页面中添加一个div，但假设当数组有5个元素，那么在页面中也会添加一个div。

我知道foreach loop应该尽可能多地迭代数组中元素的数量。但是在knockoutjs中foreach总是迭代一次并在页面中添加或渲染一个div。

如果有人运行我的代码，那么他们可以看到数组有5个元素然后knockoutjs foreach迭代一次，并在页面中添加一个新div。

对我来说，如果knockoutjs foreach的工作如何在页面中添加html元素会让我感到非常困惑。

以下代码如何工作并在页面中添加div不清楚

<div id="dash" data-bind="foreach: rows">
    <div data-bind="text:$data"></div>
</div>

请帮助我理解。感谢