使用敲除來切換css類

Question

我想要做一些這樣的事情。這是一個有效的語法嗎？我正在檢查一些標誌值並切換兩個css類？

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css:IsTabsCollapsed ? TabCollapsed : TabExpanded"></div> 

第一部分可見dataBinding適合我。

Answer 1

你可以嘗試包圍括號中的CSS的邏輯是這樣的：

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: { IsTabsCollapsed ? TabCollapsed : TabExpanded }"></div> 

如果不是這樣，您可以將邏輯移動到你的JavaScript，而不是通過使用一個計算值做的HTML。

viewModel.myCssClass = ko.computed(function() { 
    return IsTabsCollapsed ? "TabCollapsed" : "TabExpanded"; 
}, viewModel); 


<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: myCssClass"></div> 

Answer 2

如果IsTabsCollapsed是可觀察到的，你要做的：

IsTabsCollapsed() ? TabCollapsed : TabExpanded 

Answer 3

這是一個可能的語法CSS結合：

<div data-bind="css: { TabCollapsed: IsTabsCollapsed, TabExpanded: !IsTabsCollapsed() }"></div> 

參見文檔：http://knockoutjs.com/documentation/css-binding.html

Answer 4

您可以使用CSS綁定像這樣的計算可觀察值。

<div data-bind="css: TabClass"> 
    ... 
</div> 

<script type="text/javascript"> 
    var viewModel = { 
     IsTabsCollapsed: ko.observable(false); 
    }; 
    viewModel.TabClass = ko.computed(function() { 
     return this.IsTabsCollapsed() ? "TabCollapsed " : "TabExpanded"; 
    }, viewModel); 
</script> 

它不是實現你想要的最小和最乾淨的方式，但它很容易管理和改變，而且非常容易理解。

Answer 5

免責聲明：快速和骯髒的版本

我需要一個快速和骯髒的方式，一類適用於調試面板，並與下面就來了。

我推薦這個版本只用於調試，它只適用於你也使用jQuery。

<div class="debug-only knockout-debug-panel" 
      data-bind="click: function(data, event) { $(event.currentTarget).toggleClass('transparent'); }"> 

</div> 

.transparent { opacity: .5; } 

淘汰賽有一個功能toggleDomNodeCssClass，但unfortuntely它需要一個boolean是否添加或刪除類。