ko.observableArray not UI not UPdating.

Question

I have a Ko Model that is initialized, it has a observableArray, then at a later date the data is populated. However the UI doesn't appear to acknowledge the changes. I've was originally using a non-observable Array because there is nothing that is triggered when the items are added or deleted. Little help.

I initialize the Data Array for use later var Data = [];

  $(function () 
{
  KoAppViewModel = {
        SF: ko.observableArray(Data),
        selected: ko.observable("")
    };
    ko.applyBindings(KoAppViewModel);
})

Add each of the new Items to the array

   function searchColumns(columnName, displayValue) {
        return {
            columnName: columnName,
            displayValue: displayValue

        };
    }

This section Just acts to populate the array at a point later in the code.

 function Initialize Fields() {
       data = [
           new searchColumns("sub", "Subs"),
           new searchColumns("ck", "Check"),
           new searchColumns("Ntes", "Notes"),

       ];
    ko.utils.arrayPushAll(Data, data);
    }

Heres a stub of the Html which iterates over the Array and populates the UL. This works if I initialize the array with the data but addinng it at a later date seems to ignore it. I've tried to loop through and individually add them with no success also.

 <ul data-bind="foreach:SF">
                        <li style="list-style-type:none;">
                            <input type="radio" data-bind="checkedValue: columnName, checked: $parent.selected" name="SearchFieldstyu" />&nbsp;
                            <span data-bind="text: displayValue"></span>
                        </li>
                    </ul>

Joe Ricklefs Joe Ricklefs · Accepted Answer · 2016-07-06T17:56:11

Simply forgot to add valueWillMutate() and valueHasMutated() to the underlying array after populating it.

 function Initialize Fields() {
       data = [
           new searchColumns("sub", "Subs"),
           new searchColumns("ck", "Check"),
           new searchColumns("Ntes", "Notes"),

       ];



 KoAppViewModel.SF.valueWillMutate();



 ko.utils.arrayPushAll(Data, data);
    }

KoAppViewModel.SF.valueHasMutated();

ko.observableArray not UI not UPdating.

1 Answers