knockout, css binding dynamisch und konditional

Question

Ich möchte eine bedingte CSS-Klasse und eine dynamische CSS-Klasse über die CSS-Bindung hinzugefügt haben.

Wie so:

data-bind="css: {$data.something() : true, open : showOpen() }" 

Answer 1

Clearest ist sie wahrscheinlich in einem kombinieren berechnet:

function ViewModel() { 
 
    var self = this; 
 
    
 
    self.something = ko.observable("danger"); 
 
    self.showOpen = ko.observable(true); 
 
    
 
    self.cssClass = ko.computed(function() { 
 
    return self.something() + (self.showOpen() ? " open" : ""); 
 
    }); 
 
} 
 

 
ko.applyBindings(new ViewModel());

div { padding: 10px; } 
 
.danger { background-color: orange; } 
 
.open { border: 5px solid gray; border-width: 5px 5px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script> 
 

 
<div data-bind="css: cssClass"> my div with class: <code data-bind="text: cssClass"></code> </div> 
 
<hr> 
 
<label><input type="checkbox" data-bind="checked: showOpen"> showOpen</label> 
 
<br> 
 
<input type="text" data-bind="value: something, valueUpdate: 'afterkeydown'">

Ermöglicht das Gerät zu testen die ganze Sache, und hält Ihre Ansicht prägnant.

Answer 2

Ich ziehe eine benutzerdefinierte wie diese Bindung:

ko.bindingHandlers.klass = { 
 
    init: function (el, val) { 
 
    var prevClass = null 
 
    
 
    ko.computed(function() { 
 
     if (prevClass) 
 
     $(el).removeClass(prevClass); 
 
     
 
     var newClass = ko.unwrap(val()); 
 
     
 
     $(el).addClass(newClass); 
 
     prevClass = newClass; 
 
    }, null, {disposeWhenNodeIsRemoved: el}) 
 
    
 
    } 
 
} 
 

 
var vmo = { 
 
    cssClass: ko.observable('a'), 
 
    toggle: function() { vmo.cssClass(vmo.cssClass() == 'a' ? 'b' : 'a') } 
 
} 
 

 
ko.applyBindings(vmo);

.a { 
 
    color: red; 
 
} 
 
.b { 
 
    color: blue; 
 
} 
 
.another { 
 
    text-decoration: underline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<p data-bind='klass: cssClass, css: {another: true}'>Hello</p> 
 
<button data-bind='click: toggle'>Toggle</button>