可觀察和計算無法正常工作

Question

我有以下實現以下角色的基因剔除代碼：

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>

Answer 1

請記住， 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>