在 KO 数字扩展中接受小数位答案

【问题标题】：Accept decimal places in KO numeric extension在 KO 数字扩展中接受小数位
【发布时间】：2020-07-15 12:19:06
【问题描述】：

我已经实现了 Knockout live 1 示例中显示的扩展器 - https://knockoutjs.com/documentation/extenders.html

ko.extenders.precision = function (target, precision) {
  //create a writable computed observable to intercept writes to our observable
  var result = ko
    .pureComputed({
      read: target, //always return the original observables value
      write: function (newValue) {
        var current = target(),
          roundingMultiplier = Math.pow(10, precision),
          newValueAsNum = isNaN(newValue) ? 0 : +newValue,
          valueToWrite =
            Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

        //only write if it changed
        if (valueToWrite !== current) {
          target(valueToWrite);
        } else {
          //if the rounded value is the same, but a different value was written, force a notification for the current field
          if (newValue !== current) {
            target.notifySubscribers(valueToWrite);
          }
        }
      },
    })
    .extend({ notify: "always" });

  //initialize with current value to make sure it is rounded appropriately
  result(target());

  //return the new computed observable
  return result;
};

视图模型如下：

model.gwaioDifficultySettings = {
  minionMod: ko.observable(0).extend({
    precision: 3,
    rateLimit: { timeout: 500, method: "notifyWhenChangesStop" },
  }),
};

并且可以通过 HTML 输入字段访问：

  <div>
    <input
      type="number"
      style="width: 50px; padding-bottom: 0px;"
      data-bind="textInput: model.gwaioDifficultySettings.minionMod"
    />
    <span style="margin-left: 6px;"></span>
    <loc>Minion Modifier</loc>
    <span
      class="info_tip"
      data-bind="tooltip: '!LOC:Mandatory Minions + Star Distance * Minion Modifier = number of additional enemy Commanders.'"
      >?</span
    >
  </div>

但是，我必须添加rateLimit: { timeout: 500, method: "notifyWhenChangesStop" }，否则我发现一旦值为整数，该字段将删除小数点，然后它将阻止任何尝试再次输入小数点。

在实际示例中似乎并非如此，我想知道我哪里出错了，或者仅仅是因为我使用 Knockout 3 和 Chromium 28 的环境。

【问题讨论】：

标签： javascript ecmascript-5 knockout-3.0

【解决方案1】：

我将https://gist.github.com/gnab/7579584 中的一些代码添加到我的扩展器中：

        if (_.isString(newValue)) {
          newValue = newValue.replace(",", ".");

          newValue = parseFloat(newValue);
          if (!isNaN(newValue)) {
            target(newValue);
          }
        }

这会导致：

ko.extenders.precision = function (target, precision) {
  //create a writable computed observable to intercept writes to our observable
  var result = ko
    .pureComputed({
      read: target, //always return the original observables value
      write: function (newValue) {
        if (_.isString(newValue)) {
          newValue = newValue.replace(",", ".");

          newValue = parseFloat(newValue);
          if (!isNaN(newValue)) {
            target(newValue);
          }
        }
        var current = target(),
          roundingMultiplier = Math.pow(10, precision),
          newValueAsNum = isNaN(newValue) ? 0 : +newValue,
          valueToWrite =
            Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

        //only write if it changed
        if (valueToWrite !== current) {
          target(valueToWrite);
        } else {
          //if the rounded value is the same, but a different value was written, force a notification for the current field
          if (newValue !== current) {
            target.notifySubscribers(valueToWrite);
          }
        }
      },
    })
    .extend({ notify: "always" });

  //initialize with current value to make sure it is rounded appropriately
  result(target());

  //return the new computed observable
  return result;
};

到目前为止，在我的所有测试中，这似乎都按要求执行。如果输入一个小数点，它会留下一个可见的悬挂小数点，但这似乎不会产生任何负面影响。

【讨论】：