我的应用程序有一个select元素，它的选项绑定到observableArray，值绑定到observable。它还使用了optionsCaption绑定。问题是select元素与observable的值不同步。也就是说，observable有一个值，但HTML select元素的selectedIndex是一个不同的选项。因此用户看到的与视图模型不匹配。
下面是HTML：

<select data-bind="options:neighborhoods,optionsText:'name',optionsValue:'id',value:neighborhoodId,optionsCaption:'All'"></select>

下面是视图模型中的相关代码：

this.neighborhoods = ko.observableArray();
this.neighborhoodId = ko.observable();

neighborhood数组是在初始化过程中从RESTAPI填充的，一切都按预期工作。HTML select具有与neighborhood obervableArray中的对象相对应的选项，以及文本为“All”的无值选项。neighborhoodId可观察值未定义，并且HTML select元素的selectedIndex值为0（这样用户就可以看到“全部”）。Chrome检查器会显示以下HTML：

<select data-bind="options:neighborhoods,optionsText:'name',optionsValue:'id',value:neighborhoodId,optionsCaption:'All'">
    <option value="">All</option>
    <option value="8">Back Bay</option>
    <option value="12">
    ...

但是在用户选择“Back Bay”选项，提交表单，然后单击“Reset”按钮来单击表单之后，可观察到的neighborhoodId与用户在页面上看到的不匹配。“Reset”按钮的单击处理程序将可观察到的neighborhoodId的值设置为undefined。如预期的那样，用户看到“All”，而HTML select元素的selectedIndex属性为0。但是neighborhoodId的可观察值为12。在按钮处理程序将其设置为undefined之后，该值会发生变化，而DOM不会发生变化以反映新值。
这是在一个中等复杂的单页面应用程序中发生的。我还不能创建一个简单的示例来重现这个问题。所以我的问题是，在Knockout应用程序中，如果视图模型和DOM不同步，您使用什么技术来调试这种情况？