javascriptknockout.jsviewmodelknockout-es5-plugin

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

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';
Solution

  • 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}));