[英]Knockout Computed Observable not updating the UI
我遇到了一个问题,尝试将knockoutJS observable 动态更新为计算的observable不会更新UI。
我已经在复选框上实现了父子依赖关系以下规则控制着交互。
现在我有一个场景,其中父子依赖行为是动态的,即上述规则仅在用户单击按钮时才开始工作。
我有一个实现,其中父复选框绑定到一个可观察的属性,然后该属性被重写为新的Computed Observable。 更改为Computed Observable后,前2个规则(规则1和2)有效,但最后2个规则(规则3和4)停止工作。 我可以在调试器中看到正确返回了返回值,但它没有更新UI。
为了证明我的问题,我创造了2个JS小提琴
我不是在寻找替代解决方案,但我有兴趣了解为什么第二小提琴显示行为。
function ViewModel(){ var self = this; var childrenArray = [ {isSelected : ko.observable(true)}, {isSelected : ko.observable(true)}, {isSelected : ko.observable(true)}, {isSelected : ko.observable(true)}]; self.parentChildData = { parentCheckBox: ko.observable(false), children: ko.observableArray([]) }; self.parentChildData.children(childrenArray); self.makeDependent = function(){ self.parentChildData.parentCheckBox = ko.computed({ read: function () { var anyChildUnChecked = ko.utils.arrayFirst(self.parentChildData.children(), function (childCheckBox) { return !childCheckBox.isSelected(); }); var result = anyChildUnChecked == null; return result; //return false; }, write: function (value) { ko.utils.arrayForEach(self.parentChildData.children(), function (childCheckBox) { childCheckBox.isSelected(value); }); } })}; return self; } ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> <p> Describes my current implementation for which Rule 3 and 4 are not working. In this case, the Observable property is overridden with the computed Observable on the click of the button. So, initially the parent child relationship is not enforced, but on click of button the relationship is enforced. </p> <p> After clicking the button, the first 2 Rules (Rule 1 and 2) works but last 2 Rule (Rule 3 and 4) stops working. I can see in the debugger that the return value is correctly returned but it doesn't Update the UI. </p> <div id="parent"> parent <input type="checkbox" data-bind="checked:parentChildData.parentCheckBox"/> <br/> <div id="child"> Child <!-- ko foreach: parentChildData.children --> <input type="checkbox" data-bind="checked:isSelected"/> <!-- /ko --> </div> <br/> <input type="button" value="Make dependent" data-bind="click:makeDependent"> </div>
我想问题是在初始化设置时发生的事件序列。 考虑实施中的以下流程 -
parentCheckBox
首先被定义为self.parentChildData
上的一个observable
属性。 self.parentChildData.children
数组使用子项初始化。 parentCheckBox
现在更改为computed observable
。 我在这里看到的问题是,在parentCheckBox
被要求对self.parentChildData.children
中self.parentChildData.children
所做的更改作出反应self.parentChildData.children
,这个children数组已经初始化,因此没有创建依赖关系,这就是为什么你没有得到这种行为你期待。
因此,我更改了代码的流程并在parentCheckBox
被赋予了computedObservable
角色之后初始化了self.parentChildData.children
(虽然它不会改变最初定义的方式)。
self.parentChildData.parentCheckBox = ko.computed({
read: function() {
var anyChildUnChecked = ko.utils.arrayFirst(self.parentChildData.children(), function(childCheckBox) {
return !childCheckBox.isSelected();
});
var result = anyChildUnChecked == null;
return result;
//return false;
},
write: function(value) {
ko.utils.arrayForEach(self.parentChildData.children(), function(childCheckBox) {
childCheckBox.isSelected(value);
});
}
});
self.parentChildData.children(childrenArray); //values are pushed here
此外,这消除了对self.makeDependent
函数的需要,虽然我也很奇怪,当self.parentChildData.children
在创建computed
之前已经具有值时,该函数如何能够使其工作: - )
更新了小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.