8

選択リストで 'options' バインディングを使用する場合、選択リストのオプション要素のスタイルを ('style' または 'css' バインディングを使用して) 変更することは可能ですか? または、選択リストで「foreach」を使用し、それぞれのスタイルを変更することによってのみこれを行うことができますか?

私はコードでこれを持っています:

<select id="components-select" size="4" name="components-select"
                        data-bind=" options: combinedComponents, 
                                    optionsText: 'displayName', 
                                    optionsValue: 'id', 
                                    value: chosenComponent"></select>

しかし、追加すると、 false を返すstyle: {color: isDefault() === true ? 'black' : 'red'}とリスト全体が赤色になります。isDefault

これを実現する唯一の方法は、次のようにコーディングすることです。

<select id="components-select" size="4" name="components-select"
                        data-bind="foreach: combinedComponents">
    <option data-bind="value: id, text: displayName, style: {color: isDefault() === true ? 'black' : 'red'}"></option>
</select>

または、私が認識していない Knockout.js の魔法のような形がありますか?

ありがとう！

4

4 に答える 4

2

Thomas Wiersema の答えを拡張するには、行ごとに処理する方法は次のようになります。

<select id="components-select" size="4" name="components-select"
                    data-bind="foreach: combinedComponents">
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option>
</select>

次に、JavaScript で、次のように関数を親オブジェクトにアタッチします (もちろん、親オブジェクトが呼び出され、combinedComponent に属しているなど、いくつかの仮定を立てていますvm) isDefault。

vm.getColorFor = function(component) {
    return component.isDefault() === true ? 'black' : 'red';
}

何をするかわからない場合は、 bind vs apply vs callcallをチェックしてください

お役に立てば幸いです。詳しく説明できる場合はお知らせください。

于 2015-10-01T23:13:41.773 に答える