Knockout CSS-Datenbindung mit einer Funktion?

Question

Ich habe die folgenden Arbeitscode, die Knockout verwendet, um festzustellen, welche Farbe einen Staat in der Präsidentschaftswahl 2012 zu machen. Wenn der Statuswert 1 (Republikaner) ist, lautet die Farbe rot. Wenn der Statuswert 2 (Demokrat) ist, lautet die Farbe blau. Wenn der Statuswert 3 (Toss Up) ist, lautet die Farbe gelb.

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

Das Problem ist, dass dies wie eine solche Brute-Force-Ansatz für das Problem scheint, da ich 3 separate CSS-Bindung Anrufe haben, um benötigen einen einzelnen CSS-Selektor zu holen. Das heißt, ich muss nach Republikanern, Demokraten und Tossup für jeden Staat auf meiner Wahl-College-Karte suchen.

(Die realen Szenario ist noch schlimmer als ich eigentlich für republikanische überprüfen, stützte sich Republikaner, Demokrat, lehnt demokrat, unschlüssig, tossup und gesperrt!)

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

Was ich wirklich will, ist eine Möglichkeit, dies zu erreichen, indem eine Nutzenfunktion und vorbei in dem Zustandswert, wie dieser Aufruf:

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

Ist das machbar mit dem ‚attr‘ verbindlich?

Ich habe mich oft, dass die CSS-Mechanismus verbindlich von: 'string-literal', true | false sehr restriktiv. Ich wünsche Knockout unterstützt auch etwas wie:

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

Answer 1

Knockout 2.2, sehr bald herauskommen (2012.10.26) wird diese Unterstützung mit der css Bindung. Bis dahin können Sie diese class Bindung verwenden, um das Gleiche zu tun.