javascript - 可观察和计算无法正常工作

我有以下实现以下 Angular 色的 knockout 代码:

$(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。

例如:



知道什么会导致这种情况吗？

这是我的 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>

如果您要大量使用数字输入，您可能需要为它们自己指定一个特定的绑定(bind):

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

关于javascript - 可观察和计算无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39061522/