不允许在 pureComputed 元素中重复

Question

拥有这个元素（注意计算域） fullNumber

var NumberField = function () {
  var self = this;
  self.maskFormat = "0";
  self.firstNumber = ko.observable("");
  self.secondNumber = ko.observable("");
  self.thirdNumber = ko.observable("");
  self.fourthNumber = ko.observable("");
  self.fifthNumber = ko.observable("");

  self.fullNumber = ko.pureComputed(function() {
    return [
      self.firstNumber,
      self.secondNumber,
      self.thirdNumber,
      self.fourthNumber,
      self.fifthNumber ].map(ko.unwrap);
  }
}

然后我像这样使用它：

<div class="numberFields" data-bind="with: numbers">

  <input id="0" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: firstNumber, maxNumber: 68">
  <input id="1" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: secondNumber, maxNumber: 68">
  <input id="2" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: thirdNumber, maxNumber: 68">
  <input id="3" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: fourthNumber, maxNumber: 68">
  <input id="4" class="number-ball" maxlength="2" type="tel" data-bind="twoDigits: fifthNumber, maxNumber: 68">

</div>

如何确保fullNumber中没有重复值？

Answer 1

在您的计算中，您可以链接各种map到您的数字的函数。 本质上，您正在做三件事：

1. 通过调用ko.unwrap从observable移动到Number ，
2. 检查展开的值是否已经存在，即：过滤唯一值
3. 确保数组中没有空输入可能导致的丑陋null或undefined值

在普通的 javascript 中，但具有一些“现代”功能（ Array.from ， Set ）：

 var uniques = function(arr) { // There are many implementations of a unique method. // google/search for `unique js values` to learn more return Array.from(new Set(arr)); }; var arrUnwrap = function(arr) { return arr.map(ko.unwrap); }; var truethyValues = function(arr) { return arr.filter(function(val) { return val; }); }; var NumberField = function () { var self = this; self.maskFormat = "0"; self.firstNumber = ko.observable(""); self.secondNumber = ko.observable(""); self.thirdNumber = ko.observable(""); self.fourthNumber = ko.observable(""); self.fifthNumber = ko.observable(""); var numbers = [ self.firstNumber, self.secondNumber, self.thirdNumber, self.fourthNumber, self.fifthNumber ]; // Read from right to left: // fullNumber is: unwrapped, unique, truethy numbers self.fullNumber = ko.pureComputed(function() { return truethyValues(uniques(arrUnwrap(numbers))); }); } ko.applyBindings(new NumberField());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div> <input data-bind="textInput: firstNumber"> <input data-bind="textInput: secondNumber"> <input data-bind="textInput: thirdNumber"> <input data-bind="textInput: fourthNumber"> <input data-bind="textInput: fifthNumber"> </div> <h1 data-bind="text: fullNumber"></h1>