不允许在 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 函数链接到您的数字上。本质上，您正在做三件事：

通过调用 ko.unwrap、

observable

Number

检查展开的值是否已经存在，即：过滤唯一值
确保数组中没有难看的 null 或 undefined 值，这些值可能是空输入造成的

普通 javascript，但具有一些 "modern" 特征（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>

不允许在 pureComputed 元素中重复

not allow duplicates in a pureComputed element

html

javascript

knockout-2.0

knockout.js