knockout computed observable write not working for plain object containing atomic observables
Question
I have created a computed observable from simple observables like this:
- this.fullDetails is the computed observable.
- this.computeFullDetails is the computed's read function.
- this.writeToComponents is the computed's write function.
When i modify the input box corresponding to the atomic observables the computed properties get modified but when i modify the computed properties,the atomic ones are not updated. Can I get an alternative approach to get something like this done?.
please see this fiddle http://jsfiddle.net/saurabh0jha/wqpZ9/
function PersonViewModel()
{
this.firstName = ko.observable("");
this.lastName = ko.observable("");
this.phoneNos = ko.observable(0);
this.address = ko.observable("");
this.computeFullDetails = function(){
retObj = {};
retObj.firstName=ko.observable(this.firstName());
retObj.lastName=ko.observable(this.lastName());
retObj.phoneNos=ko.observable(this.phoneNos());
retObj.address=ko.observable(this.address());
return retObj;
};
this.writeToComponents = function(value){
this.firstName(value.firstName());
this.lastName(value.lastName());
this.phoneNos(value.phoneNos());
this.address(value.address());
};
this.fullDetails = ko.computed(
{
read:this.computeFullDetails,
write:this.writeToComponents,
},this);
}
var vm = new PersonViewModel();
ko.applyBindings(vm);
HTML
<html lang='en'>
<head>
<title>Hello, Knockout.js</title>
<meta charset='utf-8' />
<link rel='stylesheet' href='style.css' />
</head>
<body>
<h2>atomic</h2>
<input data-bind="value: firstName" style="display:block" />
<input data-bind="value: lastName" style="display:block"/>
<input data-bind="value: phoneNos"style="display:block" />
<input data-bind="value: address" style="display:block"/>
<h2>computed</h2>
<input data-bind="value: fullDetails().firstName" style="display:block"/>
<input data-bind="value:fullDetails().lastName" style="display:block"/>
<input data-bind="value: fullDetails().phoneNos"style="display:block" />
<input data-bind="value: fullDetails().address"style="display:block" />
<script type='text/javascript' src='knockout-2.2.0.js'></script>
<script type='text/javascript' src='2computedObservables.js'> </script>
</body>
</html>
2 answers
solution1
0 ACCPTED 2014-04-24 13:30:57
Not sure what you are trying to do.
The problem with your code is that you do not subscribe to the observables you return in computeFullDetails .
You can try this:
<input data-bind="value: fullDetailsFirstName" style="display:block" />
this.fullDetailsFirstName = ko.computed({
read: function () {
return self.firstName();
},
write: function (newValue) {
self.firstName(newValue)
}
});
Example (changed only firstName): http://jsfiddle.net/nyothecat/VJ4th/1/
solution2
0 2014-04-25 20:29:27
This:
retObj.firstName=ko.observable(this.firstName());
creates a new observable with the value of the old one. Because of this, you lose all the old dependencies every time computeFullDetails is called.
Everything that was bound to a previous fullDetails().firstName will never be updated again.
If I understand you correctly, you want something like this:
function PersonViewModel() {
this.firstName = ko.observable("");
this.lastName = ko.observable("");
this.phoneNos = ko.observable(0);
this.address = ko.observable("");
this.anyAttribute = ko.computed(function() {
this.firstName();
this.lastName();
this.phoneNos();
this.address();
// what this returns is not important, its
// only job is to notify subscribers when any
// dependency has changed
});
this.anyAttribute.subscribe(function() {
// do here whatever you need to do when any
// of the attributes has changed
});
}
var vm = new PersonViewModel();
ko.applyBindings(vm);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.