UI not updating when a model property is updated which is tracked by knockout ES5

Question

I have a model which looks like below:

  vm.testModel= {
        testProperty:[]
    }

Before the page loads, the model is tracked using ko.track(vm.testModel) method.

At run time on click of a button, I add few properties to this model as below:

vm.testModel.testProperty.push({ Prop1: null, Prop2: null});

I see that UI gets updated with the new rows.

Now, on click of another button, I am assigning values to the properties but the UI does not update with the property values:

vm.testModel.testProperty[vm.testModel.testProperty.length - 1].Prop1 = 'Test';

score 2 · Accepted Answer · answered Dec 16 '14 at 17:09

Arrays tracked by knockout are tracking which items are in the array, not the properties on the items in the array.

To track individual properties, you will either need to declare them as observables or pass them through ko.track

eg

vm.testModel.testProperty.push(ko.track({ Prop1: null, Prop2: null}));

1 Answers1