Knockout observable array randomly doesn't bind

Question

I'm having a problem with durandal/knockout/sammy - not sure which one is the culprit. Occasionally my var roots = ko.observableArray([]); doesn't get bound to the UI. Most of the time it works perfectly. Hopefully someone on SO sees something I don't.

VM Activate:

var activate = function () {
        groupsData.GetRoots().then(function (data) {
            roots($.map(data, function (it) { return new groupNode.GroupNode(it); }));
//If I do a console.log(roots()); right here, the correct data shows up
        });
    };

DataContext:

var getRoots = function () {
    return Q.when($.getJSON(Url));
};

My view: If I hit refresh over and over, the span with the 'length' in it will show the correct length MOST OF THE TIME. Occasionally it will be 0 and the UI inside of the foreach will not show.

    <span data-bind="text: roots().length"></span>
    <ul data-bind="foreach: roots">
        //BLA
    </ul>

Answer 1

You need to return the promise in the activate function, otherwise it won't know when the promise has completed.

var activate = function () {
    return groupsData.GetRoots().then(function (data) {
        roots($.map(data, function (it) { return new groupNode.GroupNode(it); }));
    });
};

If you do this, databinding wont occur until the promise has finished, which will remove the race condition you are seeing.