3

ノックアウトでプロジェクトを開発しています。ノックアウト バインディングと optgroup を使用して選択する方法を見つけました。ここに解決策があります：http://jsfiddle.net/HPhmB/3/

残念ながら、このソリューションでは、select に「option」と「optgroup」を入力するために静的モデルを使用しています。

個人的なニーズとしては、もっとダイナミックなものが欲しいです。データベースから提供される observableArray から始めたいと思います。この observableArray は次のようになります。

var vehicles = ko.observableArray([
    {
     Id: 1,
     Brand: "Volkswagen",
     Type: "Golf"
    },
    {
     Id: 2,
     Brand: "Volkswagen",
     Type: "Sharan" 
    },
    {
     Id: 3,
     Brand: "BMW",
     Type: "118i"
    }
    {
     Id: 4,
     Brand: "BMW",
     Type: "525D"
    }
 ]);

ここに画像の説明を入力

私の質問:選択を構築するために、この単一のobservableArrayに基づくソリューションを持つことは可能ですか? おそらく、optgroup/options を取得するために計算されたプロパティの助けを借りて?

ありがとう。

4

1 に答える 1

9

これを行う方法の 1 つを次に示します。最適ではありませんが、うまく機能します。

var ViewModel = function () {
    var self = this;
    self.vehicles = ko.observableArray([{
        Id: 1,
        Brand: "Volkswagen",
        Type: "Golf"
    }, {
        Id: 2,
        Brand: "Volkswagen",
        Type: "Sharan"
    }, {
        Id: 3,
        Brand: "BMW",
        Type: "118i"
    }, {
        Id: 2,
        Brand: "BMW",
        Type: "525D"
    }]);

    self.brands = ko.computed(function(){
        var list = ko.utils.arrayMap(self.vehicles(), function(item){
            return item.Brand;
        });

        return ko.utils.arrayGetDistinctValues(list);
    });
};

ko.applyBindings(new ViewModel());

<select data-bind="foreach: brands">
    <optgroup data-bind="attr: {label: $data}, foreach: $parent.vehicles">
    <!-- ko if: Brand == $parent -->
        <option data-bind="text: Type"></option>
    <!-- /ko -->
    </optgroup>
</select>

フィドル: http://jsfiddle.net/HPhmB/55/

于 2013-04-11T12:32:34.340 に答える