2

ノックアウトを使用してドロップダウンのグループを作成しようとしています。これにより、ユーザーはリストから最大3つの値（色など）を選択できます。リストは次のように始まります：-赤、オレンジ、黄色、緑、青、藍、紫

DropDown 1 - Select any of the 7
DropDown 2 - Select any of the 6 remaining
Dropdown 3 - Select any of the 5 remaining

ユーザーが戻ってDropDown1を何かに変更した場合、残りの色（およびDropDown 1の色）のみを選択できるようにする必要があります。その後、変更すると、ドロップダウン2または3に移動して、以前の1の値に変更できます。

7つのアイテムを含む初期配列が必要だと思います。次に、ドロップダウンごとにobservableが必要です。3つの観測可能なデータは、初期データに基づいており、他の3つのドロップダウンから選択したものを除外する必要があります。私はこれに本当に苦労しています。私はそれを実装することにさえ近づくことができません。

これはノックアウトの可能性も適切な使用法ですか、それともonChangeを使用してJSを確認する必要がありますか？

4

1 に答える 1

2

これはノックアウトで間違いなく可能です。そして、それを行うにはおそらく10の方法があります。私はここで1つの方法を考え出しました：

http://jsfiddle.net/mbest/wfW97/

参照用のコードは次のとおりです。

function ViewModel() {
    var self = this;
    self.colors = ['red','orange','yellow','green','blue','indigo','violet'];
    self.selections = [];
    ko.utils.arrayForEach(self.colors, function() {
        self.selections.push(ko.observable());
    });
    self.selfAndUnselectedColors = function(index) {
        var selfColor = self.selections[index]();
        return ko.utils.arrayFilter(self.colors, function(color) {
            return color === selfColor || !ko.utils.arrayFirst(self.selections, function(sel) {
                return color === sel();
            });
        });
    }
}
ko.applyBindings(new ViewModel());

そしてHTML：

<div data-bind="repeat: colors.length">
    <select data-bind="options: selfAndUnselectedColors($index), optionsCaption: 'select a color', value: selections[$index]"></select>
</div>​

繰り返し選択要素を作成するために繰り返しバインディングプラグインを使用していますが、必要に応じて他の方法を使用することもできます。

于 2012-06-20T02:16:52.867 に答える