knockout.js - Knockout: Writable computable observable update each other -

i have case need following.

selecting employment type trigger default monthly salary , yearly salary.

ui:

    <select id="emptype" data-bind="value: $data.emptype, valueupdate: 'afterkeydown'">     <option value="default">default</option>     <option value="good"> good</option> </select> <input type="text" id="monthlysalary" data-bind="value: $data.monthlysalary, valueupdate: 'afterkeydown'"/> <input type="text" id="yearlysalary" data-bind="value: $data.yearlysalary, valueupdate: 'afterkeydown'"/> 

my model:

    function formatcurrency(z) {     "use strict";     var s, x, c, i, v;     if(z === ""){return "";}     x="0"+z.tostring().replace(/\$|\,/g,'');     if(isnan(x)){z="";return "";}     x=parsefloat(x);     s=(x === (x=math.abs(x)));     x=math.floor(x*100+0.50000000001);     c=x%100;     x=math.floor(x/100).tostring();     if(c<10) {         c="0"+c;     }     (i=0; i<math.floor((x.length-(1+i))/3); += 1) {         x=x.substring(0,x.length-(4*i+3))+','+x.substring(x.length-(4*i+3));     }     z=v=(((s)?'':'-')+'$'+x+'.'+c);     return v; }  function unformatcurrency(x) {     "use strict";     var y = x.tostring().replace(/\$|\,|\)/g,''), temp;     if(y.indexof("(") !== -1){ // negative numbers displayed in ( )         temp = y.replace("(", "-");         y = temp;     }     return y; }  function employmentmodel() {     var self = this;     self.emptype = ko.observable("");     self.monthlysalary = ko.computed(    {     read:function() {         if (self.emptype() === "default") {             return formatcurrency(1000);         } else {             return formatcurrency(2500);         }     },     write: function(amount) {         // need this.          // this.value = formatcurrency(this.value) in javascript.          // updated yearly salary monthly * 12.      },     deferevaluation: true    },    this);    self.yearlysalary=ko.computed(    {     read:function() {         return formatcurrency(unformatcurrency(self.monthlysalary()) * 12);     },     write: function(amount) {         // need this.          // this.value = formatcurrency(this.value) in javascript.          // updated monthly salary dividing 12.      },     deferevaluation: true    },    this); }  var empmodel = new employmentmodel(); ko.applybindings(empmodel); 

so got first part working changing employment type generate default value.

now need have whenever monthly salary enter auto update yearly salary , vice versa.

1. user select default, monthly salary should $1000 , make yearly salary $12000.

2. user enters 500 monthly salary, becomes $500 (formatted) , updates yearly salary $6000.

3. user enters 120000 yearly salary, becomes $120000 (formatted) , updates monthly salary $10000.

any advice or help?

here fiddle (that not solve case 2 , 3).

you should have base observable on want computed have updated fiddle.

function employmentmodel() {  var self = this;  self.emptype = ko.observable("default");  self.monthly = ko.observable(1000);  self.yearly = ko.observable(12000);  self.monthlysalary = ko.computed({     read: function () {         if (self.emptype() === "default") {             self.monthly(1000);             return formatcurrency(self.monthly());         } else if (self.emptype() === "good") {             self.monthly(2500);             return formatcurrency(self.monthly());         } else {             return formatcurrency(self.monthly());         }     },     write: function (amount) {         // need this.         self.emptype(null);         self.yearly(unformatcurrency(amount) * 12);         self.monthly(unformatcurrency(amount)); // in javascript.          // updated yearly salary monthly * 12.      },     deferevaluation: true }, this); self.yearlysalary = ko.computed({     read: function () {         if (self.emptype() === "default") {             self.yearly(12000);             return formatcurrency(self.yearly());         } else if (self.emptype() === "good") {             self.yearly(30000);             return formatcurrency(self.yearly());         } else {             return formatcurrency(self.yearly());         }     },     write: function (amount) {         // need this.          self.emptype(null);         self.yearly(unformatcurrency(amount));         self.monthly(unformatcurrency(amount) / 12);         // updated monthly salary dividing 12.      }  },  this); } 

fiddle demo