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

ajax, javascript, jquery, knockout.js

Solution

You're close. You only call `applyBindings` once. Instead what you should be doing is setting an `observable` property on your view model.

Here is how you would setup your view model:

function ViewModel() {
    var self = this;

    self.data = ko.observableArray();
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

Then when you have new data (e.g. in your `ajax` call):

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

Note: You could set the data a few different ways. If you want your timed event outside the view model then you can use the view model instance (in my example, `viewModel`) to access the properties and update them. You could place the timed event within your view model if you want and then just call `self.data(content)` (or something similar).

Problem

In my application I periodically makes ajax call once every 5 seconds to get new update from server. My ajax data from server is JSON array that looks like: [ { "foo": "valx", "bar": "valy" }, { "foo": "valw", "bar": "valz" } ] My ajax code is: ``` (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 ) { } }); })(); ``` My HTML is: ``` <tbody data-bind="foreach: myViewModel"> <tr> <td data-bind="text: foo"></td> <td data-bind="text: bar"></td> </tr> </tbody> ``` But this does not work and I get error after first ajax call: You cannot apply bindings multiple times to the same element.

Original source