0

我有一个需要执行以下操作的案例。

选择雇佣类型将触发默认月薪和年薪。

用户界面：

    <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'"/>

我的模型：

    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;
    }
    for (i=0; i<Math.floor((x.length-(1+i))/3); i += 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){ // for negative numbers which are 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) {
        // i need to do something like this. 
        // this.value = formatCurrency(this.value) in javascript. 
        // updated yearly salary which is monthly * 12. 
    },
    deferEvaluation: true
   },
   this);
   self.yearlySalary=ko.computed(
   {
    read:function() {
        return formatCurrency(unformatCurrency(self.monthlySalary()) * 12);
    },
    write: function(amount) {
        // i need to do something like this. 
        // this.value = formatCurrency(this.value) in javascript. 
        // updated monthly salary by dividing by 12. 
    },
    deferEvaluation: true
   },
   this);
}

var empModel = new EmploymentModel();
ko.applyBindings(empModel);

所以我得到了改变就业类型的第一部分工作将生成默认值。

现在我需要它，这样每当输入月薪时，它就会自动更新年薪，反之亦然。

  1. 用户选择默认，比月薪应该是 $1000 ，这将使年薪 $12000。

  2. 用户输入 500 作为月薪，然后变成 500 美元（格式化），并且还将年薪更新为 6000 美元。

  3. 用户输入 120000 作为年薪，然后变成 120000 美元（格式化），并且还将月薪更新为 10000 美元。

有什么建议或帮助吗？

这是小提琴（不能解决案例2和3）。

4

1 回答 1

1

你应该有你想要计算的基础 observable 所以我已经更新了你的小提琴。

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) {
        // i need to do something like this.
        self.empType(null);
        self.yearly(unformatCurrency(amount) * 12);
        self.monthly(unformatCurrency(amount)); // in javascript. 
        // updated yearly salary which is 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) {
        // i need to do something like this. 
        self.empType(null);
        self.yearly(unformatCurrency(amount));
        self.monthly(unformatCurrency(amount) / 12);
        // updated monthly salary by dividing by 12. 
    }
 },
 this);
}

小提琴演示

于 2014-03-10T17:31:31.337 回答