[英]observable and computed are not working properly Knockout
我有以下实现以下角色的基因剔除代码:
field1 + field2 -field3 = field4
$(function () {
ko.applyBindings(new AppViewModel());
});
function AppViewModel() {
this.original = ko.observable(0);
this.improvements = ko.observable(0);
this.depreciation = ko.observable(0);
this.total= ko.computed(function () {
var total= 0;
total= this.original() + this.improvements() - this.depreciation();
return total;
}, this);
}
但是由于某种原因它无法正常工作,因此此this.original
值始终会乘以10。
例如:
1 +1-1 = 10
知道是什么原因造成的吗?
这是我的HTML:
<div class="calc-form">
<label>Original Purchase Price</label>
<input type="text" id="original" data-bind="value: original" />
<label>+ Improvements</label>
<input type="text" id="improvements" data-bind="value: improvements" />
<label>- Depreciation</label>
<input type="text" id="depreciation" data-bind="value: depreciation" />
<input type="button" class="calcbutton" value="Calculate" />
<input type="button" class="calcbuttonreset" value="reset" />
<p>= Total</p>
<span data-bind="text: total"></span>
</div>
请记住, input
元素的值始终是字符串 。 "1" + "1" - "1"
为"11" - "1"
为10
因为当任一操作数为字符串时, +
为字符串连接,而不是加法; 但是-
总是相减,因此它将其操作数强制为数字。
您需要通过+x
或parseFloat(x)
或Number(x)
或(如果它们是整数) parseInt(x, 10)
等来解析它们:
total = parseFloat(this.original())
+ parseFloat(this.improvements())
- parseFloat(this.depreciation());
例:
$(function() { ko.applyBindings(new AppViewModel()); }); function AppViewModel() { this.original = ko.observable(0); this.improvements = ko.observable(0); this.depreciation = ko.observable(0); this.total = ko.computed(function() { var total = 0; total = parseFloat(this.original()) + parseFloat(this.improvements()) - parseFloat(this.depreciation()); return total; }, this); }
<div class="calc-form"> <label>Original Purchase Price</label> <input type="text" id="original" data-bind="value: original" /> <label>+ Improvements</label> <input type="text" id="improvements" data-bind="value: improvements" /> <label>- Depreciation</label> <input type="text" id="depreciation" data-bind="value: depreciation" /> <input type="button" class="calcbutton" value="Calculate" /> <input type="button" class="calcbuttonreset" value="reset" /> <p>= Total</p> <span data-bind="text: total"></span> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
如果要大量使用数字输入,则可能要给自己一个特定的绑定:
// "numValue" binding handler (just an example)
ko.bindingHandlers.numValue = {
init: function(element, valueAccessor) {
function numValueHandler() {
valueAccessor()(parseFloat(this.value));
}
$(element).on("input change", numValueHandler)
.val(ko.unwrap(valueAccessor()));
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).off("input change", numValueHandler);
});
},
update: function(element, valueAccessor) {
element.value = ko.unwrap(valueAccessor());
}
};
然后:
<input type="text" id="original" data-bind="numValue: original" />
<!-- ---------------------------------------^^^^^^^^ -->
// "numValue" binding handler (just an example) ko.bindingHandlers.numValue = { init: function(element, valueAccessor) { function numValueHandler() { valueAccessor()(parseFloat(this.value)); } $(element).on("input change", numValueHandler) .val(ko.unwrap(valueAccessor())); ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $(element).off("input change", numValueHandler); }); }, update: function(element, valueAccessor) { element.value = ko.unwrap(valueAccessor()); } }; $(function() { ko.applyBindings(new AppViewModel()); }); function AppViewModel() { this.original = ko.observable(0); this.improvements = ko.observable(0); this.depreciation = ko.observable(0); this.total = ko.computed(function() { var total = 0; total = this.original() + this.improvements() - this.depreciation(); return total; }, this); }
<div class="calc-form"> <label>Original Purchase Price</label> <input type="text" id="original" data-bind="numValue: original" /> <label>+ Improvements</label> <input type="text" id="improvements" data-bind="numValue: improvements" /> <label>- Depreciation</label> <input type="text" id="depreciation" data-bind="numValue: depreciation" /> <input type="button" class="calcbutton" value="Calculate" /> <input type="button" class="calcbuttonreset" value="reset" /> <p>= Total</p> <span data-bind="text: total"></span> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.