如何在knockout.js中添加由javascript方法生成的css類？

在我的ViewModel我已經根據pState返回我的CSS類下面的方法：如何在knockout.js中添加由javascript方法生成的css類？

function MyViewModel() 
{ 
    var self = this; 

    self.GetClass = function(pState) 
    { 
     var lCssClass; 

     switch(pState) 
     { 
      case "warning": 
       lCssClass = 'bg-yellow'; 
       break; 
      case "red": 
       lCssClass = 'font-red'; 
       break; 
      default: 
       lCssClass = 'font-default'; 
       break; 
     } 

     return lCssClass; 
    }; 
}

我要添加的類別在我看來：

<span class="list-item" data-bind="attr : { class : $root.GetClass('warning')}">This is a warning.</span>

我的問題：現有的類list-item將被覆蓋。

這裏是一個小提琴：http://jsfiddle.net/d8L6v9h7/

來源

2015-04-28 Simon

的css binding將保留現有的類。使用它，例如像這樣：

function MyViewModel() 
 
{ 
 
    var self = this; 
 
    
 
    self.GetClass = function(pState) 
 
    { 
 
     var lCssClass; 
 

 
     switch(pState) 
 
     { 
 
      case "warning": 
 
       lCssClass = 'bg-yellow'; 
 
       break; 
 
      case "red": 
 
       lCssClass = 'font-red'; 
 
       break; 
 
      default: 
 
       lCssClass = 'font-default'; 
 
       break; 
 
     } 
 

 
     return lCssClass; 
 
    }; 
 
} 
 

 
ko.applyBindings(new MyViewModel());

.list-item:before { content: ' ✓ '; } /* Just to prove it's preserved. */ 
 
.bg-yellow { background-color: yellow; } 
 
.font-red { color: red; } 
 
.font-default { }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<span class="list-item" data-bind="css: $root.GetClass('warning')">This is a warning.</span>

這是一個「直線上升」回答你的問題。還請檢查@Progrindis answer，甚至考慮進一步改進代碼的工作方式。

PS。如果你想要一個更「直線上升」的解決方案，例如，當你創建一個快速模仿起來，不關心解決方案的整潔的，你也可以訴諸：

<span data-bind="attr: { class: 'list-item ' + $root.GetClass('warning') }">

來源

2015-04-28 08:30:42 Jeroen

它不會是至少更好地使用計算的可觀察值？根據我的理解，這個GetClass需要每次調用才能獲得更新的值。摧毀可觀察的否定的目的？ – Pogrindis

是的，我同意有一些代碼氣味可能需要解決（以您建議的方式）。但是，OP尚未發佈足夠的他/她的設置以便能夠執行代碼審查c.q.建議替代品而不訴諸猜測。這就是爲什麼我直接回答這個問題。 – Jeroen

夠公平的！一旦我沒有失去理智！ – Pogrindis

您使用css結合..

KnockoutJS CSS Binding

例如：

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> 
    Profit Information 
</div> 

<script type="text/javascript"> 
    var viewModel = { 
     currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class 
    }; 
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied 
</script>

你可以添加類本身或者您也可以添加條件邏輯來決定何時應用它。

對於您的例子，它看起來像你可以有lCssClass作爲可觀察到的，並應用給你的HTML：在你的HTML

var self = this, 
classObservable = ko.observable(""); 

switch(pState) 
     { 
      case "warning": 
       self.classObservable('bg-yellow'); 
       break; 
      case "red": 
       self.classObservable('font-red'); 
       break; 
      default: 
       self.classObservable('font-default'); 
       break; 
     }

然後：

<span class="list-item" data-bind="css: classObservable()">This is a warning.</span>

來源

2015-04-28 08:26:20 Pogrindis

如何在knockout.js中添加由javascript方法生成的css類？

回答

相關問題