knockoutjs new li background fadeout

knockout class binding

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<div data-bind="class: caseClasses">What class am I?: <span data-bind="text: caseClasses"></span></div>
<button data-bind="click: ()=>useColorHeaderCaseHistory(!useColorHeaderCaseHistory())">
  useColorHeaderCaseHistory
</button>
<button data-bind="click: ()=>isRatingCase(!isRatingCase())">
  isRatingCase
</button>
<button data-bind="click: ()=>isQiCase(!isQiCase())">
  isQiCase
</button>

<table>
  <tr>
    <td>useColorHeaderCaseHistory</td>
    <td>isRatingCase</td>
    <td>isQiCase</td>
  </tr>
  <tr>
    <td data-bind="text: useColorHeaderCaseHistory"></td>
    <td data-bind="text: isRatingCase"></td>
    <td data-bind="text: isQiCase"></td>
  </tr>
</table>

<script type="text/javascript">
  class Model {
    constructor() {
      this.useColorHeaderCaseHistory = ko.observable(false);
      this.isRatingCase = ko.observable(false);
      this.isQiCase = ko.observable(false);
      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(' ');
      });

    }
  };
  const model = new Model()
  ko.applyBindings(model);

</script>

CSS

.caseHeader1 {
  background: blue
}
.caseHeader2 {
  color: red
}

.caseHeader3 {
  border: 1px solid
}
table, th, td {
  border: 1px solid;
}