当Ajax请求定期自动刷新时如何使用knockout.js数据绑定？

Question

在我的应用程序中，我每隔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调用后我会收到错误消息： 您不能多次将绑定应用于同一元素。

- rjc

Answer 1

你离正确就差一步。你只需要调用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）（或类似的内容）。

- Justin Helgerson