如何在ajax请求周期性自动刷新时使用knockout.js数据绑定

How to use knockout.js data binding when ajax request periodically auto refreshes?

本文关键字：knockout 数据绑定 js 刷新 ajax 请求 周期性      更新时间：2024-06-01

在我的应用程序中，我每隔5秒定期进行一次ajax调用，以从服务器获取新的更新。

我来自服务器的ajax数据是JSON数组，看起来像：[{"foo"："valx"，"bar"："valy"

}，{"foo"："valw"，"bar"："valz"}]

我的ajax代码是：

(function update() {
    $.ajax({
        type : 'GET',
        url : url,
        data : {
        },
        dataType : "json",
        global : false,
        success : function(content, textStatus, jqXHR) {
        myViewModel = content;
        ko.applyBindings(myViewModel);
        },
        complete: function() {
         setTimeout(update, 5000);
          },
        error: function( xhr, textStatus ) {
            }
    });
    })();

我的HTML是：

<tbody data-bind="foreach: myViewModel">
                        <tr>
                            <td data-bind="text: foo"></td>
                            <td data-bind="text: bar"></td>
                        </tr>
                    </tbody>

但这不起作用，我在第一次ajax调用后出现错误：不能对同一元素多次应用绑定。

你很接近。您只调用applyBindings一次。相反，您应该在视图模型上设置observable属性。

以下是如何设置视图模型：

function ViewModel() {
    var self = this;
    self.data = ko.observableArray();
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

然后，当您有新数据时（例如，在ajax呼叫中）：

$.ajax({
    success : function(content, textStatus, jqXHR) {
        viewModel.data(content);
    }
});

注意：您可以通过几种不同的方式设置数据。如果您希望定时事件在视图模型之外，则可以使用视图模型实例（在我的示例中为viewModel）来访问属性并更新它们。如果需要，可以将定时事件放置在视图模型中，然后调用self.data(content)（或类似的东西）。

相关文章：