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

我相信我误解了淘汰赛绑定的工作原理，或者我的方法完全取决于我正在尝试做的事情。

Answer 1

结帐demo

您必须保留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＆amp;回调函数中直接使用此关键字。间隔。请改用“自我”。结帐this problem part

尝试使用knockoutjs从JSON自动刷新

1 个答案: