Dynamically adding properties to observable object

Question

I have a viewmodel like this,

        function viewModel() {
            this.loadData = function() {
                this.Items().C = 3;
            };

            this.Items = ko.observable({ A: 1});
            this.Items().B = 2;
        }

        var vm = new viewModel();
        ko.applyBindings(vm);
        vm.loadData();

I am printing out the values like this,

        <span data-bind="text: $root.Items().A"></span>
        <span data-bind="text: $root.Items().B"></span>
        <span data-bind="text: $root.Items().C"></span>

It prints out values of A and B, but not C?

Thanks.

Answer 1

Since, C itself is not observable initially, the binding would not know that it needs to update when a change is made.

To make it update, you would either need to reset Items entirely:

this.loadData = function() {
    var existing = this.Items();
    existing.C = 3;
    this.Items(existing);
};

or call the valueHasMutated function of the observable, to force any subscribers to update like:

this.loadData = function() {
    this.Items().C = 3;
    this.Items.valueHasMutated();
};