不允许在 pureComputed 元素中重复答案

【问题标题】：not allow duplicates in a pureComputed element不允许在 pureComputed 元素中重复
【发布时间】：2017-01-23 10:04:47
【问题描述】：

拥有这个元素（注意计算域）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 中没有重复值？

【问题讨论】：

当有有重复时你想做什么？代替它？返回null?
@user3297291 留空（或null），请检查更新，我也添加了html
下划线js有uniq功能。 underscorejs.org _.uniq([1, 2, 1, 4, 1, 3]); => [1, 2, 4, 3]

标签： javascript html knockout.js knockout-2.0

【解决方案1】：

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

通过调用ko.unwrap，从observable 移动到Number，
检查解包后的值是否已经存在，即：filter uniques
确保您的数组中没有丑陋的 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>

【讨论】：