knockout.js增加知名度觀察到基於CSS類

Question

我想打一個HTML元素可見基於頁面上的其他元素是否有某一類：

function MyViewModel() { 
    var self = this;   

    this.showElement = ko.computed(function() {    
     return $('#history').hasClass('active'); 
    }, this); 
} 

<li data-bind="visible: showElement">Element Text</li> 
<div id="summary" class="tab-pane fade in active"></div> 
<div id="history" class="tab-pane fade in"></div> 

任何時間製表窗格點擊，該標籤獲得'積極'類。根據哪個選項卡處於活動狀態，我想要隱藏或顯示li元素。我覺得我很接近，但錯過了一些東西。

Answer 1

我不會那樣做。 showElement屬性對視圖模型中的任何其他可觀察對象都沒有依賴關係，所以它不會被更新。

您應該更改它，以便active類將根據視圖模型中選擇的內容應用。那麼你可以讓你的Element Text應該出現。

添加綁定到你的div根據一些條件來應用active類，並設置基於條件的元素是可見的，你想：

<div id="summary" class="tab-pane" 
    data-bind="click: select, css: { active: summaryActive }">SUMMARY</div> 
<div id="history" class="tab-pane" 
    data-bind="click: select, css: { active: historyActive }">HISTORY</div> 

<li data-bind="visible: historyActive">Element Text</li> 

然後在您的視圖模型設置這些條件：

self.selected = ko.observable(null); 
self.summaryActive = ko.computed(function() { 
    return self.selected() === 'summary'; 
}); 
self.historyActive = ko.computed(function() { 
    return self.selected() === 'history'; 
}); 

fiddle