Updating an observableArray does not update UI

Question

I am using the containerless flow control in ko 2.0. When I update an item in my observableArray it is not updating the UI. I am updating the array like this:

Answer 1

Here is a a fiddle that demonstrates how to replace an item in an observableArray and have its changes notify the UI.

http://jsfiddle.net/johnpapa/ckMJE/

The key here is the replace function on the observableArray. You could also use splice.

... Notice the use of "replace" below ...

var ViewModel = function() {
    this.self = this;
    self.index = ko.observable(0); // default
    self.newColor = ko.observable("purple"); // default
    self.colors = ko.observableArray([{
        color: 'red'},
    {
        color: 'blue'},
    {
        color: 'yellow'}]);
    self.replaceIt = function() {
        self.colors.replace(self.colors()[self.index()], {
            color: self.newColor()
        });
    };
};
ko.applyBindings(new ViewModel());