Question

我有一个案例，我需要做以下事情。

选择就业类型将触发默认月薪和年薪。

用户界面：

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

所以我得到了第一部分工作，即改变就业类型会产生默认值。

现在我需要拥有它，以便每当输入月薪时，它将自动更新年薪和副Versa。

用户选择默认值，月薪应为1000美元，这将使年薪为12000美元。
用户输入500作为月薪，而不是500美元（格式化），并且还将年薪更新为6000美元。
用户输入120000年薪，而不是120000美元（格式化），并将月薪更新为10000美元。

有任何建议或帮助吗？

这是fiddle（不解决案例2和3）。

Answer 1

你应该有你想要计算的基础可观察量，所以我已经更新了你的小提琴。

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

Fiddle Demo

Knockout：可写的可计算可观察对象更新

1 个答案: