Why isn't this Child Computed Observable updated when it's observed array gets pushed to?

Question

I have a simple example to illistrate this. Take a which simply holds an array of items. Each row has a observable property, a date in this case. The ui is bound to a set of sorted items, which is just an computed observable. This computed observable in turn is watching a computed observable which will filter out rows.

Why does this not cascade as desired?

//simple table model
var TableModel = function(){
var self = this;
self.items = ko.observableArray([
new TableRowModel(5),
new TableRowModel(2),
new TableRowModel(9),
new TableRowModel(7)
]);
 self.filtered = ko.computed(function(){
return [self.items()[0], self.items()[1], self.items()[2]];
 });
 self.sortedItems = ko.computed(function(){
return _.sortBy(self.filtered(), function(item){
    return item.value();
});
});
};

var TableRowModel = function(value){
  var self = this;

self.value = ko.observable(new Date(2013, value, 1));
};

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

model.items.push(new TableRowModel(1));

Answer 1

Everything is working fine in your code. "February" is not there because it is filtered out.

The push() method inserts the new item at the last position. But in your self.filtered you only displays the items which are the position 0, 1, 2. But when you call push in your code the new item will be insterted at position 4 so it won't be displayed.

If you want "February" to be displayed you can use unshift:

myObservableArray.unshift('Some new value') inserts a new item at the beginning of the array

So in your code:

model.items.unshift(new TableRowModel(1));

Here is an updated JSFiddle.