2012-09-28 74 views
4

我想在Knockout中做到這一點。Knockout JS css「else」conditons

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
     'badge-warning': !firstPlace}"></span> 

在哪裏我的JavaScript的模型類有這個方法

self.firstPlace = ko.computed(function() { 
     return self.rank() == 1; 
    }); 

這未能出示工作證警告「級。我在數據綁定屬性中嘗試了一些調用變體,例如firstPlace == false(!firstPlace)。相反,我必須在我的模型中添加第二種反轉方法:

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
     'badge-warning': notFirstPlace}"></span> 


    // YUCK 
    self.notFirstPlace = ko.computed(function() { 
     return self.rank() != 1; 
    }); 

當然,這是有效的。對於Knockout JS來說,這真的很有趣。但這似乎是錯誤的。任何人都有更好的方法?

回答

18

當您在數據綁定屬性中使用邏輯操作時,應該在可觀察或計算的名稱後面加上()

<span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
    'badge-warning': !firstPlace()}"></span> 
+0

接受!爲什麼我不嘗試?有時很難讓我的頭在何時使用parens,什麼時候不使用。我通常最終使用試驗和錯誤。我認爲這是我第一次注意到同一個數據綁定中的兩個簽名。 – carbontax

+0

大多數綁定都是爲了語法而編寫的......如果沒有括號,它會手動執行它。括號不能被添加的唯一時候是當綁定是「輸出」時,比如'value:obs'。 –

+0

只是救了我一些麻煩!感謝+1 –

4

如果你要評估firstPlace()一次,你可以寫css爲內聯函數結合:

<span class="badge" data-bind="text: rank, css: (firstPlace() ? 'badge-success' : 'badge-warning')"></span>