Xóa dữ liệu CSS bằng cách sử dụng chức năng?

Question

Tôi có mã làm việc sau sử dụng Knockout để xác định màu nào sẽ hiển thị trạng thái trong cuộc bầu cử tổng thống năm 2012. Nếu giá trị trạng thái là 1 (Cộng hòa), màu là màu đỏ. Nếu giá trị trạng thái là 2 (Dân chủ), màu là màu xanh da trời. Nếu giá trị trạng thái là 3 (Toss Up), màu là màu vàng.

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

Vấn đề là điều này có vẻ như một cách tiếp cận brute force như cho vấn đề kể từ khi tôi cần phải có 3 riêng biệt các cuộc gọi liên kết CSS để lấy một chọn CSS duy nhất. Đó là, tôi cần phải kiểm tra cho cộng hòa, dân chủ và quăng cho mỗi tiểu bang trên bản đồ đại học bầu cử của tôi.

(Kịch bản thực tế thậm chí còn tồi tệ hơn khi tôi thực sự kiểm tra cộng hòa, nghiêng cộng hòa, dân chủ, nghiêng nhà dân chủ, chưa quyết định, tossup, và bị khóa!)

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

Những gì tôi thực sự muốn là một cách để đạt được điều này bằng cách gọi một hàm tiện ích và chuyển qua giá trị trạng thái, như sau:

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

Có thể thực hiện điều này với liên kết 'attr' không?

Tôi thường cảm thấy rằng cơ chế ràng buộc CSS của: 'string-literal', true | false rất hạn chế. Tôi muốn Knockout cũng được hỗ trợ cái gì đó như:

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

Answer 1

Knockout 2.2 sắp ra rất sớm (2012/10/26) sẽ hỗ trợ này với các ràng buộc css. Cho đến lúc đó, bạn có thể sử dụng điều này class ràng buộc để làm điều tương tự.