Adding multiple CSS Elements to a data-bind with Knockout

Question

I need to add multiple css classes to a div using knockout.

I have this div:

    <div data-bind="css: {'case-header': model.caseHeader1, 'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">

the model.caseHeader1 is the default. caseHeader2/3 are only true when the conditions are met. Our design engineer informed me that the css class 'case-header' needs to be on all three and add the css classes 'case-type-1/2' along side 'case-header'.

So I did this:

    <div data-bind="css: {'case-header': model.caseHeader1, 'case-header case-type-1': model.caseHeader2, 'case-header case-type-2': model.caseHeader3}">

Now one of the model types in the UI shows correctly, the other only shows case-type-1/2.

I also tried this:

    <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 this:

    <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}">

Which did not work, unfortunately.

In case it is needed, here is the relevant typescript:

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();
    });

Corey Sutton · Accepted Answer · 2023-05-12 20:42:27Z

0

I made this very difficult. When I considered that all of the models needed the css class 'case-header' regardless, I just wrapped it in another div:

div class="case-header">
        <div data-bind="css: {'case-header': model.caseHeader1, 'case-type-1': model.caseHeader2, 'case-type-2': model.caseHeader3}">
</div>
</div>

solved all of my problems. Now I am pretty sure I don't need to bother with the first check in the data-bind either.

answered May 12, 2023 at 20:42

Corey Sutton

1,0338 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martlark · Accepted Answer · 2023-05-16 23:27:28Z

0

A more effective way to handle classes for an element is to use a computed for the class binding. Example:

HTML:

<div data-bind="class: caseClasses">What class am I?: <span data-bind="text: caseClasses"></span></div>

Model computed method:

  this.caseClasses = ko.computed(() => {
    const classes = [];

    if (!this.useColorHeaderCaseHistory()) {
      classes.push('caseHeader1')
    } else {
      if (this.isRatingCase()) classes.push('caseHeader2');

      if (this.isQiCase()) classes.push('caseHeader3');
    }
    return classes.join(' ');
  });

Please see this js fiddle with a working example: knockout class binding

answered May 16, 2023 at 23:27

Martlark

14.6k14 gold badges86 silver badges103 bronze badges

Collectives™ on Stack Overflow

Adding multiple CSS Elements to a data-bind with Knockout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related