gvkr
asked on
knockout js subscribe
What ia m trying to do is i have 4 text boxes 2 in each row. like this
Original1 Difference1
Original2 Differnece2
when the page loads original1 and original2 will have default values and differnece1 and difference2 should be calculates default values subtracted from current original values. I got this part to working.
When you change the value for differnece1 orginal1 should be automatcillay added with the differnence1, same for original2 also. I have tried to use subscribe on differnces, it did not get fired. This is what i ahe tried.
Original1 Difference1
Original2 Differnece2
when the page loads original1 and original2 will have default values and differnece1 and difference2 should be calculates default values subtracted from current original values. I got this part to working.
When you change the value for differnece1 orginal1 should be automatcillay added with the differnence1, same for original2 also. I have tried to use subscribe on differnces, it did not get fired. This is what i ahe tried.
vmp.modify = {
vm : {
originalValue1 : ko.observable("defalutValue1"),
differnece1 : ko.observable(),
originalValue2 : ko.observable("defalutValue2"),
differnece2 : ko.observable(),
},
init : function() {
vm.differnece1 = ko.computed({
read : function() {
var differnece1 = defalutValue1 - originalValue1;
return differnece1;
}
});
vm.differnece2 = ko.computed({
read : function() {
var differnece2 = defalutValue2 - originalValue2;
return differnece2;
}
});
vm.differnece1.subscribe(function(difference) {
vm.originalValue1 = ko.computed({
read : function() {
var originalValue1 = originalValue1 + difference;
return originalValue1;
}
});
}.bind(this));
vm.differnece2.subscribe(function(difference) {
vm.originalValue2 = ko.computed({
read : function() {
var originalValue1 = originalValue2 + difference;
return originalValue2;
}
});
}.bind(this));
ko.bindingHandlers.customerBinder = {
init : function(element, valueAccessor, allBindingsAccessor,
context) {
var $el = $(element), thisValue = $el.val() || $el.text();
valueAccessor()(thisValue);
}
};
ko.applyBindings(vmp.modify.vm, $('#formId')[0]);
}
};
ASKER
Actually what i want is, if the original value gets changed difference should change and if the difference gets changed original value should get changed.
Suppose on page load if the original value is 100 and change will be zero.
when the user changes the original value to 200 difference should be 100 i got that part working.
Now the page is loaded with original value of 100, if the user enters a value in difference as 100, original value should automatically become 200.
Suppose on page load if the original value is 100 and change will be zero.
when the user changes the original value to 200 difference should be 100 i got that part working.
Now the page is loaded with original value of 100, if the user enters a value in difference as 100, original value should automatically become 200.
Ah ok. Then your observables need to be writable as well but you don't need any observables
I'll test and get back to you as we want to avoid any possible recursion
I'll test and get back to you as we want to avoid any possible recursion
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for giving it with example, i am not sure how to give more points, i fell like it is definitely more than 500 points.
demo: http://jsbin.com/pakaje/1/edit?html,js,output
Your view model should be this simple:
Open in new window
based on html:
Open in new window