2

ノックアウト.jsを使用してドロップダウンリストをコーディングしています:

views() は、REST を使用して JSON 経由でインスタンス化されたオブジェクトの配列です。displayName は、これらのオブジェクトの String 属性であり、監視できません。displayName 属性を比較して、特定の単語と一致する場合は、そのオプションに何らかのスタイルを適用したいと考えています。

<select id="views" data-bind="
    options: views(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( displayName == 'some arbitrary text') ? 'red' : 'black' }
 "></select>

スタイルバインディングを追加しないと、ドロップダウンは意図したとおりに機能します。簡単な比較 (つまり 1 == 1) を行うことができ、それは機能します (ただし、すべてのオプションが赤くなります)。私がやりたいことは、「displayName」属性を任意のテキストと比較することです。現在はテキストを含む単なる文字列ですが、後でこの文字列は ViewModel から呼び出されます。

これにより、ビュー モデルで必要な場合に、特定のオプションをさまざまなスタイルで設定できるようになります。何か案は？

4

2 に答える 2

1

selectedView オブザーバブルの値を追跡し、その displayName プロパティに対してテストできるはずです。可能であれば、displayName をオブザーバブルにすることをお勧めします。

http://jsfiddle.net/p5T8V/

<select id="views" data-bind="
    options: viewers(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( $parent.selectedView().displayName == 'not ok') ? 'red' : 'black' } ">


<span data-bind="text: selectedView().displayName" />

そのスパンを一番下に置くと、selectedView().displayName の値を確認できます。スタイルに $parent を追加する必要があるのは、要素を selectedView にバインドしているためです。$(this).displayName のようなものを使用するより効率的な方法があるかもしれませんが、新しいプロジェクトを作成する時間がなく、フィドルは 1 つのフレームワークしか受け入れません。

于 2013-07-17T15:31:45.037 に答える