與重複類敲除css綁定

我剛剛用Knockout.js破解並遇到了我的第一個絆腳石，儘管我不確定這是一個錯誤還是我沒有正確地做某件事。與重複類敲除css綁定

當使用css綁定時，在第一個條件應用多個類時，如果多個類名包含「 - 」，則只應用一個。這在隨後的條件中不會發生，並且如果從類名稱中刪除「 - 」，則該類將成功應用。

所以這不起作用：

<i class="fa" data-bind=" css: { 'fa-caret-down text-info': active() && !asc(), 'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }">

而這樣做：

<i class="fa" data-bind=" css: { 'fa-caret-down textinfo': active() && !asc(),'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }"></i>

這是bug還是我失去了一些東西？

編輯：

看來我原來的診斷是錯誤的，當我有相同的類重複用於不同的情況下會出現的問題。所以下面不工作（僅fa-caret-down適用）：

css: { 'fa-caret-down text-danger': active() && !asc(), 'fa-caret-up text-danger': active() && asc(), 'fa-unsorted text-muted': !active() }

但這：

css: { 'fa-caret-down text-danger': active() && !asc(), 'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }

新撥弄那很容易看出：http://jsfiddle.net/pU9UR/1/

來源

2014-02-13 SWa

您正在使用哪種瀏覽器？你的小提琴在Chrome32中對我來說工作得很好...... http://jsfiddle.net/73Kh3/將文本信息更改爲文本提取器以提高可視性 – nemesv

Chrome32，這很奇怪，文本危險對我來說很好，但文本 - 在我的小提琴上的信息下來的插入符號是黑色的 - 啊實際上沒有，我已經更新了這個問題 – SWa

的是不是一個錯誤，但功能如何css binding works：

css綁定向關聯的DOM元素添加或刪除一個或多個命名的CSS類。

所以當KO遍歷所有css綁定對象的屬性，它具有以下功能：

採取'fa-caret-down text-danger'財產和檢查表達active() && !asc()如果計算結果爲真正那麼添加新類fa-caret-down和text-danger
取'fa-caret-up text-danger'屬性並檢查表達式active() && asc()這是與以前相反，所以它是假現在它刪除現有的類：它找不到fa-caret-up但text-danger是存在的，因此它將其刪除。

所以使它工作，你需要搬出公共部分使用不同的條件：

<i class="fa" data-bind="css: { 
    'fa-caret-down': active() && !asc(), 
    'fa-caret-up': active() && asc(), 
    'fa-unsorted text-muted': !active(), 
    'text-danger': active }"></i>

演示JSFiddle。

來源

2014-02-13 10:38:48 nemesv

謝謝，現在明白了，讓我的大腦受到了一點傷害;） – SWa

與重複類敲除css綁定

回答

相關問題