jquery - knockoutjs で JSON から自動更新しようとしている

Question

AJAX JSON リクエストを使用して、ページに表示されるデータをサーバーからの最新の値で自動的に更新しようとしています。

ここに私のJavaScriptがあります：

function ExampleViewModel() {
    var self = this;
    self.ExampleData = ko.observableArray([]);

    $.getJSON("/JSONExample", function (allData) {
        var mappeddata = $.map(allData, function (item){
            return new DataItem(item)
        });
        self.ExampleData(mappeddata);
    })

    window.setTimeout(ExampleViewModel, 5000);
}

function DataItem(data) {
    //console.log(data);
    this.Name = ko.observable(data.Name);
    this.Price = ko.observable(data.Price);
}

ko.applyBindings(new ExampleViewModel());

そして、ここに私のHTMLがあります:

<div id="knockout">
    <table>
        <thead>
            <tr>
                <th>Name</th><th>Price</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: ExampleData">
            <tr>
                <td data-bind="text: Name"></td>
                <td data-bind="text: Price"></td>
            </tr>    
        </tbody>
    </table>
</div>

JSON を正しくプルしており、最初の繰り返しで正しく表示されます。出力は次のようになります。

Name        Price
Item1       $150.00
Item2       $20.00
Item3       $99.99

その後の反復で、JSON をプルし、サーバー上のデータを変更すると (たとえば、Item1 の価格を $200.00 に変更した場合)、JSON で更新されたデータを取得します。ただし、UI は更新されません。ページ全体を更新するまで、初期データが表示されるだけです。

ノックアウトバインディングがどのように機能するかについて誤解していると思います。そうでなければ、私のアプローチは私がやろうとしていることに対して完全にずれています。