Knockout JS with jQuery getJSON

Question

I'm confused as to why my UI isn't being updated when I add an element to the observable array. I realize I'm not doing anything with my AJAX getJSON call data, but shouldn't knockout be updating my observable array when I add elements to it? It shows "test1" fine but not "test2". There are no PHP or JS errors, it simply does not update the UI.

HTML:

<div class="allScheduleWrap" data-bind="foreach: schedules">
    <div class="schedule">
        <div class="downTime" data-bind="text:downTime"></div>
    </div>
</div>

JS:

$(document).ready(function() {
    var AllSchedules = [];
    AllSchedules.push({downTime: "test1"});

    function SchedulesViewModel() {
        var self = this;
        self.schedules = ko.observableArray(AllSchedules);
    }

    ko.applyBindings(new SchedulesViewModel());

    $.getJSON("GetSchedules.php", function(data) {          
        AllSchedules.push({downTime: "test2"}); //does NOT update the UI

    });
});

gbs gbs · Accepted Answer · 2012-09-20T15:17:12

You should push your data to the observable array (shedules) instead of AllSchedules variable. Replacing your code by this one should make it work:

var model = new SchedulesViewModel()
ko.applyBindings(model);

$.getJSON("GetSchedules.php", function(data) {          
    model.schedules.push({downTime: "test2"}); 

});

Knockout JS with jQuery getJSON

2 Answers