I’m coding a detail screen with a drop down showing instances of child entities. The user can add a new instance of a child entity and the fields for the new instance appear for editing below. Alternatively the user can select an existing instance from the drop down and edit that.
When the user adds a new child entity, they need the dropdown focussed on the new child entity name and the fields for the new entity displayed for editing below.
The fields were appearing, but the drop down wasn’t refreshing.
Html for drop down:

    <div class="col-md-8">
      <div class="form-group">
        <label for="childItemList">Child items:</label>
        <select class="form-control" id="childItemList"
                data-bind="options: childItems, optionsText: 'name',value: $root.selectedChildItem, height:3"></select>
      </div>

    </div>

The binding context is a “with:parentEntity” binding. The solution was pretty simple, call “valueHasMutated” on the parent after the new child entity is created:

        addChildEntity = function () {
            var newChildEntity = datacontext.createChildEntity(parentEntity());
            parentEntity.valueHasMutated();
            selectedChildEntity(newChildEntity);
        },