清除CSS結合

我有一個計算的CSS結合這樣清除CSS結合

this.iconCss = ko.computed(function() { 
    var css = { icon: true }; 
    css[this.state().toLowerCase()] = true; 
    return css; 
}, this);

它的作用是顯示一個圖標可視化工作流中的每一步的狀態，比如我想要的CSS看起來像這樣class="icon running「或class="icon failed"等

的問題是，CSS不會結合清除舊的類，所以如果我第一次有這種class="icon queued"把狀態轉換到運行新的類將是class="icon queued running"這是不對的，沒關係，我給它分配一個新的對象字面值舊的類將不會被清除，一種方法是存儲對象字面量並遍歷它並將其所有屬性設置爲false。如果沒有清理css綁定的清潔程序，這是我的最後手段。

編輯：這是一個解決方案，但我不喜歡它

this.iconCssState = {}; 

this.iconCss = ko.computed(function() { 
    for (var index in this.iconCssState) { 
     this.iconCssState[index] = false; 
    } 

    this.iconCssState.icon = true; 
    this.iconCssState[this.state().toLowerCase()] = true; 
    return this.iconCssState; 
}, this);

來源

2012-09-21 Anders

你嘗試用「階級」，而不是綁定使用「ATTR」？像** attr：{'class'：somevalue} **。這通常應該每次都替換整個類的值。在這種情況下，計算出的值應該返回類似'圖標排隊'的內容。 – gbs

該問題是IE遇到類屬性問題，必須使用className屬性 – Anders

確保將_class_放在引號之間。這裏是一個[小提琴]（http://jsfiddle.net/nC7XY/2/），它適用於我的IE8。 – gbs

你可以做你想要使用的是什麼我class結合。（請注意，在淘汰賽中，2.2的下一個版本，你就可以使用css以同樣的方式結合。）

<div class="icon" data-bind="class: state().toLowerCase()"></div>

來源

2012-09-21 20:52:33

回答

相關問題