javascript - knockout : Needing to format observable values (decimal)

Question

我有一段时间没有使用 Knockout，并且在尝试将表单字段的输入值 trim 到小数点后两位时遇到问题。我创建了下面的计算可观察量，并通过我想要用 trim 后的值更新的可观察量来订阅它。谁能告诉我我做错了什么？

查看模型

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>

Answer 1

1. 您是否调用 ko.applyBindings方法？如果没有，您需要在代码末尾调用它。
2. 我认为你的想法是使用 decimalValue将小数位数限制为 2，然后 PriceAdvanced将订阅 decimalValue 的更新值， 正确的？但订阅并不是这样工作的。计算的可观察量监听其中的可观察量，并且 .subscribe函数是可观察对象本身的监听器。所以你的代码将处于永无休止的循环中。

3. 另外，我认为您只想限制小数位数，而不是位数本身，对吗？因此，我更改了代码，仅在存在小数点时才 trim 该值。

   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 一样工作保存一个字符串而不是一个数字。