我的Knockout代码中的复选框输入存在问题,该问题正确更新了viewmodel,但是在它周围的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 -->
这里是viewmodel的一个子集:
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函数(如下所示),单击该复选框将导致调用此函数大约五到六次,并在第一次调用后的每个点,复选框已更改为正确反映更新的视图模型。
然而,在那之后&#34;线程&#34;执行完成后,复选框立即恢复到之前的状态。只有当div被删除(通过取消选择HTML顶行引用的对象)并重新添加(通过重新选择它)时,复选框才能正确反映视图模型。
最初,我认为UI更改已被视图模型中由此更新导致的各种更改分配的许多订阅暂停,但我发现暂时删除这些订阅时问题仍然存在。应用程序中还有其他复选框可以按预期运行,并以相同的方式编写。
上面提到的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
绑定的定义,如果相关的话:
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();
}
};
对于可能导致此问题的任何建议都将非常感激。
答案 0 :(得分:0)
不知道这是相关的,但我遇到了重新绑定后未选中单选按钮的问题。修复了一旦我替换了data-bind =&#34; if:with data-bind =&#34; visible: