[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

knockout js subscribe

Posted on 2015-02-13
5
Medium Priority
?
211 Views
Last Modified: 2015-02-16
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.


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]);
	}

};

Open in new window

0
Comment
Question by:gvkr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40608913
I believe you're over complicating your view model unless there's something i'm missing....

demo: http://jsbin.com/pakaje/1/edit?html,js,output

Your view model should be this simple:

var vm = {};

$(function() {
  vm.vals = [45,88];
  vm.orig1 = ko.observable(vm.vals[0]);
  vm.orig2 = ko.observable(vm.vals[1]);
  
  vm.calc1 = ko.computed(function() {
    return vm.vals[0]-vm.orig1();
  });
  vm.calc2 = ko.computed(function() {
    return vm.vals[1]-vm.orig2();
  });
  
  ko.applyBindings(vm);
});

Open in new window


based on html:
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div><input type="text" data-bind="value: orig1"><input type="text" data-bind="value: calc1" readonly></div>
  <div><input type="text" data-bind="value: orig2"><input type="text" data-bind="value: calc2" readonly></div>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:gvkr
ID: 40610322
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.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40610368
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
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40610382
http://jsbin.com/pakaje/2/edit

you only have one set of observables and another set of writable pureComputed observables:

var vm = {};

$(function() {
  vm.vals = [45,88];
  vm.orig1 = ko.observable(vm.vals[0]);
  vm.orig2 = ko.observable(vm.vals[1]);

  vm.calc1 = ko.pureComputed({
    read: function() {
      return vm.vals[0]-vm.orig1();    
    },
    write: function(value) {
      // update the orig1 with the difference
      vm.orig1(vm.vals[0]*1+value*1);
    }
  });

  vm.calc2 = ko.pureComputed({
    read: function() {
      return vm.vals[1]-vm.orig2();
    },
    write: function(value) {
      // update the orig1 with the difference
      vm.orig2(vm.vals[1]*1+value*1);
    }
  });

  ko.applyBindings(vm);
});

Open in new window

0
 

Author Closing Comment

by:gvkr
ID: 40612738
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.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question