Need some advice on an issue with observable arrays

[Derek Antrican]

I apologize, I am quite new to knockout.js. I am working on a plugin for octoprint and octoprint uses jinja + knockout for the UI side of plugins. I have recently taken ownership of a plugin that was abandoned and am trying to figure out a knockout binding issue. Here's where the issue is tracked (with some comments & screen captures): https://github.com/derekantrican/OctoPrint-Webhooks/issues/1. (Keep in mind - I didn't originally write this code. I've only recently taken over the project).

Jinja2 (HTML): https://github.com/derekantrican/OctoPrint-Webhooks/blob/master/octoprint_webhooks/templates/webhooks_settings.jinja2

Knockout.js: https://github.com/derekantrican/OctoPrint-Webhooks/blob/master/octoprint_webhooks/static/js/webhooks.js

From the issue link above, the problem is that the value for some bindings aren't always updated with UI changes. In the example case, checking the box for "Is this webhook enabled?" then saving the settings only seems to register a value change on the first time the UI is loaded.

Again, I'm not super familiar with jinja/knockout but the binding seems different to most other octoprint plugins I've referenced. In this case, this plugin uses a single array ("hooks") as the basis for the settings, registers it as an observableArray, then binds a couple elements to the "selectedIndex" and uses <div class="control-group" data-bind="with: selectedHook"> as a wrapper around the elements bound to specific object properties (such as <input type="checkbox" data-bind="checked: webhook_enabled"> ).

Any advice on what might be going on or troubleshooting this issue would be great.