ノックアウトを使用して、2012 年の大統領選挙で州をレンダリングする色を決定する次の作業コードがあります。州の値が 1 (共和党) の場合、色はredです。州の値が 2 (民主党) の場合、色はblueです。状態値が 3 (Toss Up) の場合、色は黄色です。
<div class="el-clickable" data-bind="css: {
'el-republican': model.ny()===ip.constants.electoralStatusValue.republican,
'el-democrat': model.ny()===ip.constants.electoralStatusValue.democrat,
'el-tossup': model.ny()===ip.constants.electoralStatusValue.tossUp
}"
state-abbrev="ny" style="top:26px;left:442px;height:102px;width:54px;" title="New York">
<div style="margin-top:46px;">NY</div></div>
<div class="el-clickable" data-bind="css: {
'el-republican': model.pa()===ip.constants.electoralStatusValue.republican,
'el-democrat': model.pa()===ip.constants.electoralStatusValue.democrat,
'el-tossup': model.pa()===ip.constants.electoralStatusValue.tossUp
}"
state-abbrev="pa" style="top:107px;left:372px;height:65px;width:65px;" title="Pennsylvania">
<div style="margin-top:23px;">PA</div></div>
問題は、単一の CSS セレクターを取得するために3 つの個別の CSS バインディング呼び出しが必要なため、これは問題に対するブルート フォース アプローチのように見えることです。つまり、選挙人団マップで各州の共和党、民主党、トスアップを確認する必要があります。
(共和党、共和党に傾いている、民主党に傾いている、民主党に傾いている、未定、トスサップ、ロックされているかを実際にチェックするので、実際のシナリオはさらに悪いです!)
http://www.ipredikt.com/contests/election2012
私が本当に欲しいのは、次のように、ユーティリティ関数を呼び出して状態値を渡すことでこれを実現する方法です。
data-bind="css: getStateColor(model.pa())" // for Pennsylvania
これは「attr」バインディングで実行できますか?
'string-literal', true|false のCSS バインディング メカニズムが非常に制限的であると感じることがよくあります。Knockout が次のようなものもサポートしてくれたらいいのにと思います。
data-bind="css: myFunction(myParam)"