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

Question

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.

Answer 1

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).