5

我有以下工作代码，它使用 Knockout 来确定在 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>

问题是这似乎是解决问题的一种蛮力方法，因为我需要有3 个单独的 CSS 绑定调用才能获取单个 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)"
4

1 回答 1

1

Knockout 2.2 即将推出（2012 年 10 月 26 日）将通过css绑定支持这一点。在那之前，你可以使用这个class绑定来做同样的事情。

于 2012-10-27T01:38:51.720 回答