The binding could not detect changes of observableArray when assign a new array to observableArray in Knockout JS

Question

I have a template binding to an observableArray

<ul data-bind="template: { name: 'defaultTemplate', foreach: itemsArray}"></ul>
...

And i need to refresh data each time by clicking a link

<a data-bind="click: LoadData"><span>Refresh</span></a>

The first version of my viewModel:

function viewModel (){  
    this.itmesArray = ko.observableArray([]);
    self = this;
    this.LoadData(){
        if('undefined' != typeof MusicArray )
            self.itmesArray.removeAll();
        LoadDataFromServerAsync(self.itmesArray);
    }   
    //ini
    LoadData();
    ...
}

But the problem is that the data is loaded from server in async, so when i click the link fast with little time interval, then the data may duplicate multi times in my obeservable array. So i think i need load data to a new array in each refreshing.

Then the second version of viewModel:

function viewModel (){  
    this.itmesArray = ko.observableArray([]);
    self = this;
    this.LoadData(){
            if('undefined' != typeof MusicArray )
                self.itmesArray.removeAll();
            var tempArray = new Array();
            LoadDataFromServerAsync(tempArray);
            self.itmesArray(tempArray);
    }   
    //ini
    LoadData();
    ...
}

And the new problem is that the UI could not sense the changes of array, it seems self.itmesArray(tempArray) will construct a new observableArray object, but the template bindging is still tracking the old observableArray object, I'm not sure about this. So i want to know how to notify the template/ui binding that my array has changed or is there any other workaround to fix my problem?

Added: Code on jsFiddle http://jsfiddle.net/zzcJC/10/

Answer 1

you can do as Gene suggest. for doing all on client side, you can create a helper object tha encapsulates the logic: it fires the requests, gets the responses, has an "abort" method to stop the request (if the user press "refresh" while still waiting for data), and updating the viewmodel only when all the data is arrived.

I created a jsFiddle: http://jsfiddle.net/saurus/dE6S9/

This uses "setTimeout()" to simulate ajax calls, stores the timeouts ids on an array (you would store the xhr returned by ajax calls), and calling "cancelTimeout()" to abort calls (you will use "xhr.abort or similar).

Answer 2

If you are loading data in asynchronous mode, the problem can be that the line

self.itmesArray(tempArray);

is executed way before

LoadDataFromServerAsync(tempArray);

has finished loading the new data from the server, so it keeps binding an empty array.

To fix it you should do the binding after the server has returned the new data. For example, using jquery to do an ajax call, you should update the viewmodel in the "success" callback. Here is how I do it:

    $.ajax({
      type: "POST",
      url: "ws.asmx/GetData",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      processData: false,
      success: function(msg) {
           viewModel.itmesArray(msg);
      }
    });

if this doesn't helps you, I think we need to look at the 'LoadDataFromServerAsync' implementation.

Answer 3

so, if I understand correctly, you want to click "refresh", this triggers some ajax calls, and the data returned from those calls replace completely the old data.

one way is to unsure every call works independently for others. For example doing something like I was quickly suggesting in the comment: make every call separate, and when a single call returns new data, delete the old data from the array and add the new one. This assumes that you can distinguish the elements returned by different calls.

another way is avoiding multiple calls altogether, you can block the UI interaction until finished (e.g. using the jquery blockui plugin, or something similar), or if you want to let the user to continue using the interface while you're updating it, you can simply avoid launching new request while some are still in-flight.

both ways need to know when the request series start, but this is easy: this happens at the start of "LoadData" method. Knowing when all the requests finished is a bit more complex, maybe there is a better way, if not you can create a counter, increment by 1 for every ajax request you fire, then, for every request finished, "push" the new data on the observableArray, and decrement the counter (in jquery i would use the "complete" callback, because it's warranted to be called even in case of error). at the very start of "LoadData" (even before clearing the array) add a test:

if (counter > 0) return;

If you use the "blockui" way, you should check the counter in every "complete" callback after decrementing it, if it's zero it's time to unblock the UI (the "blockui" option needs some work to avoid doing UI things in the viewModel).

Unless I'm still missing something...

Answer 4

Perhaps one way to deal with overlapping requests is to keep a user action counter in the client, and to pass that value to the server, assuming you have control over what the server sends back. You can then ignore responses with an out-of-date user action value. If you don't have access to the server data, you can still use this approach by sticking the action counter value into the success handler. Here's a sketch of this code. (Caveat: not tested)

function viewModel() {
    var self = this;
    var actionCounter = 0;
    var items = ko.observableArray([]);


    // This is triggered by a user request
    this.handleUserAction = function() {
        self.clearData();
        self.loadData(0, ++actionCounter); // assume 0=root
    }

    this.clearData = function() {
        this.items.removeAll();
    }

    // return some handle of the next request, or null
    this.moreRequestsRequired = function(data) {
         ...
         return ...;
    }

    this.processData = function(data, reqNo) {
        // this is where you would append it to the array
        ...

        // this is where the recursive call could be made
        var handle = self.moreRequestsRequired(data);
        if (handle)
            loadData(handle, reqNo);
    }

    this.loadData = function(handle, n) {
        var reqNumber = n;
        $.ajax('server/request', {
            data: {dir: handle},
            success: function(data) {
                if (reqNumber == actionCounter)
                   processData(data);
            }
        });
    }
};