取消复选框未进行可视化更新
Knockout checkbox not updating visually
我在Knockout代码中输入了一个复选框,该复选框正确地更新了视图模型,但在它周围的div消失并重新出现之前不会更新。我们目前使用的是淘汰赛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 -->
下面是视图模型的一个子集:
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函数)遍历代码时(如下),单击复选框将导致调用该函数大约五到六次,在第一次调用之后的每一次,复选框都会更改,以正确反映更新的视图模型。
但是,在执行的"线程"完成后,复选框会立即恢复到以前的状态。只有删除div(通过取消选择HTML顶行引用的对象)并重新添加div(通过重新选择它)时,复选框才能正确反映视图模型。
最初,我认为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();
}
};
任何关于造成这种情况的原因的建议都将不胜感激。
我不知道这是相关的,但我遇到了一个问题,在重新绑定后单选按钮未被选中。修复了我将databind="if:withdatabind="visible:
相关文章:
- 如何在谷歌可视化中组合数字和模式格式化程序
- 加载泰坦尼克号可视化数据时出现问题
- 如何使用图表包装函数有条件地格式化谷歌可视化表单元格
- AngularJS&Google可视化-使用状态更改处理程序(Google API)在HTML页面上查看$sco
- Javascript图形可视化工具包,具有高性能(500-1000个节点)
- Google可视化addListener调用函数引用错误
- 如何在web上动态可视化数据集
- 可视化到选择框中
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- 谷歌图表可视化仪表板数据源问题
- 在可视化中将CSS从悬停更改为单击
- 使用 d3 可视化快速射击的“点击”
- 为 D3 可视化创建平均 Y 线
- Spotfire Java脚本将字段拆分为唯一值,并每30秒更新一次MapChart可视化,以反映值的变化
- 实体位置发生变化时未进行可视化更新
- 如何(可视化)更新包含更改url中数据的聚合物元素
- 取消复选框未进行可视化更新
- 谷歌线图可视化图表消失时更新它
- 谷歌可视化和ASP更新面板
- 如何在不重画每帧的情况下更新d3可视化