Question

我正在尝试绑定敲除js中的下拉列表，但在我的数据中有一些重复是否可以在绑定到下拉列表时删除这些重复项？

以下是我如何绑定数据

<select data-bind="options: availableCountries,
               optionsText: function(item) {
                   return item.countryName + ' (pop: ' + item.countryPopulation + ')'
               },
               value: selectedCountry,
               optionsCaption: 'Choose...'"></select>

var Country = function(name, population) {
    this.countryName = name;
    this.countryPopulation = population;
};

我的viewmodel如下

var AppViewModel = function() {
this.availableCountries = ko.observableArray([
        new Country("UK", 65000000),
        new Country("USA", 320000000),
        new Country("Sweden", 29000000),
     new Country("Sweden", 29000000)
    ]);
    this.selectedCountry = ko.observable();
};
ko.applyBindings(new AppViewModel());

这是js小提琴 http://jsfiddle.net/PV7yD/

谢谢，

普利文。

Answer 1

您可以在计算的observable中使用Underscore的_.uniq函数，并使用迭代器将每个项目序列化为JSON以进行完全比较。像这样：

this.displayedCountries = ko.computed( function () {
    return _.uniq( this.availableCountries(), false, ko.toJSON );
}, this );

您可以将ko.toJSON替换为仅返回国家/地区countryName属性的函数，如果该属性足以确定唯一性（在这种情况下可能就是这样）。

更新了小提琴：http://jsfiddle.net/PV7yD/2/

Answer 2

您可以使用ko.utils.arrayGetDistinctValues函数获取不同的值，也可以使用过滤器。

 self.uniqueCountries = ko.dependentObservable(function () {
    var seen = [];
    return self.availableCountries().filter(function (n) {
        return seen.indexOf(n.countryName+'-'+n.countryPopulation) == -1 && seen.push(n.countryName+'-'+n.countryPopulation);
    });
}, self);

视图： -

 <select data-bind="options: uniqueCountries,
               optionsText: function(item) {
                   return item.countryName + ' (pop: ' + item.countryPopulation + ')'
               },
               value: selectedCountry,
               optionsCaption: 'Choose...'"></select>

欲了解更多信息： -

FIDDLE DEMO

如何删除knockout js下拉列表中的重复项

2 个答案: