计算的淘汰赛的循环依赖性 [英] Circular dependency of knockout computed
问题描述
参见jsFiddle: http://jsfiddle.net/ruslans/vFK82/
see working jsFiddle: http://jsfiddle.net/ruslans/vFK82/
我有3个字段:净价(除税),税额和总价(价格除税和税额)。
NetPrice和Total是可写的,即您可以更改其中任何一个,其他2个值必须自动计算。
I have 3 fields: Net Price (ex. tax), tax amount and Total price (price ex. vat + tax amount). the NetPrice and the Total are writable, i.e. you can change either of them and the other 2 values must be auto-calculated.
我的方式完成它是使用3个可观察和2个计算的淘汰对象,但我想也许有人知道Knockout好多了可能会建议一个更有效的方法来实现这一点。
The way I've done it is using 3 observable and 2 computed knockout objects but I thought perhaps someone who knows Knockout a lot better could suggest a more efficient way to achieve this.
html:
Net Price:
<input type="textbox" data-bind="value: NetPriceCalc" />
<br />Tax Amount:
<label data-bind="html: TaxAmt"></label>
<br />Total:
<input type="textbox" data-bind="value: TotalCalc" />
脚本:
var viewModel = {
NetPrice: ko.observable(100),
TaxAmt: ko.observable(20),
Total: ko.observable(120),
TaxRate: 0.2
};
viewModel.updateTaxAmt = function (useNetPrice) {
if (useNetPrice) {
return this.TaxAmt(this.NetPrice() * this.TaxRate);
} else {
var total = Number(this.Total());
var taxAmt = total - total / (1 + this.TaxRate);
return this.TaxAmt(taxAmt);
}
};
viewModel.updateNetPrice = function () {
this.NetPrice(Number(this.Total()) - Number(this.TaxAmt()));
};
viewModel.updateTotal = function () {
this.Total(Number(this.NetPrice()) + Number(this.TaxAmt()));
};
viewModel.NetPriceCalc = ko.computed({
read: function () {
console.log("NetPriceCalc read");
return viewModel.NetPrice();
},
write: function (value) {
console.log("NetPriceCalc write");
viewModel.NetPrice(value);
viewModel.updateTaxAmt(true);
return viewModel.updateTotal();
}
});
viewModel.TotalCalc = ko.computed({
read: function () {
console.log("TotalCalc read");
return viewModel.Total();
},
write: function (value) {
console.log("TotalCalc write");
viewModel.Total(value);
viewModel.updateTaxAmt(false);
return viewModel.updateNetPrice();
}
});
ko.applyBindings(viewModel);
推荐答案
稍微好一点的方法可能是:
A slightly better and efficient way could be this :
Html
Net Price:
<input type="textbox" data-bind="value: NetPrice" />
<br />Tax Amount:
<label data-bind="html: TaxAmt"></label>
<br />Total:
<input type="textbox" data-bind="value: Total" />
JS
function viewModel() {
var self = this;
self.NetPrice = ko.observable(100);
self.TaxRate = 0.2;
self.TaxAmt = ko.computed(function() {
return parseFloat(self.NetPrice()) * self.TaxRate;
});
self.Total = ko.computed({
read: function() {
return parseFloat(self.NetPrice()) + self.TaxAmt();
},
write: function(val){
var total = parseFloat(val);
var taxAmt = total - total / (1 + self.TaxRate);
self.NetPrice(total - taxAmt);
}
});
}
希望有所帮助!
这篇关于计算的淘汰赛的循环依赖性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!