使用 ko.observableArray 检查重复项答案

【问题标题】：Check duplicate using ko.observableArray使用 ko.observableArray 检查重复项
【发布时间】：2012-04-11 05:08:46
【问题描述】：

如何在添加之前检查重复的签名。在下面的场景中，如果没有签名找到列表，我想添加签名。

    var Signature = function (name, interestDeclared) {
        this.Name = ko.observable(name);
       this.RelevantInterest = ko.observable(interestDeclared);
    } 

   viewModel = {

    signatures: ko.observableArray([]),

    addSignature: function () {
        var name = $('#signatureName').val();
        var intd = $('#interest').is(':checked');

        this.signatures.push(new Signature(name, intd));

    },
    deleteSignature: function (signature) {
        this.signatures.remove(signature);
     },

    insertWitness: function (signature, position) {
        this.signatures.splice(position, 0, signature);
      }
};

ko.applyBindings(viewModel, document.getElementById("signatories"));

谢谢， -娜莲

【问题讨论】：

标签： javascript arrays knockout.js

【解决方案1】：

您可以像这样使用数组实用程序函数。

if (!Array.prototype.findIndexOf) {
    Array.prototype.findIndexOf = function (search) {
        var len = this.length, i, item;
        if (typeof search != "function") {
            throw new TypeError();
        }

        for (i = 0; i < len; i += 1) {
            item = this[i];
            if (search.apply(this, [item])) {
                return i;
            }
        }
        return -1;
    };
}

然后像这样更新您的 addSignature 方法。

addSignature: function () {
   var name = $('#signatureName').val();
   var intd = $('#interest').is(':checked');

   var found = this.signatures().findIndexOf(function(s) { return s.Name() === name; });
   if (found == -1) {
      this.signatures.push(new Signature(name, intd));
   }
}

Here's a great resource 用于与 js 数组相关的所有内容。

仅供参考。您不应该通过 jquery 选择器获取名称/兴趣值。而是分别使用 KO 的 value/checked 绑定将 value 绑定到您的 viewModel。这样，您的 addSignature 方法就可以与标记完全分离。

希望这会有所帮助。

【讨论】：

【解决方案2】：

使用jQuery的grep函数：

addSignature: function () {
    var name = $('#signatureName').val();
    var intd = $('#interest').is(':checked');
    if($.grep(this.signatures(), function(el){return el.Name() === name;}).length === 0){
        this.signatures.push(new Signature(name, intd));
    }
}

【讨论】：

【解决方案3】：

您还可以使用 KO 框架中的一些内置实用程序函数。我过去用这种技术解决了这个问题：

var name = $('#signatureName').val(),
    intd = $('#interest').is(':checked'),
    match = ko.utils.arrayFirst(this.signatures(), function (item) {
    if (item.Name() === name) {
         return selectedCounsel;
    }
});

if (!match) {
    // This means it wasn't already in our array, so we'll add it.
    this.signatures.push(new Signature(name, intd));
}

我也同意@madcapnmckay，不要使用 jQuery 从输入中查找值，更新您的模型，以便 signatureName 和 interest 绑定到您的模型并使用这些值。

【讨论】：