Question

I’m trying to add/load a record from the grid, edit it outside of the grid and have the observablearray and the UI updated.

Demo: http://jsfiddle.net/DiegoVieira/ckMJE/98/

As you’ll notice, the add or the edit doesn’t works as expected.
if I add a new item, it does get added to the array and it reflects the UI, but the next time I add another item, the old item is added in place.

The data is being pulled from the server and it has like 30+ properties, so building the objects with each property being ko.observable is not a option.

e.g.

    $.get('api/objects', function (data) {
        self.stones(data.stones); // when the vm loads, this is empty
        self.stone(data.stone); // when the vm loads, this is empty
    });

Thanks in advance.

Answer 1

Generally, you would want to make the properties observable.

If this is not possible, then one option is to remove and add the item back into the array, so that it is actually re-rendered.

When you add the “template” stone, you would want it to be a copy. ko.toJS is a quick way to get a copy.

So, you could do something like:

self.addStone = function () {
    self.stonesArray.push(ko.toJS(self.stoneData));  
};

and save it like:

self.saveStone = function (item) {
    var index = self.stonesArray.indexOf(item);
    self.stonesArray.remove(item);
    self.stonesArray.splice(index, 0, item);
    self.selectedStone(null);
};

Sample: http://jsfiddle.net/rniemeyer/ckMJE/99/