2012-12-21 147 views
1

想要从KoObservableArray中删除重复值。我有以下的JS文件。我想要将用户界面中的名称列作为下拉列表绑定,并删除重复的值。从KOObservable阵列删除重复项

建议最好的方法来做同样的事情。

JS文件

$(function() { 
    var initialData = [ 
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 }, 
    { name: "Speedy Coyote", sales: 89, price: 190.00 }, 
    { name: "Furious Lizard", sales: 152, price: 25.00 }, 
    { name: "Furious Lizard", sales: 213, price: 25.00 }, 
    { name: "Indifferent Monkey", sales: 1, price: 99.95 }, 
    { name: "Speedy Coyote", sales: 89, price: 190.00 }, 
    { name: "Brooding Dragon", sales: 0, price: 6350 }, 
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 }, 
    { name: "Optimistic Snail", sales: 420, price: 1.50 } 
]; 

    var PagedGridModel = function (items) { 
     this.items = ko.observableArray(items);  
    }; 

    ko.applyBindings(new PagedGridModel(initialData)); 
}); 

HTML File 
<body> 

<nav> 
<label for="name">Name</label> 
     <select id="name" data-bind="options: items, optionsText: 'name', optionsCaption:'All'"> 
     </select> 
</nav> 

</body> 

上面给我的下拉重名。

+0

一种方法是创建一个计算阵列,它会选择只有唯一的名称,然后绑定你选择这个变量。另一种方法是首先不要将重复项添加到主数组中。 – ryadavilli

+0

只有名称字段是重复的,但其他字段不是,因此无法过滤不同的值。我可以有一个计算数组的例子吗? – user1899731

回答

3

请参阅下面有关如何让计算的observable返回数组的示例。我刚刚写下了过滤的逻辑,但它可能不正确或最佳,我会留给你改进。

$(function() { 
    var initialData = [ 
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 }, 
    { name: "Speedy Coyote", sales: 89, price: 190.00 }, 
    { name: "Furious Lizard", sales: 152, price: 25.00 }, 
    { name: "Furious Lizard", sales: 213, price: 25.00 }, 
    { name: "Indifferent Monkey", sales: 1, price: 99.95 }, 
    { name: "Speedy Coyote", sales: 89, price: 190.00 }, 
    { name: "Brooding Dragon", sales: 0, price: 6350 }, 
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 }, 
    { name: "Optimistic Snail", sales: 420, price: 1.50 } 
]; 

    var PagedGridModel = function (items) { 
     var self = this; 
     self.items = ko.observableArray(items);  
     self.uniqueItems = ko.computed({ 
      var filteredArray = []; 
      var i; 
      $.each(self.items(), function (index, item) { 
       bool alreadyAdded = false; 
       for (i in filteredArray) { 
         if (filteredArray[i].name == item.name) { 
          alreadyAdded = true; 
         } 
       } 
        if (!alreadyAdded) { 
         filteredArray.push(item); 
        } 
      }); 
      return filteredArray; 
     }); 
    }; 

    ko.applyBindings(new PagedGridModel(initialData)); 
}); 

最后在你的HTML

<select id="name" data-bind="options: uniqueItems, optionsText: 'name', optionsCaption:'All'"> 
</select>