KnockoutJS：需要格式化可观察值（十进制）

Posted 2021-05-05

我暂时没有使用Knockout，并且在尝试将表单字段的输入值修剪为两位小数时遇到了问题。我创建了下面计算的observable，并通过我想用修剪值更新的observable订阅它。谁能告诉我我做错了什么？

查看模型

function createViewModel() {
  var self = {};

  self.SalesRepId = ko.observable().extend({ required: true });
  self.PriceAdvanced = ko.observable("").extend({ required: true, min: 1, max: 200 });

  self.decimalValue = ko.computed(function () {
    var num = self.PriceAdvanced().slice(0, (self.PriceAdvanced().indexOf(".")) + 3);
    return num;
  }).extend({ notify: "always" });

  self.PriceAdvanced.subscribe(self.decimalValue);

  return self;
}

html：

<div class="form-group col-xs-12">
          <label class="label-col col-xs-4 control-label labelFormat" for="PriceAdvanced"><span class="warn">* </span>Advanced Criminal History Search</label>
          <div class="col-xs-8">
            <input class="form-control max225" type="text" id="PriceAdvanced" name="PriceAdvanced" data-bind="textInput: PriceAdvanced" size="23" placeholder="$0.00" />
          </div>
</div>

答案

1. 你在调用ko.applyBindings方法吗？如果没有，您需要在代码末尾调用它。
2. 我认为您的想法是使用decimalValue将小数位数限制为2，然后PriceAdvanced将订阅decimalValue的更新值，对吧？但是订阅并不像那样。计算的observables听取它们内部的可观察量，而.subscribe函数是对observable本身的监听器。因此，您的代码将处于永无止境的循环中。
3. 另外我想你只想限制小数位，而不是数字本身对吗？因此，只有存在小数点时，才更改代码以修剪值。 function createViewModel() { var self = {}; self.SalesRepId = ko.observable().extend({ required: true }); self.PriceAdvanced = ko.observable("").extend({ required: true, min: 1, max: 200 }); self.decimalValue = ko.computed(function () { var num = self.PriceAdvanced().indexOf(".") > -1? self.PriceAdvanced().slice(0, (self.PriceAdvanced().indexOf(".")+3)): self.PriceAdvanced(); //return num; self.PriceAdvanced(num); }).extend({ notify: "always" }); return self; } ko.applyBindings(new createViewModel());

注意：你的扩展器min: 1，max: 200将不起作用，因为PriceAdvanced持有字符串而不是数字。