css - 使用函数 knockout CSS 数据绑定(bind)？

Question

我有以下工作代码，它使用 Knockout 来确定在 2012 年总统选举中用什么颜色呈现一个州。如果州值为 1(共和党)，则颜色为红色。如果状态值为 2(民主党)，则颜色为蓝色。如果状态值为 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>

问题是，这似乎是解决问题的蛮力方法，因为我需要3 个单独的 CSS 绑定(bind)调用 才能获取单个 CSS 选择器.也就是说，我需要在我的选举人团 map 上检查每个州的共和党、民主党和 tossup。

(现实世界的情况更糟，因为我实际上检查了共和党人、倾向共和党人、民主党人、倾向民主党人、犹豫不决、投降和锁定!)

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

我真正想要的是一种通过调用实用函数并传入状态值来实现此目的的方法，如下所示:

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

这对“attr”绑定(bind)可行吗？

我经常觉得 CSS 绑定(bind)机制:'string-literal', true|false 限制性很强。我希望 Knockout 也支持类似的东西:

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

Answer 1

即将推出的 Knockout 2.2 (10/26/2012) 将通过 css 绑定(bind)支持这一点。在那之前，您可以使用这个 class绑定(bind)做同样的事情。