1

KoObservableArray から重複した値を削除したい。次のJSファイルがあります。UI の名前列をドロップダウンとしてバインドし、重複する値を削除したいと考えています。

同じことをするための最良の方法を提案してください。

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>

上記は、重複した名前のドロップダウンを提供します。

4

1 に答える 1

3

計算されたオブザーバブルが配列を返す方法のサンプルについては、以下を参照してください。フィルタリングのロジックを書き留めましたが、正しくないか最適ではない可能性があります。改善するためにあなたに任せます.

$(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>
于 2012-12-21T06:58:43.190 に答える