I have a situation where I need to apply multiple css classes to a div using knockout.
Here is the initial div:
<div data-bind="css: {'case-header': model.caseHeader1, 'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">
The model.caseHeader1 is always present, while caseHeader2 and caseHeader3 are conditionally true. The design engineer has advised that the css class 'case-header' should be included in all three instances and additionally, the css classes 'case-type-1/2' should also be included alongside 'case-header'.
After making these adjustments with this code:
<div data-bind="css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">
We see that one of the model types displays correctly but the other only shows case-type-1/2.
We attempted the following variations as well:
<div data-bind="class: 'case-header', css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">
And:
<div class="case-header" data-bind="css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">
However, neither of these methods proved successful.
If necessary, here is the relevant TypeScript code:
self.model.caseHeader1 = ko.computed(function () {
return !self.model.useColorHeaderCaseHistory(); //a true false boolean that returns true if the client is using it, in this case, it is true
});
self.model.caseHeader2 = ko.computed(function () {
return self.model.isRatingCase() && self.model.useColorHeaderCaseHistory();
});
self.model.caseHeader3 = ko.computed(function () {
return self.model.isQiCase() && self.model.useColorHeaderCaseHistory();
});