javascript - knockout 复选框未在视觉上更新

Question

我的 Knockout 代码中的复选框输入存在问题，该复选框可以正确更新 View 模型，但直到其周围的 div 消失并重新出现后才会更新。目前我们使用的是 Knockout 3.2.0。

以下是相关 HTML 的子集:

<!-- ko foreach: objects -->
<!-- ko if: isType(typeCodes.INPUT) -->
<!-- ko if: selected -->
<div data-bind="fadeVisible: $root.isState(uiState.IDLE)" id="typeInputContainer">
    <!-- ko foreach: $root.types -->
        <div class="checkbox patientType">
            <input type="checkbox" data-bind="attr: {id: 'checkPt' + $data.patientTypeValue() }, checked: $data.visible" />
        </div>
    <!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->

这是 View 模型的子集:

function PatientType(name, value, color) {
    var self = this;
    self.typeName = ko.observable(name);
    self.visible = ko.observable(true);
    //Disposal
    self.isDisposed = false;
    self.dispose = function() {
        self.color().dispose();
        self.isDisposed = true;
    };
}

对大幅减少表示歉意，但每种情况下的周围代码都非常冗长，并且与问题没有特别相关。

当我单步执行调用堆栈最高级别的代码时，用于事件处理的 JQuery 函数(如下)，单击复选框将导致该函数被调用大约五到六次，并且在第一次调用之后的每个点，复选框已更改以正确反射(reflect)更新的 View 模型。

但是，执行“线程”完成后，复选框会立即恢复到之前的状态。只有当 div 被删除(通过取消选择 HTML 顶行引用的对象)并重新添加(通过重新选择它)时，复选框才能正确反射(reflect) View 模型。

最初，我认为 UI 更改是由于分配给 View 模型中的此更新引起的各种更改的许多订阅而停止的，但我发现当这些订阅被暂时删除时，问题仍然存在。应用程序中还有其他复选框可以按预期运行，并且以大致相同的方式编写。

上面提到的 JQuery 2.1.1 代码:

eventHandle = elemData.handle = function( e ) {
    // Discard the second event of a jQuery.event.trigger() and
    // when an event is called after a page has unloaded
    return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
        jQuery.event.dispatch.apply( elem, arguments ) : undefined;
    };

以及 fadeVisible 绑定(bind)的定义(如果相关的话):

ko.bindingHandlers.fadeVisible = {
    init: function (element, valueAccessor) {
        // Initially set the element to be instantly visible/hidden depending on the value
        var value = valueAccessor();
        $(element).toggle(ko.unwrap(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
    },
    update: function (element, valueAccessor) {
        // Whenever the value subsequently changes, slowly fade the element in or out
        var value = valueAccessor();
        ko.unwrap(value) ? $(element).fadeIn() : $(element).fadeOut();
    }
};

任何有关可能导致此问题的原因的建议将不胜感激。

Answer 1

不知道这是否相关，但我遇到了重新绑定(bind)后取消选择单选按钮的问题。一旦我用 data-bind="visible: 替换 data-bind="if: 就修复了: