How to update settings UI element by changing settings value?

I'm trying to get the settings UI page "GUI Scale" element to update it's value when I click a newly added "Reset Scale" button.

The GUI Scale element has this template code:

Code:

<div class="option slider" data-bind="template: { name: 'setting-template', data: $root.settingsItemMap()['ui.ui_scale'] }"></div>

And I'm running the following code in my button:

Code:

  api.settings['resetUiScale'] = function () {
    var reset_to = 1;
    api.settings.set('ui', 'ui_scale', reset_to);  // Reset to a small value to ensure UI visibility.
    api.settings.apply();
  };

My Knockout familiarity is essentially zero, however my understanding is that the data is bound and so updating the value should update the UI. However this isn't happening. in the above. The GUI Scale is affected fine. However looking at the bound data: `$root.settingsItemMap()['ui.ui_scale']` it seems as though this is just computing a snapshot of the value when the slider element is created and that this is possibly not bound at all?

Thanks!

EDIT:

Also tried the following, still to no avail:

Code:

api.settings.observableMap['ui']['ui_scale'](reset_to);

The settings UI is actually built from a view model built on page creation. It seems like you'd just need to update the view model

Code:

model.settingsItemMap()['ui.ui_scale'].value(reset_to)

But this doesn't work, perhaps because of the intermediate computed. What the base code does on resetting defaults is:

Code:

model.settingGroups.notifySubscribers()

Which will make the entire page update, but seems to do the trick.

Thanks very much, that did it!