当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调用后得到错误:你不能多次将绑定应用于同一个元素.

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)(或类似的东西).