Knockout Associazione dati CSS usando una funzione?

Question

Ho il seguente codice operativo che utilizza Knockout per determinare il colore da rendere uno stato nelle elezioni presidenziali del 2012. Se il valore dello stato è 1 (repubblicano), il colore è rosso. Se il valore dello stato è 2 (democratico), il colore è blu. Se il valore dello stato è 3 (Toss Up), il colore è giallo.

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

Il problema è che questo sembra un tale approccio forza bruta al problema da quando necessario avere 3 separati CSS inviti vincolanti al fine di recuperare un singolo selettore CSS. Cioè, ho bisogno di controllare repubblicano, democratico e sballato per ogni stato nella mia mappa del collegio elettorale.

(Lo scenario del mondo reale è ancora peggio, come ho effettivamente verificare la presenza repubblicana, appoggiandosi repubblicano, democratico, appoggiato democratico, indeciso, tossup, e bloccato!)

http://www.ipredikt.com/contests/election2012

Quello che voglio davvero è un modo per raggiungere questo obiettivo chiamando una funzione di utilità e passando il valore dello stato, in questo modo:

data-bind="css: getStateColor(model.pa())" // for Pennsylvania 

È questo fattibile con la 'attr' vincolante?

Ho spesso sentito che il meccanismo di legare CSS: 'stringa letterale', true | false è molto restrittiva. Vorrei Knockout supportato anche qualcosa di simile:

data-bind="css: myFunction(myParam)" 

Answer 1

Knockout 2.2, uscendo molto presto (2012/10/26) sosterrà questo con il css vincolante. Fino ad allora, puoi utilizzare questo bind di class per fare la stessa cosa.