Question 169911 in Html Question posted in
Some basic documentation can be found here.

Can multiple CSS elements be added to a data-bind with Knockout?

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

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search