'options'バインディングを使用するとknockout.jsの色が<option>に変更されますか？

Question

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

私はコードでこの持っている：

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

を私はを追加した場合isDefault falseを返すならば、リスト全体が赤に着色されています。

は、それをこのようにコーディングし、これを達成するための唯一の方法です：

<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魔法のいくつかの形式がありますか？

ありがとうございます！

Answer 1

あなたの質問に答えるには、はい、それは私が信じる最良の方法です。

コードstyle: {color: isDefault() === true ? 'black' : 'red'}を使用すると、関連するDOM要素にスタイルをバインド（追加）できます。この場合、<select>タグ全体。あなたのような<option>タグはありません。だからあなたの全体がリストの色が変わります。

スタイルバインディングの詳細についてはknockoutjs docsをご覧ください。その後、JavaScriptで、あなたの親オブジェクトに関数を添付し

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

：トーマスWiersemaの答えに拡大すること

Answer 2

、あなたが行単位でその取り扱いアプローチしたいと思い道のようなものですそのような（私はもちろん、あなたの親オブジェクトがvmとisDefaultがcombinedComponentに属すると呼ばれているように、いくつかの仮定を作ってるんだ）：

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

あなたはcallが何をするかわからない場合、をチェックアウト

私はそれが助けてくれることを願っています - 私が精緻化できるかどうか教えてください！

Answer 3

すでに言われていることを追加するには、ノックアウトの1つの機能があります。これは多くの見落としがあり、これらの状況では非常に便利です：$index。たとえば、リストの最初のオプションを黒にし、残りを赤で表示するリストを作成しています。

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

をそれとも、別の色にしたい場合は、単にモジュラスチェックを使用します。だから、僕はそうのようなあなたの目のオプションとして、あなたが持っているものを変更することができます。

<select id="components-select" size="4" name="components-select" data-bind="foreach: combinedComponents"> <option data-bind="value: id, text: displayName, style: {color: $index % 2 === 1 ? 'black' : 'red'}"></option> </select>