1

我正在尝试使用 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 不会刷新 - 它只会显示初始数据，直到我刷新整个页面。

我相信我对淘汰赛绑定的工作方式有误解，否则我的方法完全不适合我正在尝试做的事情。

4

1 回答 1

4

结帐演示

您必须保留 ExampleViewModel 的实例并将该实例用于所有内容。

function getRandomData() {
    return [{
        "Name": "Apple",
        "Price": (Math.random()*10)+1},
    {
        "Name": "Orange",
        "Price":(Math.random()*10)+1},
    {
        "Name": "Banana",
        "Price": (Math.random()*10)+1},
    {
        "Name": "Melon",
        "Price": (Math.random()*10)+1}];
}

function ExampleViewModel() {
    var self = this;
    self.ExampleData = ko.observableArray([]);    
    self.update = function() {
          $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON(getRandomData())
            },
            type: "POST",
            dataType: 'json',
            success: function(allData) {        
                var mappeddata = $.map(allData, function (item){
                    return new DataItem(item)
                });
                self.ExampleData(mappeddata);
            }
        }); 
    }  
}

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

var exampleViewModel = new ExampleViewModel();
window.setInterval(exampleViewModel.update,1000);
ko.applyBindings(exampleViewModel);

还要注意在 setTimeout & Interval 的回调函数中直接使用这个关键字。改用“自我”。签出这个问题部分

于 2013-04-10T16:22:22.277 回答