Knockout computed not updating using observable array

Question

I have the following ViewModel:

function vm(model) {

    var self = this;

    var Create = function (data) {
        var order = ko.utils.extend(data, {});
        order.Price = ko.observable(data.Price);
        return order;
    }

    self.orders = ko.mapping.fromJS(model, {
        create: function (options) {
            return Create(options.data);
        }
    });

    self.FirstPrice = ko.pureComputed(function () {
        return parseFloat(self.orders()[0].Price());
    });
}

When the page is loaded the "FirstPrice" is updated normally, but after change the Price on first row of "orders" array, the "FirstPrice" remains the first value after page load.

What is missing?

* I removed some lines of code to simplify the example

Thanks

Yes, it is. ko.mapping.fromJS converts a object to an observable array. I'm using it in MVC ;) — Oswaldo
Couple things 1) Did you debug the purecomputed property and check if the code even gets called? There is a difference between purecomputed and computed observables. 2)If it is hitting the computed code, does the self.orders collection have the right/updated data. 3) Are you changing the price value using code or through UI? If its through code, make sure you don't do something like .price = xyz since its an observable. Some of these might be obvious to you but just for my info. — Krishna Teja Veeramachaneni
Hi. 1) Yes, I checked with an alert and it's being called only after page loads. I tested the computed observable too with same result. 2) After the page load the data is updated right. 3) I'm changing price value through UI. Thanks for your time — Oswaldo

PatrickSteele PatrickSteele · Accepted Answer · 2014-10-14T20:32:54

See the documentation for observableArray. In particular, this section:

Key point: An observableArray tracks which objects are in the array, not the state of those objects

Knockout computed not updating using observable array

2 Answers