从KOObservable阵列中删除重复项 [英] Remove duplicate from KOObservable array

查看:62
本文介绍了从KOObservable阵列中删除重复项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

想从KoObservableArray中删除重复的值.我有以下JS文件.我想将UI中的名称列绑定为下拉列表,并删除重复的值.

Want to remove duplicate values from KoObservableArray. I have following JS file. I want to bind the name column in the UI as dropdown as well as to remove the duplicate values.

建议执行此操作的最佳方法.

Suggest the best way to do the same.

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>

以上内容使我下拉菜单中出现重复的名称.

The above give me drop down with duplicate names.

推荐答案

请参见下面的示例,了解如何使计算的可观察值返回数组.我刚刚写下了过滤逻辑,但它可能不是正确的或最优的,我会留给您进行改进.

See below for a sample of how you can have a computed observable returning an array. I have just written down the logic for filtering but it may not be correct or optimal, I will leave it to you to improve on it.

$(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>

这篇关于从KOObservable阵列中删除重复项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆